elementUI table 分页多选，翻页回显选中

在使用Element UI的Table组件进行分页时，如果需要在翻页后保持多选项的回显状态，你可以在翻页时保存已选择的行信息，并在每次翻页后将这些行的多选框重新选中。

以下是一个简单的示例代码：

<template>
  <el-table
    :data="tableData"
    @selection-change="handleSelectionChange"
    ref="multipleTable"
    @current-change="handleCurrentChange"
    :row-key="getRowKey"
  >
    <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [], // 表格数据
      multipleSelection: [], // 已选择的行
      currentRow: null, // 当前行
    };
  },
  methods: {
    // 获取行的唯一键，用于row-key属性
    getRowKey(row) {
      return row.id; // 假设每行数据都有一个唯一的id字段
    },
    // 多选改变时
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 当前行改变时
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    // 初始化已选择的行
    restoreSelection() {
      if (this.multipleSelection.length > 0 && this.currentRow) {
        this.$nextTick(() => {
          this.multipleSelection.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row, true);
          });
          this.$refs.multipleTable.setCurrentRow(this.currentRow);
        });
      }
    }
  },
  // 在数据更新后恢复多选状态
  updated() {
    this.restoreSelection();
  }
};
</script>

在这个示例中，我们定义了multipleSelection数组来保存已选择的行，并定义了currentRow来保存当前行。getRowKey方法用于提供唯一的行标识，以便Element UI能够追踪行的选择状态。

在handleSelectionChange和handleCurrentChange方法中，我们更新对应的数据。而restoreSelection方法则在每次数据更新后重新选中之前保存的行。

注意，updated钩子函数在组件的VNode更新后被调用，因此我们在这里调用restoreSelection确保每次数据变化后都能正确地恢复多选状态。