vue实现select组件多选

Vue实现Select组件多选的方法

使用原生HTML <select> 结合 multiple 属性

通过原生HTML的<select>标签添加multiple属性实现多选，结合Vue的v-model绑定数组：

<template>
  <select v-model="selectedOptions" multiple>
    <option v-for="option in options" :value="option.value">
      {{ option.label }}
    </option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [],
      options: [
        { value: '1', label: '选项1' },
        { value: '2', label: '选项2' }
      ]
    }
  }
}
</script>

使用Element UI的el-select组件

Element UI提供了现成的多选支持，通过multiple和v-model绑定数组：

<template>
  <el-select v-model="selectedOptions" multiple placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

自定义多选组件

若需完全自定义样式和逻辑，可通过组合<div>和<input type="checkbox">实现：

<template>
  <div class="custom-multi-select">
    <div 
      v-for="option in options" 
      :key="option.value"
      @click="toggleOption(option.value)"
      :class="{ 'selected': selectedOptions.includes(option.value) }">
      {{ option.label }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [],
      options: [
        { value: '1', label: '选项A' },
        { value: '2', label: '选项B' }
      ]
    }
  },
  methods: {
    toggleOption(value) {
      const index = this.selectedOptions.indexOf(value)
      if (index === -1) {
        this.selectedOptions.push(value)
      } else {
        this.selectedOptions.splice(index, 1)
      }
    }
  }
}
</script>

注意事项

• 样式处理：多选组件通常需要自定义下拉框样式和选中状态样式
• 性能优化：当选项数量较大时，建议添加虚拟滚动（如使用vue-virtual-scroller）
• 数据绑定：确保v-model绑定的是数组类型，单选模式下应为字符串或数字

高级功能扩展

• 添加全选功能：在选项列表顶部增加全选复选框
• 搜索过滤：集成输入框实现选项搜索
• 标签化显示：已选选项以标签形式展示在下拉框内

以上方法可根据项目需求选择使用，第三方组件库（如Element UI/Ant Design Vue）通常提供更完善的多选功能支持。