vue表单全选实现
实现 Vue 表单全选功能
在 Vue 中实现表单全选功能通常涉及以下步骤：
数据绑定与全选逻辑
创建一个全选复选框和多个子复选框，通过 v-model 绑定数据。
<template>
<div>
<label>
<input type="checkbox" v-model="selectAll" @change="toggleAll"> 全选
</label>
<div v-for="item in items" :key="item.id">
<label>
<input type="checkbox" v-model="selectedItems" :value="item.id" @change="updateSelectAll"> {{ item.name }}
</label>
</div>
</div>
</template>计算属性与方法
使用计算属性和方法处理全选与子选之间的联动逻辑。
<script>
export default {
data() {
return {
items: [
{ id: 1, name: '选项1' },
{ id: 2, name: '选项2' },
{ id: 3, name: '选项3' }
],
selectedItems: []
};
},
computed: {
selectAll: {
get() {
return this.selectedItems.length === this.items.length;
},
set(value) {
this.selectedItems = value ? this.items.map(item => item.id) : [];
}
}
},
methods: {
toggleAll() {
this.selectAll = !this.selectAll;
},
updateSelectAll() {
this.selectAll = this.selectedItems.length === this.items.length;
}
}
};
</script>动态数据场景
如果数据是动态加载的，需要在数据更新后重置选中状态。
watch: {
items() {
this.selectedItems = [];
}
}样式优化
通过 CSS 美化复选框，提升用户体验。
<style>
label {
display: block;
margin: 5px 0;
cursor: pointer;
}
input[type="checkbox"] {
margin-right: 8px;
}
</style>注意事项
- 确保子复选框的
value唯一且与数据匹配。 - 使用
computed属性避免直接操作 DOM。 - 动态数据场景下，通过
watch监听数据变化并重置选中状态。
