element-ui中多选表格 如果配合分页 回显之后,再次操作勾选会丢失原来选中的数据

Question

我遇到的问题
element ui table 分页 可以在多个页面勾选不同的数据
比如在第一个 勾选了第一条数据
在第二页勾选了第二条数据
这勾选的两条数据我都可以拿到

回显之后的这两条数据我也可以拿到
但是当我在第一页勾选别的数据之后 会触发 @selection-change 这个方法 这个方法返回的只是第一页的选中的数据
导致我存这个选中数据的数组 现在存储的只是第一页数据
没有我刚开始在第二页选中的数据

现在我在第一页勾选多条数据之后 取消第一条数据的选中

然后如果才能拿到 我第一页选中的数据和第二页选中的数据呀？### 问题描述

问题出现的环境背景及自己尝试过哪些方法

相关代码

粘贴代码文本（请勿用截图）

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

配置reserve-selection和row-key不行吗

Answer 2

有解决吗？我也遇到了同样的问题

Answer 3

因为你回显进去时候只有第一页表格的数据，el-table组件只会存第一页选中的，当你点击一下第二页的时候，@selection-change的参数就正常了。
解决方式：

使用toggleRowSelection方法把数据硬塞进去。

getTableList({page:1}).then((res) => {
                        const list = res.data.list
                        this.$nextTick(() => {
                            // this.multipleSelection：第一页和第二页选中的数据数组
                            if (this.multipleSelection.length) {
                                // this.$refs.elTable 当前表格ref
                                this.$refs.elTable.clearSelection()

                                this.multipleSelection.forEach(row => {
                                    const selectedRow = list.find(item => item.id === row.id)
                                    if(selectedRow){
                                        // 当前页(第一页)需要被选中的数据使其选中
                                        this.$refs.elTable.toggleRowSelection(selectedRow, true);
                                    }else{
                                        // 不在当前页(第二页)的数据，也硬塞到@selection-change的参数中，这时当你在第一页选中其他数据时，selection-change的参数也会带着第二页的数据
                                        this.$refs.elTable.toggleRowSelection(row, true);
                                    }
                                })
                            }
                        })
                    })

Answer 4

有宝子解决的吗? 我今天也遇到了,难受香菇,来个大佬说一下吧