vue实现全选
Vue实现全选功能
全选功能在表格、列表等场景中非常常见。以下是几种实现方式：
基础实现方式
使用v-model绑定全选状态，通过计算属性或方法控制子项选中状态：
<template>
<div>
<input type="checkbox" v-model="selectAll" @change="toggleSelectAll">
<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: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' }
],
selectedItems: []
}
},
computed: {
selectAll: {
get() {
return this.selectedItems.length === this.items.length
},
set(value) {
this.selectedItems = value ? this.items.map(item => item.id) : []
}
}
},
methods: {
toggleSelectAll() {
this.selectAll = !this.selectAll
}
}
}
</script>表格全选实现
对于表格场景，可以结合el-table（Element UI）实现：
<template>
<el-table
:data="tableData"
@selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
width="55"
:selectable="checkSelectable"
>
</el-table-column>
<el-table-column prop="name" label="Name"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: 'Item 1', id: 1 },
{ name: 'Item 2', id: 2 }
],
selectedRows: []
}
},
methods: {
handleSelectionChange(val) {
this.selectedRows = val
},
checkSelectable(row, index) {
return row.id !== 3 // 可以添加条件控制哪些行可选
}
}
}
</script>使用Vuex管理状态
对于大型应用，可以使用Vuex集中管理选中状态：
// store.js
const store = new Vuex.Store({
state: {
items: [...],
selectedItems: []
},
mutations: {
TOGGLE_ALL_ITEMS(state, payload) {
state.selectedItems = payload.selectAll
? [...state.items]
: []
}
}
})性能优化建议
对于大数据量场景，考虑以下优化措施：
- 使用虚拟滚动技术
- 分页加载数据
- 避免深度监听大数组
- 使用
Object.freeze()冻结不需要响应式的数据
注意事项
- 全选功能应考虑部分选中状态（indeterminate）
- 需要处理异步加载数据的情况
- 某些UI框架可能有内置的全选功能，优先使用框架提供的方法
- 移动端需要考虑触摸交互体验
