vue实现循环多选
实现循环多选的方法
使用v-for渲染选项
通过v-for循环渲染复选框或列表项，绑定v-model到数组实现多选。例如：
<template>
<div v-for="item in items" :key="item.id">
<input type="checkbox" :id="item.id" v-model="selectedItems" :value="item.id">
<label :for="item.id">{{ item.name }}</label>
</div>
</template>数据绑定与响应式更新
在data或setup中定义响应式数组selectedItems，用于存储选中项的value值：
data() {
return {
items: [
{ id: 1, name: '选项1' },
{ id: 2, name: '选项2' }
],
selectedItems: [] // 存储选中项的id
}
}处理多选逻辑
通过计算属性或方法实现全选/反选逻辑。例如全选功能：
computed: {
allSelected: {
get() {
return this.selectedItems.length === this.items.length;
},
set(value) {
this.selectedItems = value ? this.items.map(item => item.id) : [];
}
}
}表单提交与验证
提交时检查selectedItems是否为空，并处理选中项数据：
methods: {
submit() {
if (this.selectedItems.length === 0) {
alert('请至少选择一项');
return;
}
console.log('已选项目:', this.selectedItems);
}
}使用第三方组件库优化
Element UI 的多选表格
若使用Element UI，可通过el-table结合type="selection"实现：
<el-table :data="items" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="name" label="名称"></el-table-column>
</el-table>Vuetify 的复选框组
Vuetify提供v-checkbox与v-model结合的多选方案：
<v-checkbox
v-for="item in items"
v-model="selectedItems"
:label="item.name"
:value="item.id"
></v-checkbox>注意事项
- 唯一键值：确保
v-for中的:key使用唯一标识（如id）。 - 性能优化：大量数据时考虑虚拟滚动（如
vue-virtual-scroller）。 - 移动端适配：触摸交互可使用
@click和@touch事件增强体验。
