vue实现列表全选
实现全选功能的基本思路
在Vue中实现列表全选功能，通常需要结合v-model和计算属性来管理选中状态。全选按钮的状态与列表中所有项的选中状态相互关联。
基础实现方法
准备一个数据列表和对应的选中状态数组：
data() {
return {
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' }
],
selectedItems: []
}
}创建全选的计算属性：
computed: {
allSelected: {
get() {
return this.selectedItems.length === this.items.length
},
set(value) {
this.selectedItems = value ? [...this.items] : []
}
}
}模板中使用v-model绑定：
<input type="checkbox" v-model="allSelected"> 全选
<div v-for="item in items" :key="item.id">
<input
type="checkbox"
:value="item"
v-model="selectedItems"
>
{{ item.name }}
</div>优化性能的实现
对于大型列表，可以使用ID数组代替对象数组来提高性能：
data() {
return {
items: [...], // 原始数据
selectedIds: [] // 只存储选中的ID
}
}修改计算属性：
computed: {
allSelected: {
get() {
return this.selectedIds.length === this.items.length
},
set(value) {
this.selectedIds = value ? this.items.map(item => item.id) : []
}
}
}使用Vuex的状态管理
在大型应用中，可以考虑使用Vuex管理选中状态：
// store.js
state: {
items: [...],
selectedItems: []
},
mutations: {
toggleAllSelection(state, selected) {
state.selectedItems = selected ? [...state.items] : []
}
}组件中使用mapState和mapMutations：
computed: {
...mapState(['items', 'selectedItems']),
allSelected: {
get() {
return this.selectedItems.length === this.items.length
},
set(value) {
this.toggleAllSelection(value)
}
}
}处理异步加载数据
当数据是异步加载时，需要等待数据加载完成后再初始化选中状态：
async created() {
await this.loadItems()
this.selectedItems = []
}样式和交互优化
可以添加中间状态（部分选中）的视觉效果：
computed: {
isIndeterminate() {
return this.selectedItems.length > 0 &&
this.selectedItems.length < this.items.length
}
}模板中应用：
<input
type="checkbox"
v-model="allSelected"
:indeterminate="isIndeterminate"
>
