el-table 的 el-table-column配置了reserve-selection,导致子项原先选中的,刷新数据之后无法取消子项的选中状态,该如何解决?

element-plus最新版,el-table 的 配置了reserve-selection,导致子项原先选中的,刷新数据之后无法取消子项的选中状态了,这还挺严重的。

选中第一页的子项数据,然后切换到第二页,然后再回第一页(和原来一样的数据),这时候,原先选中的子项取消不了选中态。

<el-table-column type="selection" width="55" reserve-selection />

复现:
Element Plus Playground

阅读 1.5k
3 个回答

@ethanYin 所说,是由于 table/src/util.ts#L298 查找选中项的 index 逻辑未考虑 rowKey 导致的。

我提交了一个 PR 给 Element Plus,等官方 review 吧。

具体改动可查看 PR 20995

没太懂你的意思,刷新数据之后,你给的复现保存选中都没有,更别说取消选中了,或者说我操作错了?
01.gif


更新于 2025-06-11 22:24:18
抱歉,前面没理解到你的意思,后面看了下element-plus代码,出现问题主要在 element-plus/element-plus/blob/dev/packages/components/table/src/util.ts#L298

const index = statusArr.indexOf(row)

row 是选择的数据, statusArr 是 hook useWatcher 的全局变量,存的也是引用,没去深究,我改成用 id(rowKey) 去找index就不会出现这个问题了,所以你可以先为你的 element-plus@2.10.1 打个patch去暂时解决这个问题,后面我再研究研究,有更好的方案再更新答案 [Doge]

- const index = statusArr.indexOf(row)
+ // const index = statusArr.indexOf(row)
+ const index = statusArr.findIndex((item) => item.id === row.id)

我没打开你的复现,但是我感觉你现在的情况跟我以前的应该相似,是分页后切回来原先勾选的数据在选中数据里保存了但是界面回显是没有勾选的状态,我当时是清空了所有选中的状态,在根据保存了的额原先的数据在重新勾选回去的,在分页请求完成后多加的一个操作

推荐问题