vue实现多选
Vue实现多选功能
在Vue中实现多选功能可以通过多种方式完成，常见的有使用原生HTML的<input type="checkbox">、第三方UI库（如Element UI、Vuetify）的多选组件，或自定义实现逻辑。以下是几种常见方法：
使用原生HTML复选框
通过v-model绑定数组实现多选，选中的值会自动添加到数组中。
<template>
<div>
<label v-for="option in options" :key="option.value">
<input
type="checkbox"
v-model="selectedItems"
:value="option.value"
>
{{ option.label }}
</label>
<p>已选择: {{ selectedItems }}</p>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{ value: 'apple', label: '苹果' },
{ value: 'banana', label: '香蕉' },
{ value: 'orange', label: '橙子' }
],
selectedItems: []
};
}
};
</script>使用Element UI的多选组件
Element UI提供了el-checkbox-group和el-checkbox组件，适合快速实现多选功能。
<template>
<div>
<el-checkbox-group v-model="selectedItems">
<el-checkbox
v-for="option in options"
:key="option.value"
:label="option.value"
>
{{ option.label }}
</el-checkbox>
</el-checkbox-group>
<p>已选择: {{ selectedItems }}</p>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{ value: 'apple', label: '苹果' },
{ value: 'banana', label: '香蕉' },
{ value: 'orange', label: '橙子' }
],
selectedItems: []
};
}
};
</script>自定义多选逻辑
如果需要更灵活的控制，可以手动处理选中状态。
<template>
<div>
<div
v-for="option in options"
:key="option.value"
@click="toggleSelection(option.value)"
:class="{ 'selected': selectedItems.includes(option.value) }"
>
{{ option.label }}
</div>
<p>已选择: {{ selectedItems }}</p>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{ value: 'apple', label: '苹果' },
{ value: 'banana', label: '香蕉' },
{ value: 'orange', label: '橙子' }
],
selectedItems: []
};
},
methods: {
toggleSelection(value) {
const index = this.selectedItems.indexOf(value);
if (index === -1) {
this.selectedItems.push(value);
} else {
this.selectedItems.splice(index, 1);
}
}
}
};
</script>
<style>
.selected {
background-color: #f0f0f0;
}
</style>注意事项
- 确保
v-model绑定的是数组类型，否则多选功能无法正常工作。 - 如果使用第三方UI库，注意查阅文档以了解组件的具体用法和属性。
- 对于大量选项，考虑性能优化，如虚拟滚动（Virtual Scroll）。
