应将选中状态直接挂载在商品数据内部的checked字段并用reactive包裹整个列表，配合el-table的reserve-selection和row-key实现跨页/搜索持久化，批量操作时过滤checked为true的项，重置时遍历设false而非替换数组。
在商品对比表格中用 reactive 维护选中项，关键不是“存下哪些行被点过”，而是让选中状态与数据本身强绑定、可持久、可跨操作（如分页、搜索、刷新）保持一致。下面从结构设计到实际维护讲清楚。
选中状态必须挂载在商品数据内部
不要单独用一个 selections: [] 数组去收集选中行对象——它容易和原始数据脱节，尤其在分页切换或接口重拉后失效。正确做法是：直接在每条商品数据上加一个 checked 字段，并确保该字段是响应式的。
- 初始化时，遍历原始数据，给每项添加
checked: false - 用
reactive包裹整个商品列表（含checked字段），这样修改某一项的checked才能触发视图更新 - 示例：
const productList = reactive([
{ id: 'p1', name: '手机A', price: 2999, checked: false },
{ id: 'p2', name: '手机B', price: 3499, checked: false }
]);
利用 reserve-selection 保活跨页/搜索选中态
Element Plus 的 <el-table></el-table> 提供 reserve-selection 属性，专门解决“翻页后勾选不丢失”的问题。它依赖两个前提：
- 表格必须设置
:row-key="rowKey"（推荐用唯一 ID，如rowKey="id"） - 每行数据对象必须有稳定的、不可变的标识字段（如
id），且该字段在多次请求中保持一致 - 只要满足以上两点，即使你清空并重新赋值
data，之前勾选过的行仍会自动恢复勾选状态
批量操作前，动态提取当前有效选中项
用户点击“加入对比”或“删除”时，不直接读 selections，而是过滤出当前列表中 checked: true 的商品：
- const selectedItems = productList.filter(item => item.checked);
- 如果需要排除某些状态（比如只允许对比“有库存”的商品），就在此处加条件：
.filter(item => item.checked && item.stock > 0) - 这个过程是纯计算，不修改原始数据结构，也无需手动同步数组
重置或清空选中状态要“覆盖属性”，而非替换数组
点击“取消全选”时，别写 productList = [] 或 productList = newData——这会切断响应式连接。应遍历并重置字段：
- productList.forEach(item => item.checked = false);
- 若需深层重置（比如还带子项勾选），可用
Object.assign(item, { ...initialItem })恢复初始状态 - 避免直接赋新数组，否则 Vue 无法追踪变化，UI 不更新
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
