ele表格操作区根据数据_ele表格合并行之后的selection选中

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就我们自己联动呗。

最后的代码如下

@select="checkSelection"

@select-all="checkSelection"

@selection-change="checkSelection"

v-loading="checkLoading"

:span-method="rowSpan"

fit

highlight-current-row height="300"

class="dialog-table">

复制代码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手动的单选和全选