Element UI 多选表格【翻页多选】全能版（含翻页多选数据反显、toggleRowSelection失效的原因解析和解决方案）

Element UI 多选表格【翻页多选】全能版（含翻页多选数据反显、toggleRowSelection失效的原因解析和解决方案）

效果预览

实现思路

data中定义 selectedList 数组保存选中的数据在页面初次渲染、翻页、切换每页数据数量等每次重新获取表格数据渲染表格时，都根据 selectedList 勾选表格中已经选中的行​​切换单行勾选状态时，判断是选中还是取消选中​​，选中则增加选中项，取消选中则移除选中项。切换全选和取消全选时，根据当前页选中行的数据进行更新，若选中行已在 selectedList 中则不再重复添加，否则添加，对于其他非选中行若已在selectedList 中，则从 selectedList 中移除。

技术难点1. 不能使用 selection-change 的原因

selection-change 的参数为当前页选中的所有行，在每次重新获取数据渲染表格时（如翻页时），参数为一个空数组，会导致历史选中的数据被清空！

即便使用 ​​:reserve-selection="true"​​ 来保留历史选中记录也无法达到预期效果。

2. toggleRowSelection失效的原因解析和解决方案

toggleRowSelection失效通常为以下两种情况：

（1）表格数据发生变化，表格还没渲染完便执行了toggleRowSelection

解决方案 ： 在 $nextTick 中执行 toggleRowSelection

// toggleRowSelection 需在$nextTick中使用！this.$nextTick(() => { this.$refs.multipleTable.toggleRowSelection(row);});

（2）toggleRowSelection的第一个参数不是表格源数据

即便数据的值完全一样也会失效，因为数据为引用类型，必须地址一样。

解决方案 ：toggleRowSelection的第一个参数通过在表格数据中通过 find() 查找得到。

this.$nextTick(() => { this.$refs.multipleTable.toggleRowSelection( // 此处必须在 tableData 中查找对应的数据，否则 toggleRowSelection 会失效 this.tableData.find((row) => { return row[this.UID] === item[this.UID]; }), false ); });

完整范例代码

化为己用

若你的唯一标识符不是 ​​ID​​，则修改 data() 中的UID 的值即可！

// 唯一标识符 UID: "ID",

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。