elmentui 实现table表单翻页后回显已经勾选过的数据

要实现表单翻页后回显已经勾选过的数据，可以采用以下步骤：

1. 在每个表格行上添加一个复选框，用来记录用户的选择状态。

2. 在翻页时，记录当前页已经勾选的数据，可以使用数组或者对象来存储。

3. 在翻页后，根据记录的已勾选数据，重新勾选表格中的复选框。

4. 如果用户在翻页后修改了勾选状态，需要更新记录的已勾选数据。

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

<template>
  <div>
    <el-table
      :data="tableData"
      :row-key="row => row.id"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" />
      <el-table-column prop="name" label="Name" />
      <el-table-column prop="age" label="Age" />
    </el-table>
    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      @current-change="handlePageChange"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      selectedData: {} // 记录已勾选的数据
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      // 发送请求获取当前页的数据
      // ...
      // 假设数据格式如下
      const data = {
        list: [
          { id: 1, name: 'Alice', age: 18 },
          { id: 2, name: 'Bob', age: 20 },
          // ...
        ],
        total: 100
      }
      this.tableData = data.list
      this.total = data.total

      // 根据已勾选数据重新勾选复选框
      this.$nextTick(() => {
        for (const [key, value] of Object.entries(this.selectedData)) {
          if (value) {
            const row = this.tableData.find(item => item.id === parseInt(key))
            if (row) {
              this.$refs.table.toggleRowSelection(row, true)
            }
          }
        }
      })
    },
    handleSelectionChange(selection) {
      // 更新已勾选数据
      for (const row of selection) {
        this.$set(this.selectedData, row.id, true)
      }
      for (const [key, value] of Object.entries(this.selectedData)) {
        if (!selection.find(row => row.id === parseInt(key))) {
          this.$set(this.selectedData, key, false)
        }
      }
    },
    handlePageChange(page) {
      // 更新当前页码并重新获取数据
      this.currentPage = page
      this.fetchData()
    }
  }
}
</script>

在这个示例中，我们使用了 Element UI 的表格组件和分页组件。在表格上添加了一个复选框列，并监听了 `selection-change` 事件，在事件回调中更新了已勾选数据。

在分页组件上监听了 `current-change` 事件，在事件回调中更新了当前页码并重新获取数据。在获取数据后，通过 `$refs.table.toggleRowSelection` 方法重新勾选了表格中的复选框。

这个示例中的 `selectedData` 对象用来记录已经勾选的数据，它的 key 是数据的 id，value 是一个布尔值，表示该数据是否已经勾选。在勾选或取消勾选时，我们使用了 `$set` 方法来更新这个对象，这样才能触发 Vue 的响应式更新。