vue表格实现多选
实现多选表格的基础方法
在Vue中实现表格多选功能，通常需要结合el-table组件（Element UI）或v-data-table组件（Vuetify）。以下是基于Element UI的实现示例：
安装Element UI依赖（若未安装）：
npm install element-ui基础模板结构：
<template>
<el-table
ref="multipleTable"
:data="tableData"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 20 },
{ name: '李四', age: 25 }
],
multipleSelection: []
}
},
methods: {
handleSelectionChange(val) {
this.multipleSelection = val;
}
}
}
</script>控制默认选中项
通过toggleRowSelection方法可以设置默认选中的行：
mounted() {
this.$nextTick(() => {
this.tableData.forEach((row, index) => {
if (row.age > 20) { // 示例条件
this.$refs.multipleTable.toggleRowSelection(row, true);
}
});
});
}实现跨页多选
当表格存在分页时，需维护一个全量选中数组：
data() {
return {
allSelection: [] // 存储所有页面的选中项
}
},
methods: {
handleSelectionChange(val) {
// 合并当前页选中项
this.allSelection = [
...this.allSelection.filter(item =>
!this.tableData.some(row => row.id === item.id)
),
...val
];
}
}自定义选择逻辑
通过selectable属性控制哪些行可选：
<el-table-column type="selection" :selectable="checkSelectable"></el-table-column>
<script>
methods: {
checkSelectable(row, index) {
return row.age >= 18; // 仅允许选择年龄≥18的行
}
}
</script>使用Vuetify的实现方式
若使用Vuetify，多选表格的实现略有不同：
<template>
<v-data-table
v-model="selected"
:items="tableData"
show-select
item-key="id">
<template v-slot:item.name="{ item }">
{{ item.name }}
</template>
</v-data-table>
</template>性能优化建议
对于大数据量表格，建议启用虚拟滚动：
<el-table
:data="tableData"
height="500"
v-loading="loading"
:row-key="row => row.id">
<!-- 列定义 -->
</el-table>通过以上方法可以灵活实现不同场景下的表格多选需求，关键点在于正确维护选中状态数组和处理分页时的数据一致性。
