vue+ElementUI实现下拉地址列表多选功能

<template>
  <el-select v-model="selectedAddresses" multiple placeholder="请选择">
    <el-option
      v-for="address in addresses"
      :key="address.id"
      :label="address.description"
      :value="address.id">
    </el-option>
  </el-select>
</template>
 
<script>
export default {
  data() {
    return {
      selectedAddresses: [], // 用于绑定选中的地址ID数组
      addresses: [ // 地址列表数据
        { id: 1, description: '123 东 first street' },
        { id: 2, description: '456 西 second street' },
        // ...更多地址
      ]
    };
  }
};
</script>

这段代码展示了如何在Vue.js和Element UI中实现下拉地址列表的多选功能。el-select组件通过multiple属性开启多选，v-model绑定了一个数组selectedAddresses来存储选中的地址ID。el-option组件遍历addresses数组渲染每个地址选项，并通过:value绑定每个地址的id属性。用户可以选择一个或多个地址，选中的地址ID将存储在selectedAddresses数组中。