表格单/多选遇到的问题--表格分页选框和数据需要回显_多选框内容选择之后回显在右侧-CSDN博客

本文链接：https://blog.csdn.net/cunese28/article/details/127824907

项目场景：

项目中有一个表格, 可以多选一些内容进行一些批量的操作, 如下图所示

在这里插入图片描述

问题描述

当我们在第一页勾选上数据之后, 然后换到第二页, 在勾选几个, 此时回到第一页会发现第一页勾选的数据就没有了😨, 然后回到第二页, 勾选的数据也不见了😰

原因分析：

这个table是之前封装的组件, 由tableDataList 和propConfig两个数据驱动, 一开始表格只有第一页的数据, 当切换到第二页时我们要从接口中获取第二页的数据赋值给tableDataList, 数据变化, 组件重新渲染, 但是当我们重新回到第一页时, 组件也要重新渲染, 重新渲染之后选框就是所有未选中.

解决方案：

一开始使用element的一个方法toggleRowSelection, 该方法接收两个参数, 分别是当前行的数据row和这一行是否被选中selected, 思路就是, 声明一个数组selectedData, 用来存放勾选的数据row, 然后每当切换页面的时候, 遍历这个数组, 通过toggleRowSelection来将这一行选中. 但是这有两个缺点😨

如果页码非常多的话, 就会影响性能
selectedData中的数据不好控制

~~所以就放弃了这个思路~~😭

后来发现element里面table-column的一条属性reserve-selection

仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）

<el-table-column
	v-if="showSelectionColumn"
	type="selection"
	:selectable="getSelectStatus"
	:reserve-selection="true" >
</el-table-column>

需指定row-key

行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。

该属性接收一个函数, 见伪代码如下:

<el-table
	...
	...
	...
	:row-key='getRowKey'
</el-table>
...
methods: {
    getRowKey(row) {
        return row.id; // 唯一标识
    }
}

这样, 因为每个row都有了唯一的key, 在切换页面的时候, 就会保留目前已选的数据, 当再次切回来时, table会自己去匹配, 如果数据跟之前选中的一致, 就将选框回显😊

欢迎大家一起讨论学习~