Vue3 + Element Plus 实现跨页选择的 el-table 表格功能

在开发后台管理系统时，el-table 是我们最常用的组件之一。然而，在使用 el-table 的多选功能时，一个常见的需求是跨页选择：即当用户切换分页时，之前选择的数据仍然保留。

默认情况下，el-table 的多选只作用于当前页数据，当我们翻页后，之前的选择会被清空。本文将通过两个关键属性（row-key 和 reserve-selection）来实现 Vue3 + Element Plus 中 el-table 的跨页选择功能。

一、准备工作

确保你已经创建了一个基于 Vue3 + Element Plus 的项目。如果没有，可以通过以下命令快速搭建：

二、核心思路与原理

要实现跨页选择，需要理解两个关键属性：

row-key：

指定每行数据的唯一标识字段名（如 id）。

这是表格内部识别不同行数据的基础，尤其在使用树形结构或跨页选择时必须设置。

reserve-selection：

用于开启“保留已选项”功能。

在 <el-table-column type="selection" /> 上设置该属性，即可保留不在当前页的选中状态。

三、完整代码示例

1. 数据准备

假设我们有如下模拟数据结构：

2. 页面组件实现

四、效果说明

当你在第一页勾选若干条记录，切换到第二页时，这些记录依然保留在 selectedRows 中。

如果你想查看所有选中的数据，可以在页面上添加一个按钮来展示：

五、注意事项

务必设置 row-key，否则无法正确识别每一行。

reserve-selection 只适用于 <el-table-column type="selection" />。

如果你需要对选中数据进行持久化处理（如提交服务器），可以监听 selection-change 并保存至响应式变量中。

跨页选择仅保留引用对象，不会影响原始数据源，因此需要自己维护全局选中状态。