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

但当切换页数时,会自动触发方法:

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 

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

 

 

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐