Vue + Element UI 表格分页记忆选中：巧用 Row Key 优化渲染

2023-10-23 23:48:48

Element UI 表格组件提供了丰富的功能，其中分页功能可以帮助我们管理大数据集，将数据分批显示，提升页面性能。然而，当我们使用分页功能时，可能会遇到一个问题：分页后，选中的行信息会丢失。为了解决这个问题，Element UI 官方给出了一个解决方案：使用 Row Key 属性。

什么是 Row Key？

Row Key 是一个唯一标识表格中每一行的属性。在 Element UI 表格组件中，我们可以通过 :row-key 属性指定 Row Key。当我们使用 Row Key 时，表格会根据这个属性来优化渲染，提高性能。此外，在使用 reserve-selection 功能和显示树形数据时，Row Key 属性是必填的。

如何使用 Row Key 实现分页记忆选中？

在 Vue + Element UI 中，我们可以通过以下步骤实现分页记忆选中：

给表格每一行设置唯一的 Row Key。
在分页组件中，监听 current-change 事件。
在 current-change 事件中，使用 Row Key 恢复选中状态。

具体代码示例如下：

<el-table :data="tableData" @row-key="row => row.id">
  <el-table-column type="selection"></el-table-column>
</el-table>

<el-pagination
  :current-page="currentPage"
  :page-sizes="[10, 20, 50]"
  :page-count="pageCount"
  @current-change="handleCurrentChange"
></el-pagination>

methods: {
  handleCurrentChange(val) {
    this.currentPage = val;
    // 根据 Row Key 恢复选中状态
    this.selectedRows.forEach(row => {
      const index = this.tableData.findIndex(item => item.id === row.id);
      if (index !== -1) {
        this.$refs.table.toggleRowSelection(this.tableData[index]);
      }
    });
  }
}