vue3+element-plus表格分页选中加默认回显选中

在Vue 3和Element Plus中，要实现表格分页时记住选择状态并默认回显，你可以使用ref来保持选择状态，并在数据更新时，如分页操作后，重新设置选择状态。

以下是一个简化的例子：

<template>
  <el-table
    :data="tableData"
    @selection-change="handleSelectionChange"
    :row-key="getRowKey"
    ref="multipleTable"
    @selection-change="handleSelectionChange"
    style="width: 100%">
    <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="[100, 200, 300, 400]"
    :page-size="100"
    layout="total, sizes, prev, pager, next, jumper"
    :total="400">
  </el-pagination>
</template>
 
<script setup>
import { ref, onMounted } from 'vue';
import { ElTable, ElTableColumn, ElPagination } from 'element-plus';
 
const tableData = ref([
  // 数据列表
]);
const multipleSelection = ref([]);
const currentPage = ref(1);
const pageSize = ref(100);
 
const getRowKey = (row) => {
  return row.id; // 假设每行数据都有唯一的 'id' 字段
};
 
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
};
 
const handleSizeChange = (val) => {
  pageSize.value = val;
};
 
const handleCurrentChange = (val) => {
  currentPage.value = val;
};
 
onMounted(() => {
  // 在组件挂载后，重新设置选中状态
  restoreSelection();
});
 
// 当分页数据更新后，重新选中行
const restoreSelection = () => {
  nextTick(() => {
    (multipleSelection.value || []).forEach(row => {
      table.value.toggleRowSelection(row, true);
    });
  });
};
</script>

在这个例子中，我们使用了ref来保存选中的行，并且定义了getRowKey来给表格行提供一个唯一的key。在分页大小或页码变化时，我们调用restoreSelection函数来重新选中之前保存的行。注意，table.value是ref="multipleTable"的引用，它指向<el-table>实例。