vue 实现多选功能
Vue 实现多选功能的方法
方法一：使用 v-model 绑定数组
在 Vue 中，可以通过 v-model 绑定一个数组来实现多选功能。适用于复选框组（checkbox group）。
<template>
<div>
<label v-for="option in options" :key="option.value">
<input
type="checkbox"
:value="option.value"
v-model="selectedOptions"
/>
{{ option.label }}
</label>
<p>Selected: {{ selectedOptions }}</p>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{ value: 'apple', label: 'Apple' },
{ value: 'banana', label: 'Banana' },
{ value: 'orange', label: 'Orange' },
],
selectedOptions: []
};
}
};
</script>方法二：自定义多选组件
如果需要更复杂的多选逻辑（如全选、反选），可以封装一个自定义多选组件。
<template>
<div>
<button @click="toggleAll">Toggle All</button>
<div v-for="item in items" :key="item.id">
<input
type="checkbox"
:checked="selectedItems.includes(item.id)"
@change="toggleItem(item.id)"
/>
{{ item.name }}
</div>
</div>
</template>
<script>
export default {
props: {
items: Array,
},
data() {
return {
selectedItems: [],
};
},
methods: {
toggleItem(id) {
const index = this.selectedItems.indexOf(id);
if (index === -1) {
this.selectedItems.push(id);
} else {
this.selectedItems.splice(index, 1);
}
},
toggleAll() {
if (this.selectedItems.length === this.items.length) {
this.selectedItems = [];
} else {
this.selectedItems = this.items.map(item => item.id);
}
},
},
};
</script>方法三：使用第三方库
对于更高级的多选需求（如搜索、分组），可以使用第三方库如 vue-multiselect。
安装：
npm install vue-multiselect示例：
<template>
<div>
<multiselect
v-model="selected"
:options="options"
:multiple="true"
:close-on-select="false"
placeholder="Select items"
/>
</div>
</template>
<script>
import Multiselect from 'vue-multiselect';
export default {
components: { Multiselect },
data() {
return {
selected: [],
options: ['Option 1', 'Option 2', 'Option 3'],
};
},
};
</script>注意事项
- 性能优化：如果选项数量很大（如超过 1000 条），建议使用虚拟滚动（如
vue-virtual-scroller）。 - 表单提交：多选数据通常需要转换为逗号分隔字符串或数组格式提交。
- 样式定制：复选框的默认样式可能不符合需求，可以通过 CSS 或 UI 库（如 Element UI、Vuetify）美化。
以上方法覆盖了从基础到进阶的多选实现场景，可根据具体需求选择。
