vue 全选框实现
Vue 全选框实现方法
在 Vue 中实现全选框功能通常涉及以下几个关键步骤：
数据绑定与计算属性
使用 v-model 绑定全选框的状态，并通过计算属性动态判断是否全选：
<template>
<input type="checkbox" v-model="selectAll" @change="toggleAll">
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'Item 1', selected: false },
{ id: 2, name: 'Item 2', selected: false }
]
}
},
computed: {
selectAll: {
get() {
return this.items.every(item => item.selected)
},
set(value) {
this.items.forEach(item => (item.selected = value))
}
}
},
methods: {
toggleAll() {
this.selectAll = !this.selectAll
}
}
}
</script>列表项绑定
为每个列表项添加复选框，并与数据绑定：
<div v-for="item in items" :key="item.id">
<input
type="checkbox"
v-model="item.selected"
@change="updateSelectAll"
>
{{ item.name }}
</div>状态同步方法
添加方法确保部分选中时全选框显示不确定状态：
methods: {
updateSelectAll() {
const allSelected = this.items.every(item => item.selected)
const someSelected = this.items.some(item => item.selected)
this.selectAll = allSelected ? true : someSelected ? null : false
}
}不确定状态样式
通过 :indeterminate 属性处理部分选中状态：
<input
type="checkbox"
v-model="selectAll"
:indeterminate="isIndeterminate"
>computed: {
isIndeterminate() {
return (
this.items.some(item => item.selected) &&
!this.items.every(item => item.selected)
)
}
}使用 Vuex 管理状态（可选）
对于大型应用，建议使用 Vuex 集中管理选择状态：
// store.js
export default new Vuex.Store({
state: {
items: [...],
selectedIds: []
},
getters: {
isAllSelected: state => {
return state.items.length > 0 &&
state.items.every(item => state.selectedIds.includes(item.id))
}
}
})性能优化
对于大数据列表，采用虚拟滚动或分页加载：
<virtual-list :size="50" :remain="10">
<div v-for="item in items" :key="item.id">
<!-- 复选框项 -->
</div>
</virtual-list>以上实现可根据具体需求组合使用，核心在于保持数据状态与视图的同步，并通过计算属性高效处理选中逻辑。
