vue2.0 实现全选
实现全选功能的方法
在Vue 2.0中实现全选功能通常涉及以下步骤，适用于列表、表格或多选框场景：
数据绑定与状态管理
创建响应式数据属性存储全选状态和子选项列表：
data() {
return {
isAllSelected: false,
items: [
{ id: 1, name: 'Item 1', selected: false },
{ id: 2, name: 'Item 2', selected: false }
]
}
}全选逻辑实现
通过计算属性或方法处理全选与子选项的联动：
methods: {
toggleAllSelection() {
this.isAllSelected = !this.isAllSelected
this.items.forEach(item => {
item.selected = this.isAllSelected
})
}
}子选项变化监听
使用侦听器或计算属性监测子选项变化，自动更新全选状态：
watch: {
items: {
handler(newVal) {
this.isAllSelected = newVal.every(item => item.selected)
},
deep: true
}
}模板绑定
在模板中实现双向绑定：
<template>
<div>
<input type="checkbox" v-model="isAllSelected" @change="toggleAllSelection">
<label>Select All</label>
<div v-for="item in items" :key="item.id">
<input type="checkbox" v-model="item.selected">
<label>{{ item.name }}</label>
</div>
</div>
</template>优化方案
对于大型数据集，可采用以下优化：
使用计算属性
避免深度监听带来的性能消耗：
computed: {
allSelected: {
get() {
return this.items.every(item => item.selected)
},
set(value) {
this.items.forEach(item => {
item.selected = value
})
}
}
}部分选中状态
实现中间状态（部分选中）的UI表现：
computed: {
indeterminate() {
return this.items.some(item => item.selected) && !this.allSelected
}
}模板更新
<input
type="checkbox"
v-model="allSelected"
:indeterminate="indeterminate"
>注意事项
- 确保v-model与checkbox正确绑定
- 深度监听可能影响性能，大数据量时建议使用计算属性
- 使用key属性保证列表渲染效率
- 复杂场景可考虑Vuex管理状态
以上方案可根据实际需求调整，适用于大多数需要全选功能的Vue 2.0项目场景。
