element 表格合并单元格之后数据选择问题

在这里插入图片描述
合并单元格之后点击checkbox选择数据,默认只会选中第一行,当有多行的时候就需要自己处理数据了。

<el-table
	:data="table.records"
	@select="handleSelectionChanges"
	@select-all="handleSelectionChangesAll"
></el-table>
// 单选选中的数据
handleSelectionChanges(val,row) {
  //点击了全选
  if(this.rowArr.length>0){
    //是否存在当前点击行    true就是选中,0或者false是取消选中
    let isSelect = this.rowArr.length && this.rowArr.indexOf(row) > -1
    if(isSelect){
      //当前行选中时push数据
      this.table.records.forEach((el)=>{
        //push数据时要过滤掉当前选中行   element会默认把当前行添加进去  如果在手动push就会出现重复数据
        if(el.date==row.date&&el.actType==row.actType&&el.id!=row.id){
          this.rowArr.push(el)
        }
      })
    }else{
      //当前行取消时删除数据
      for(var i=0,flag=true,len=this.rowArr.length;i<len;flag ? i++ : i){
         if( this.rowArr[i]&&this.rowArr[i].date==row.date&&this.rowArr[i].actType==row.actType ){
              this.rowArr.splice(i,1);
              flag = false;
          } else {
              flag = true;
          }
      }
    }
    this.multipleSelection = this.rowArr
  }else{
    //未全选
    this.multipleSelection = []
    val.forEach((el)=>{
      this.table.records.forEach((ell)=>{
        if(el.date==ell.date&&el.actType==ell.actType){
          if(this.multipleSelection.length<1){
            this.multipleSelection.push(ell)
          }else{
            //存在就会返回true,否则返回false
            var result = this.multipleSelection.some(item=>{
               if(item.id==ell.id){
                  return true
              }
            })
            // 如果存在
            if(result){
              this.multipleSelection.forEach((res,resIndex)=>{
                if(res.date==row.date&&res.actType==row.actType){
                  this.multipleSelection.splice(resIndex,1)
                }
              })
             }else{
               this.multipleSelection.push(ell)
             }
          }
        }
      })
    })
  }
},
// 全选选中的数据
handleSelectionChangesAll(val) {
  this.multipleSelection = [];
  this.multipleSelection = val;
  this.rowArr = val;
},

Tips:当点击全选按钮选择数据之后,再次点击单个行选择数据,无论是选中或者取消element会默认的改变数据,所以当你要push数据的时候要把选中的那一行先过滤掉,然后在push数据,否则就会出现两条相同的数据。

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值