vue怎么实现全选
实现全选功能的方法
在Vue中实现全选功能通常涉及以下步骤：
数据绑定与状态管理 创建一个数组存储所有选项的数据，并定义一个布尔值控制全选状态。例如：
data() {
return {
items: [
{ id: 1, name: '选项1', checked: false },
{ id: 2, name: '选项2', checked: false }
],
selectAll: false
}
}全选逻辑实现 通过计算属性或方法处理全选与反选逻辑。当勾选全选复选框时，遍历所有选项并更新其选中状态：
methods: {
toggleSelectAll() {
this.items.forEach(item => {
item.checked = this.selectAll
})
}
}监听选项变化 使用侦听器或计算属性监控单个选项的变化，自动更新全选状态。当所有选项被选中时，全选复选框应自动勾选：
watch: {
items: {
deep: true,
handler(newItems) {
this.selectAll = newItems.every(item => item.checked)
}
}
}模板部分
在模板中绑定全选复选框和单个选项的v-model：
<input type="checkbox" v-model="selectAll" @change="toggleSelectAll"> 全选
<div v-for="item in items" :key="item.id">
<input type="checkbox" v-model="item.checked"> {{ item.name }}
</div>使用Vuex管理状态（可选）
对于大型应用，可通过Vuex集中管理选中状态：
// store.js
state: {
items: [...],
selectAll: false
},
mutations: {
TOGGLE_ALL(state, value) {
state.selectAll = value
state.items.forEach(item => item.checked = value)
}
}性能优化建议
对于大量数据场景，可采用虚拟滚动或分页加载避免全选时的性能问题。使用lodash的chunk方法分批处理数据：
_.chunk(this.items, 50).forEach(batch => {
batch.forEach(item => item.checked = this.selectAll)
})注意事项
- 深层监听
items时需设置deep: true - 服务端渲染(SSR)场景需确保状态同步
- 移动端适配可替换
checkbox为自定义样式组件
