vue.js 实现全选
Vue.js 实现全选功能
在 Vue.js 中实现全选功能通常涉及以下几个关键步骤：
数据绑定与状态管理
使用 v-model 绑定复选框的状态，并通过数组或对象管理选中项。例如，定义一个 items 数组和 selectedItems 数组：
data() {
return {
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' }
],
selectedItems: [],
selectAll: false
}
}全选复选框逻辑
添加一个全选复选框，通过计算属性或方法动态更新选中状态。使用 v-model 绑定 selectAll，并通过 watch 或方法监听其变化：
methods: {
toggleSelectAll() {
if (this.selectAll) {
this.selectedItems = this.items.map(item => item.id);
} else {
this.selectedItems = [];
}
}
}单个复选框逻辑
为每个子项复选框绑定 v-model，监听 selectedItems 的变化。当所有子项被选中时，自动更新全选状态：
watch: {
selectedItems(newVal) {
this.selectAll = newVal.length === this.items.length;
}
}模板实现
在模板中绑定全选复选框和子项复选框：
<input type="checkbox" v-model="selectAll" @change="toggleSelectAll"> 全选
<div v-for="item in items" :key="item.id">
<input
type="checkbox"
v-model="selectedItems"
:value="item.id"
> {{ item.name }}
</div>优化与扩展
- 性能优化：对于大量数据，建议使用
Object或Set存储选中状态以减少数组操作开销。 - 自定义组件：封装为可复用的组件，通过
props传递数据和方法。 - 异步数据：在数据加载完成后初始化选中状态。
通过以上步骤，可以实现一个响应式的全选功能，适用于列表、表格等场景。
