推荐用 Set 管理选中行 ID(如 selectedIds: new Set()),配合 getter 按需查原始数据,兼顾响应式、去重、跨页记忆与持久化;避免直接存整行对象导致状态漂移。

直接用 state 存一个数组即可,推荐用 Set 或 Map 结构提升去重和查询效率,避免重复选中、误删或状态漂移。
用 reactive 数组管理(适合简单场景)
在 Store 的 state 中定义一个响应式数组,如:
-
selectedRows: []—— 存储选中行的完整对象(注意:需确保每行有唯一标识,如id) - 配合
vxe-table的@checkbox-change和@checkbox-all事件同步更新 - 删除/刷新后需手动清空该数组,否则残留旧数据
用 Set 管理 ID 集合(推荐,更健壮)
只存选中行的主键(如 id),不存整行数据,解耦数据源与选中状态:
-
selectedIds: new Set()—— 在 state 中初始化为Set实例(Pinia 支持原生 Set 响应式) - 勾选时:
this.selectedIds.add(row.id) - 取消时:
this.selectedIds.delete(row.id) - 全选/反选可批量
add/delete,逻辑清晰且无副作用
结合 getters 获取当前选中行数据
不把整行数据冗余存在 state 里,而是按需从原始数据源中查出:
- 假设表格数据在
tableStore.data,则 getter 可写为: selectedRows: (state) => Array.from(state.selectedIds).map(id => tableStore.data.find(r => r.id === id)).filter(Boolean)- 这样既保持 state 轻量,又保证视图拿到的是最新、真实的数据快照
支持跨组件复用与持久化(可选增强)
若需页面刷新后保留选中状态,可搭配 pinia-plugin-persistedstate:
- 仅对
selectedIds字段开启本地存储,避免缓存过期数据 - 注意:ID 列表本身无业务含义,但能安全重建选中关系
- 服务端分页时,建议额外存
selectedPageKeys: Map<page set>></page>来支持多页记忆


















