element的el-table 解决表格多页选择数据时，数据被清空

官网的表格数据多选例子：

但当切换页数时，会自动触发方法：

handleSelectionChange(val)

且val为[]，也就点击下一页时，把我们的数据都清空了

---

然后就开启了我的手写解决模式...仅参考...在最后面发现原来官方已经提供了解决办法...并且非常简单...

我打算用一个当前页的选择：batchSelection变量，与一个所有页选择：allBatchSelection变量处理

每次将当前页的数据储存到allBatchSelection变量中，当返回时再回显，但是在取消选择时发现很不好处理...

下面是我的思路，仅供参考，没空的直接看最后官方的解决方案：

 这里保留官方的handleSelectionChange，将val传给batchSelection变量，保存当前页的数据选择，然后触发一个检测方法

检测方法为：每次batchSelection数据变动时，将不重复的数据存储到allBatchSelection中

然后监听我的表格数据，当数据变动的时候（即上述的页码变动），再执行一次检测，并且将当前页曾勾选的回显

this.$refs.indexTable.toggleRowSelection(item)

然后开始处理取消选择

我将上面的handleSelectionChange方法修改了下：

发现还是因为切换页码自动执行了handleSelectionChange([])，处理不了下面的条件

if (val.length < this.batchSelection.length)

当切换页码时，也就会出现问题了：一定会删掉当前页的第一项，然后改了下：

if (val.length > 0 && val.length < this.batchSelection.length)

切换页码正常了！但是，当当前页曾选择过，但在切换页码前全部取消，最终会保留一项未被清除...

突然回过头，好像越写越复杂有点不对劲，还是官网再看看......

tips：异步查询数据有可能也会导致多选有问题

 

官网解决办法

发现有这么一个属性：reserve-selection，将它设置为true，然后指定row-key就可以了

在数据更新之后保留之前选中的数据

这里使用数据实体的id作为row-key 

最后监听一下表格数据变化，进行回显