el-table翻页选中会显

### 解决方案

为了使 `el-table` 组件在分页切换后仍然能够保持选中的行，可以通过保存已选中的行数据并在页面变化时重新应用这些选择来实现这一功能[^1]。

具体来说，在组件内部维护一个数组用于存储当前被选中的行的数据。每当用户选择了某一行或取消选择某一行时，更新这个数组的内容。当分页发生变化时，遍历该数组并调用 `toggleRowSelection` 方法恢复之前的选择状态。

下面是一个简单的例子展示如何实现上述逻辑：

<template>
  <div>
    <el-table ref="multipleTable" :data="tableData.slice((currentPage-1)*pageSize, currentPage*pageSize)" @selection-change="handleSelectionChange">
      <!-- 表格列定义 -->
      <el-table-column type="selection"></el-table-column>
      ...
    </el-table>

    <el-pagination layout="prev, pager, next" :total="total" @current-change="handleCurrentChange"></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 所有数据列表
      multipleSelection: [], // 已选中的项
      pageSize: 10,
      currentPage: 1,
      total: 0
    };
  },
  
  methods: {
    handleSelectionChange(selection) {
      this.multipleSelection = selection;
    },

    handleCurrentChange(val) {
      this.currentPage = val;

      setTimeout(() => { // 使用setTimeout确保DOM已经完成渲染
        const selectedIds = new Set(this.multipleSelection.map(item => item.id));
        
        this.$refs['multipleTable'].bodyWrapper.querySelectorAll('tbody tr').forEach(row => {
          let id = row.getAttribute('data-row-key');
          
          if (selectedIds.has(id)) {
            this.$refs['multipleTable'].toggleRowSelection(this.tableData.find(d => d.id === parseInt(id)), true);
          }
        });
      }, 0);
    }
  }
};
</script>

在这个示例中，通过监听 `@selection-change` 和 `@current-change` 这两个事件分别处理多选框的变化以及分页器改变的情况。每次分页发生变动之后，利用 `this.$refs['multipleTable']` 获取到表格实例对象，并借助原生 DOM 操作找到对应的 `<tr>` 元素，最后根据其属性判断是否应该自动勾选该项。