求Vue Element UI的Table组件跨页多选的实现思路。

Vue Element UI的Table列表的CHECKBOX实现跨分页多选,再次回到某页如果某行之前已选择则CHECKBOX要进行回显,最终要得到所有选择行的集合。求实现思路或者解决方案。

回答:

1.列表渲染时在tabelData中的各元素添加一个属性checked,默认为false;
2.给’el-tabel’元素绑定@select@select-all两个事件,在事件触发时设置row.check=!row.check,判断row.check分以下情况:
(1)为true时,且判断全局数组中没有这个id时,将id push进全局数组中,如this.selectDataIds.push(id);如果已经有这个id,那么不做处理;
(2)为false时,判断全局数组中有没有该选项的id,如果有,那么把它从数组中去除
3.翻页时,将会有新的数据,那么在获取tabelData成功的接口中回调时添加全局数组的id判断,如果当前渲染的id包含在this.selectDataIds中,意味着这个选项前期已经选择,需要回显,那么将默认的checked改为true
4.翻页之后正常重复操作就行了

回答:

row对象加上checked属性 在column的template里的el-checkbox里用v-model绑定即可

回答:

使用缓存吧,把你页数,当前页面选择的index保存一下,再根据页码去取,再初始化。

回答:

选中的时候把数据行的id存在一个数组中,这个数组在一页数据加载完后遍历一下,如果有id存在数组中就选中

回答:

你好 问题解决了吗
我也遇到同样的问题

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注