用vue实现全选
实现全选功能的基本思路
在Vue中实现全选功能通常涉及以下关键点：绑定复选框的v-model、监听全选状态变化、同步子选项状态。以下是具体实现方法。
使用v-model绑定数据
创建一个数组存储选中项的标识（如ID），并用v-model绑定到复选框组。全选框的v-model绑定到一个布尔值，通过计算属性判断是否全部选中。
<template>
<div>
<input type="checkbox" v-model="selectAll" @change="toggleAll"> 全选
<div v-for="item in items" :key="item.id">
<input type="checkbox" v-model="selectedItems" :value="item.id">
{{ item.name }}
</div>
</div>
</template>计算属性和方法实现
通过计算属性selectAll判断是否所有子项被选中，toggleAll方法处理全选/取消逻辑。
<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;
}
}
};
</script>处理动态数据场景
若数据动态加载，需确保selectedItems与当前数据同步。可在watch中监听数据变化并重置选中状态。
watch: {
items: {
handler(newItems) {
this.selectedItems = this.selectedItems.filter(id =>
newItems.some(item => item.id === id)
);
},
deep: true
}
}使用第三方库优化
对于复杂场景（如表格全选），可借助Element UI或Vuetify等库的封装组件。例如，使用Element UI的el-checkbox：
<el-checkbox v-model="selectAll" @change="handleSelectAll">全选</el-checkbox>
<el-checkbox-group v-model="selectedItems">
<el-checkbox v-for="item in items" :label="item.id" :key="item.id">
{{ item.name }}
</el-checkbox>
</el-checkbox-group>性能优化建议
对于大量数据，避免直接操作DOM。可采用虚拟滚动（如vue-virtual-scroller）或分页加载，仅对当前可见项进行状态管理。
