bug说明
ele表格合并行之后,还需要添加复选框选择记录做操作的情况下,
用ele的@selection-change,@select,@select-all是有bug的。 选中合并列的复选框时,其实他只是给你选中了合并列的第一条,如图复制代码
checkSelection (val, row) { this.multiCheckSelection = val }复制代码
比如全选之后,你取消1的复选框,这个时候@selection-change传入的值,就是B,C,D的值。
但是正常人取消1的复选框,肯定是想传入C,D的值呀,那咋办?于是想了个办法
checkSelection 执行这个方法的时候,我去判断选择的记录是否属于合并行中一条A,是则找出他的couple--B(如上图A,B就是couple), 把B对象也放到this.multiCheckSelection中去,
然后这需要用@select和@select-all。但是这又有问题,比如取消A的时候,我能把B也取消,可如果再取消2的话,B就还是@selection-change传入的val 所以用数据来计算是否选中行不通咯于是又想了个办法
数据不行,噢!可以用dom选中取消,就是直接模拟手动选中取消,ele不给联动couple就我们自己联动呗。
最后的代码如下复制代码
checkSelection (val, row) { if (!row) { // 没有row则是全选的情况 this.multiCheckSelection = val return } let arr = [] let valArr = [] let isChk = true // 是否是勾选 val.forEach(item => { arr.push(item.id) }) if (arr.indexOf(row.id) === -1) { // 是取消勾选 isChk = false } // 把对应couple单 选中/取消 this.checkList.forEach(item => { if (this.isCouple(item, row)) { this.$nextTick(() => { this.$refs.checkTable.toggleRowSelection(item, isChk) // 该处也会触发checkSelection方法,因为触发了selection-change // 类似于递归了,这就解决了第一个方案的问题 }) } }) if (!isChk) { val.forEach(item => { if (!this.isCouple(item, row)) { valArr.push(item) } }) } else { // 把列表中是couple的都选中 this.checkList.forEach(item => { if (this.isCouple(item, row)) { valArr.push(item) } }) } this.multiCheckSelection = valArr},// 是否是成对的记录,也就是合并在一起的记录isCouple (row1, row2) { return row1.transNumber === row2.transNumber && row1.createTime === row2.createTime},复制代码
这解决方案需要先了解@selection-change,@select,@select-all这三个方法
@selection-change是选中状态改变,无论是手动还是代码动 @select,@select-all手动的单选和全选