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）通常提供更完善的多选功能支持。
