在开发后台管理系统时，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 并保存至响应式变量中。
跨页选择仅保留引用对象，不会影响原始数据源，因此需要自己维护全局选中状态。