vue实现多选下拉
实现多选下拉的基本思路
使用 Vue 结合第三方组件库（如 Element UI、Ant Design Vue）或自定义实现多选下拉功能。以下是两种常见实现方式。
使用 Element UI 的 Select 组件
Element UI 提供了 el-select 组件，支持多选功能。安装 Element UI 后直接使用即可。
<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>
<script>
export default {
data() {
return {
selectedOptions: [],
options: [
{ value: 'option1', label: '选项1' },
{ value: 'option2', label: '选项2' },
{ value: 'option3', label: '选项3' }
]
};
}
};
</script>multiple属性启用多选。v-model绑定选中的值（数组形式）。options定义下拉选项数据。
自定义实现多选下拉
如果需要完全自定义，可以通过组合 input、checkbox 和动态渲染实现。
<template>
<div class="custom-multiselect">
<div class="selected-display" @click="toggleDropdown">
{{ selectedLabels.join(', ') || '请选择' }}
</div>
<div class="dropdown" v-show="isOpen">
<div
v-for="option in options"
:key="option.value"
class="dropdown-item"
>
<input
type="checkbox"
:id="option.value"
v-model="selectedValues"
:value="option.value"
/>
<label :for="option.value">{{ option.label }}</label>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isOpen: false,
selectedValues: [],
options: [
{ value: '1', label: '选项1' },
{ value: '2', label: '选项2' },
{ value: '3', label: '选项3' }
]
};
},
computed: {
selectedLabels() {
return this.selectedValues.map(value => {
const option = this.options.find(opt => opt.value === value);
return option ? option.label : '';
});
}
},
methods: {
toggleDropdown() {
this.isOpen = !this.isOpen;
}
}
};
</script>
<style>
.custom-multiselect {
position: relative;
width: 200px;
}
.selected-display {
border: 1px solid #dcdfe6;
padding: 8px;
cursor: pointer;
}
.dropdown {
position: absolute;
width: 100%;
border: 1px solid #dcdfe6;
background: white;
z-index: 1000;
}
.dropdown-item {
padding: 8px;
}
</style>- 通过
v-show控制下拉框显示/隐藏。 selectedValues数组存储选中的值，通过v-model绑定到checkbox。- 计算属性
selectedLabels动态显示已选内容的标签。
注意事项
- 第三方组件库：优先使用成熟组件库（如 Element UI、Ant Design Vue），减少重复工作。
- 自定义样式：通过 CSS 控制下拉框的定位、动画和交互细节。
- 数据绑定：多选时
v-model需绑定数组，确保选项值唯一性。 - 性能优化：选项较多时考虑虚拟滚动（如
vue-virtual-scroller）。
