vue实现table表格全选
Vue 实现表格全选功能
在 Vue 中实现表格全选功能，可以通过以下方法完成：
数据绑定与状态管理
在 Vue 的 data 中定义表格数据和全选状态：
data() {
return {
tableData: [
{ id: 1, name: 'Item 1', selected: false },
{ id: 2, name: 'Item 2', selected: false },
{ id: 3, name: 'Item 3', selected: false }
],
selectAll: false
}
}全选复选框逻辑
在模板中添加全选复选框，并绑定 v-model 和 @change 事件：
<input type="checkbox" v-model="selectAll" @change="handleSelectAll">在 methods 中实现全选逻辑：
methods: {
handleSelectAll() {
this.tableData.forEach(item => {
item.selected = this.selectAll
})
}
}单个复选框逻辑
为表格中的每一行添加复选框，并绑定到对应数据：
<tr v-for="item in tableData" :key="item.id">
<td><input type="checkbox" v-model="item.selected"></td>
<td>{{ item.name }}</td>
</tr>反向控制全选状态
添加 watcher 监听表格数据变化，自动更新全选状态：
watch: {
tableData: {
handler(newVal) {
this.selectAll = newVal.every(item => item.selected)
},
deep: true
}
}完整示例代码
<template>
<div>
<table>
<thead>
<tr>
<th><input type="checkbox" v-model="selectAll" @change="handleSelectAll"></th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr v-for="item in tableData" :key="item.id">
<td><input type="checkbox" v-model="item.selected"></td>
<td>{{ item.name }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: 'Item 1', selected: false },
{ id: 2, name: 'Item 2', selected: false },
{ id: 3, name: 'Item 3', selected: false }
],
selectAll: false
}
},
methods: {
handleSelectAll() {
this.tableData.forEach(item => {
item.selected = this.selectAll
})
}
},
watch: {
tableData: {
handler(newVal) {
this.selectAll = newVal.every(item => item.selected)
},
deep: true
}
}
}
</script>使用计算属性优化
可以使用计算属性替代 watcher，提高性能：
computed: {
selectAll: {
get() {
return this.tableData.every(item => item.selected)
},
set(value) {
this.tableData.forEach(item => {
item.selected = value
})
}
}
}注意事项
- 确保为表格数据添加唯一
key属性 - 使用
deep: true监听数组对象内部变化 - 计算属性方式性能优于 watcher
- 可根据实际需求添加部分选中状态（indeterminate）
这种方法适用于大多数 Vue 表格全选场景，可根据具体项目需求进行调整。
