elementui el-table表格实现跨页(翻页)保存勾选状态(后端分页)_el-table翻页保留勾选

在使用Element UI的el-table组件进行数据展示时，如果你需要实现翻页时保持勾选状态的功能，你可以通过以下步骤来实现：

1. 在数据获取时保存当前页的勾选状态。
2. 在翻页时，将勾选状态传递到后端。
3. 翻页时，将后端返回的勾选状态应用到el-table。

以下是实现这一功能的示例代码：

<template>
  <el-table
    :data="tableData"
    @selection-change="handleSelectionChange"
    :row-key="getRowKey"
    ref="multipleTable"
    @current-change="handleCurrentChange"
  >
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [],
      multipleSelection: [], // 当前页勾选的行
      currentRow: null, // 当前行
      // 其他数据
    };
  },
  methods: {
    // 获取行的key，保证每行唯一
    getRowKey(row) {
      return row.id; // 假设每行有一个唯一的id字段
    },
    // 当选择改变时触发
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 当当前行改变时触发
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    // 翻页时保存和恢复勾选状态的逻辑
    savePageSelection() {
      // 将当前页的勾选状态保存至后端
      const selectedIds = this.multipleSelection.map(item => item.id);
      // 发送请求到后端，保存selectedIds
    },
    restorePageSelection() {
      // 假设从后端获取的勾选状态数据为selectedIds
      const selectedIds = [/* 从后端获取的数据 */];
      // 将勾选状态应用到当前页的tableData中
      this.multipleSelection = this.tableData.filter(row => selectedIds.includes(row.id));
      // 如果当前页的rowKey在selectedIds中，则会自动勾选
    }
  },
  // 假设你在这里从后端获取数据并调用savePageSelection
  // 假设你在这里从后端获取数据并调用restorePageSelection
};
</script>

在这个示例中，getRowKey方法用于指定每行的唯一键值，确保el-table能够正确识别每一行的选中状态。handleSelectionChange方法用于监听勾选事件，并更新当前页的勾选状态。handleCurrentChange方法用于监听当前行的变化。savePageSelection和restorePageSelection方法分别用于保存和恢复勾选状态。

请注意，示例中的savePageSelection和restorePageSelection方法需要根据你的后端API进行相应的调整。这两个方法应该在你获取或更新数据时被调用，例如在分页组件的current-change事件中或者其他适当的时机。

这个示例假设每行数据都有一个唯一的id字段，并且你已经从后端获取了勾选状态数据。在实际应用中，你需要根据你的数据结构调整getRowKey、savePageSelection和restorePageSelection中的逻辑。