Element 之 Table 多选翻页以及清空选择

发表于 更新于 阅读次数： 本文字数： 130 阅读时长 ≈ 1 分钟

需求

在 Vue 中需要对 Table 数据进行多选，且翻页时需要对前一页选中进行保留

代码

HTML

1
2
3
4
5
6
7
8
9
<el-table
:data="data" border highlight-current-row 
@selection-change="handleSelectionChange"
:row-key="getRowKeys" 
ref="selectionTable">
  <el-table-column type="selection" :reserve-selection="true">
  </el-table-column>
  ...
</el-table>

JS

1
2
3
4
5
6
7
8
9
// 当选择时调用
handleSelectionChange(val) {
    // 业务处理
},
getRowKeys(row) {
    return row.id; // 重点是id不能重复
},
// 清除所选，视情况在所需要的地方调用即可
this.$refs.selectionTable.clearSelection();

重点是:row-key 不能重复，也就是 getRowKeys 中的 ID 不能重复