博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ele表格合并行之后的selection选中
阅读量:6471 次
发布时间:2019-06-23

本文共 1901 字,大约阅读时间需要 6 分钟。

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手动的单选和全选

转载地址:http://vovko.baihongyu.com/

你可能感兴趣的文章
iOS自定制tabbar与系统的tabbar冲突,造成第一次点击各个item图片更换选中,第二次选中部分item图片不改变...
查看>>
SVN服务器使用(二)
查看>>
反射获取内部类以及调用内部类方法
查看>>
App里面如何正确显示用户头像
查看>>
DATAGUARD维护:从库宕机后如何恢复到管理恢复模式
查看>>
U-BOOT之一:BootLoader 的概念与功能
查看>>
我的路上
查看>>
Velocity处理多余空白和多余空白行问题
查看>>
java值传递
查看>>
DB2与oracle有什么区别
查看>>
创建一个多级文件目录
查看>>
Picasa生成图片幻灯片页面图文教程
查看>>
js获取当前时间的前一天/后一天
查看>>
Python字符串的格式化
查看>>
C#反射---属性
查看>>
服务器常用的状态码及其对应的含义如下
查看>>
zoom和transform:scale的区别
查看>>
黄聪:PHP 防护XSS,SQL,代码执行,文件包含等多种高危漏洞
查看>>
svn status 显示 ~xx
查看>>
常用HiveQL总结
查看>>