Vue多选框实现全选
Vue多选框全选实现方法
基础实现方式
通过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>
<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>使用Vuex的状态管理
当项目使用Vuex时，可以通过getters和mutations实现全选功能。
// store.js
const store = new Vuex.Store({
state: {
items: [...],
selectedItems: []
},
mutations: {
TOGGLE_ALL_ITEMS(state, payload) {
state.selectedItems = payload.checked
? state.items.map(item => item.id)
: []
}
},
getters: {
isAllSelected: state => {
return state.selectedItems.length === state.items.length
}
}
})组件中使用方法
<template>
<input
type="checkbox"
:checked="isAllSelected"
@change="toggleAll"
>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
export default {
computed: {
...mapGetters(['isAllSelected'])
},
methods: {
...mapMutations(['TOGGLE_ALL_ITEMS']),
toggleAll() {
this.TOGGLE_ALL_ITEMS({
checked: !this.isAllSelected
})
}
}
}
</script>性能优化建议
对于大型列表，使用对象存储选中状态比数组更高效。可以使用如下结构：
data() {
return {
selectedItems: {}, // {id: true}格式
allSelected: false
}
}注意事项
- 确保v-model绑定的值与选项value类型一致
- 处理异步加载数据时，需要重置全选状态
- 在表格中使用时，注意行数据的唯一标识问题
