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
最后监听一下表格数据变化,进行回显
更多推荐
所有评论(0)