需求是这样的,表格滚动加载时,假如我们在表格滚动之前,我们选中了一些多选框,那么下拉加载之后,我们需要将之前的选中的数据依然保持选中状态,而不是数据一下拉加载,就重新渲染了,选中的数据就恢复到未选中状态,这个很简单,element-ui 文档已经给出一个属性 :reserve-selection="true"
仅对 type=selection 的列有效,类型为 Boolean,为 true 则会在数据更新之后保留之前选中的数据(需指定 row-key),这样就解决了问题了
<el-table-column :reserve-selection="true" type="selection" width="100"></el-table-column>
但是接下来问题来了,我一下拉加载数据,控制台就会报错下面这个经过:
![e4eb04e417ba495031089ac1c6585fd8.png](https://i-blog.csdnimg.cn/blog_migrate/7cdc994805408e2be8bf13458e56ae12.jpeg)
经过百度之后,发现是说 key 重复了
![c0a3f7f5b15de08ea3bf5d2a5c9bacd5.png](https://i-blog.csdnimg.cn/blog_migrate/5b293a5a5f5a0851de0114483898020e.jpeg)
后来发现是下拉加载方法少加了下面这段代码:
/**
* 描述
* @date 2020-10-14
* @description 下拉加载
* @returns {any}
*/
loadMore() {
this.pageForm.current = this.pageForm.current + 1
this.onSubmit(false)
},
但是选中之后背景色是错位的,是导致数据与渲染出来的表格不对应,加了 v-if 受到了影响:
![6f80b312538aa87dc1a791f414cf8a30.png](https://i-blog.csdnimg.cn/blog_migrate/a5eda8e365b0ca87c1ae4051ade5f06e.jpeg)
效果如下,数据与表格对应的数据是混乱的,不是一一对应的
![204e5a834aacfe624da272c3d20736b3.png](https://i-blog.csdnimg.cn/blog_migrate/48e9041af91b49049369f63fedfc65c4.jpeg)
下面把 v-if 删除之后,数据表格渲染就正常了
![70315c7f1f3005c0246eeef6befe5777.png](https://i-blog.csdnimg.cn/blog_migrate/c5eb3ca6d3119306047bf5641d397899.jpeg)
效果如下:
![7cbdf197213250457ce3afc1a680a5f6.png](https://i-blog.csdnimg.cn/blog_migrate/27b17559f95aef5adae14ae7047aaf94.jpeg)