一、问题解决

Table表格的多选框选取行数据
存在分页时也能保留多页选中的数据

table批量选取.png

二、应用场景

在开发过程中，需要实现这样一个需求：需要选取表格中的一部分数据进行批量操作，这个时候Table组件提供的Checkbox属性就派上用场了，实现方法也非常简单，手动添加一个el-table-column，设type属性为selection即可。Table组件提供的@selection-change事件就可以记录批量操作的数据是哪几条，但表格往往会遇到分页，当我们想在第一页选取完数据后，进行翻页选取第二页数据时，发现第一页的选取的数据是无法保存的，此时，Table组件的Table-column Attributes属性reserve-selection就起到了重要作用。

三、具体实现

第一步：为表格添加一列多选框，并设置reserve-selection="true"(仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）)

<el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>

第二步：为Table添加:row-key,并在method中添加生成row-key的方法

<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
      @selection-change="handleSelectionChange" :row-key="getRowKeys">

methods: {
   getRowKeys(row) {
      return row.id
   },

第三步：完成批量操作后，记得清空表格选中的数据，避免影响下一次批量选取操作

this.$refs.multipleTable.clearSelection()

四、总结

Table组件保留分页选取的数据

1、列el-table-column添加 :reserve-selection="true"

2、表格el-table添加:row-key="getRowKeys"

3、方法methods添加getRowKeys(row) { return row.id }

4、批量操作结束清空选中数据,this.$refs.multipleTable.clearSelection()

element官方文档：element.eleme.cn/#/zh-CN/com…

Element中的Table组件，分页时如何还能保留多选框选中的数据

一、问题解决

二、应用场景

三、具体实现

四、总结