Element-Ui实现分页table缓存勾中数据

1、在el-table上设置 row-key 属性

<el-table
      ref="tableRef"
      v-loading="loading"
      :data="tableData"
      height="calc(100vh - 152px)"
      row-key="id"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
    .....
</el-table>

2、对 type=selection 的列，设置reserve-selection属性（该属性默认为false）

...
<el-table
      ref="tableRef"
      v-loading="loading"
      :data="tableData"
      height="calc(100vh - 152px)"
      row-key="id"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        fixed
        :reserve-selection="true"
        align="center"
        type="selection"
        width="55"
      />
      <el-table-column
        fixed
        align="center"
        type="index"
        label="序号"
        width="55"
      />
    .....
</el-table>
...

4、至此分页的table切换pageNum时，可以实现缓存选中状态的数据。

5、存在一个特殊情况需要处理：如果用户输入了过滤条件进行检索，但是之前选中的数据被过滤掉了，此时对于用户来说是不知道系统将上次选中的数据也包含到这次勾选的数据中。

第一次勾选的数据

解决方案：

在用户重新查询的方法中，清空之前选中的数据。

...
searchBtn() {
	this.loading = true
	...
	// 查询后清除先前选中的数据，防止之前选中的数据被过滤掉，但是还存储this.$refs.tableRef.selection这个选中列表中。
	this.$refs.tableRef && this.$refs.tableRef.clearSelection() 
    this.loading = false
}
...

Element-Ui实现分页table缓存勾中数据

原文：https://www.cnblogs.com/520future/p/15128146.html