0

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

5个回答

0

已采纳

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.翻页之后正常重复操作就行了

1
回复 chicago籽

row.check为true时当前行的数据item push到一个数组(如checkBoxList)里,当列表渲染完之后,遍历checkBoxList,执行

checkBox.forEach(function (row) {                          
  _this.$refs.multipleTable.toggleRowSelection(row);
})

Mikasa · 11月15日

展开评论
1

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

0

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

0

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

0

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

撰写答案