vue3 使用elementplus 的table 当表格切换页码或者搜索时候 选中的表格会清空

当你在 Vue3 中使用 Element Plus 的 Table 组件，并且在用户操作如切换分页或者进行搜索时，发现之前选中的行可能会丢失，这通常是由于 Element Plus 的表格组件默认的行为，它会在初始化、数据更新或者页面跳转时刷新表格状态，包括选中的行。

Element Plus 的 Table 组件默认不会保存用户的交互状态，比如选择的行，除非你自己通过编程的方式来存储并管理这种状态。解决这个问题的一种常见做法是在 `v-model` 或者对应的 API（如 `row-key` 和 `select-on-indeterminate`）上做文章，或者在每次操作后手动同步选择的状态。

例如，你可以尝试使用 `row-key` 来跟踪每个行的唯一标识，然后在分页或搜索后再次设置选中的行：

<template>
  <el-table :data="tableData" :row-key="getRowKey">
    <!-- ... -->
    <el-table-column type="selection" @change="handleSelectionChange"></el-table-column>
  </el-table>
</template>

<script>
export default {
  methods: {
    handleSelectionChange(row) {
      this.selectedRows = []; // 清空所有已选行
      if (row) { // 如果有新选中的行
        this.selectedRows.push(row);
      }
    },
    getRowKey(row) {
      return row.id; // 假设你的每行有一个 'id' 字段作为唯一键
    },
    onPageChange(newPage) {
      // 在分页改变时，确保保存当前选中的行
      this.selectedRows.forEach(row => {
        this.$set(this.tableData, newPage * pageSize + row.index, row);
      });
    },
    onSearch() {
      // 搜索时也处理选中行
      const filteredData = this.tableData.filter(...);
      this.selectedRows = this.selectedRows.map(row => filteredData.find(r => r.id === row.id));
    }
  },
  data() {
    return {
      tableData: [],
      selectedRows: [], // 用于存储选中的行
      pageSize: 10,
    };
  },
};
</script>

在这个例子中，你需要根据实际情况替换 `getRowKey` 方法中的 "id" 字段为你实际的数据结构中的唯一标识。