el-table 多选表格存在分页，编辑再次操作勾选会丢失原来选中的数据

时间：2024-03-03 12:36:18

el-table表格多选时，只需要添加type="selection"， row-key及@selection-change，如果存在分页时需要加上reserve-selection，这里就不写具体的实现方法了，可以查看我之前的文章，这篇文章主要说一下存在的问题。

问题：

1.进入列表，勾选表格第1页的一条数据，然后切换进入第2页，再勾选一条数据
在这里插入图片描述

在这里插入图片描述
如上图，每页分别勾选了一条数据，然后保存

2.再点击编辑，进入后，不要点击第二页，直接在第一页上在勾选一条数据，然后保存，你会发现，第二页的数据消失了。如果先点击切换进入第二页，再点击保存就没问题了

疑问：这是什么情况，为什么会这样呢？

因为表格是存在分页，初始化进去的时候，只加载了第一页的数据，后面页面的数据是拿不到的，el-table组件只会存第一页选中的，当你点击一下第二页的时候，@selection-change的参数就正常了

如果解决

那肯定是有方法解决的，使用toggleRowSelection方法把数据硬塞进去

this.$nextTick(() => {
  // this.multipleSelection：第一页和第二页选中的数据数组, this.tableList是表格数据
   if (this.multipleSelection.length) {
       // this.$refs.elTable 当前表格ref
       this.$refs.elTable.clearSelection()

       this.multipleSelection.forEach(row => {
           const selectedRow = this.tableList.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);
           }
       })
   }
})

这里使用了vue2的代码解释，如果需要vue3的直接修改即可，原理一样的

相关文章