使用element-ui中的table时，多选加分页功能时，点击分页后之前选中的数据丢失

这个问题通常是因为在切换分页时，前端没有正确处理已选择的数据（multi-selection）状态。在Element UI的Table组件中使用分页时，你需要在切换分页时保持已选择的行。

解决方法：

1. 使用table的row-key属性来为每行数据提供一个唯一键值。
2. 使用Table组件的selection属性来获取当前已选择的行数据。
3. 在分页改变时（例如监听current-change事件），保存当前已选择的行数据。
4. 在分页数据加载完成后，还原之前保存的已选择行数据。

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

<template>
  <el-table
    :data="tableData"
    @selection-change="handleSelectionChange"
    row-key="id"
    ref="multipleTable"
    @current-change="handleCurrentChange"
  >
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[10, 20, 30, 40]"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total">
  </el-pagination>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleCurrentChange(currentRow, oldCurrentRow) {
      if (currentRow) {
        this.multipleSelection.push(currentRow);
      } else if (oldCurrentRow) {
        this.multipleSelection = this.multipleSelection.filter(item => item.id !== oldCurrentRow.id);
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.loadData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.loadData();
    },
    loadData() {
      // 模拟请求数据
      const data = []; // 假设获取到的数据
      this.tableData = data;
      this.total = data.length; // 假设总数据长度
      // 还原已选择的行
      this.multipleSelection = this.multipleSelection.filter(item => {
        return data.some(row => row.id === item.id);
      });
      this.$refs.multipleTable.toggleRowSelection(this.multipleSelection, true);
    }
  },
  mounted() {
    this.loadData();
  }
};
</script>

在这个示例中，handleSelectionChange 方法用于在选择行变化时保存已选择的行，handleCurrentChange 用于处理当前行的变化，以确保已选择的行数据正确。loadData 方法模拟了从服务器加载数据，并在数据加载完成后，通过$refs.multipleTable.toggleRowSelection方法来还原已选择的行。