Vue + element-ui合并单元格后,checkbox多选单选取值问题

问题说明

针对于el-table表格合并后checkbox选值问题,这里特别需要注意的是不要用selection-change这个事件,该事件就是当选择项发生变化时会触发该事件,这里我们会用到一个单选事件select和全选事件select-all

//单选select,全选select-all
@select="selectCheckOne" @select-all="selectAll"
//将选中的值存入的当前数组中
select_box:[]

具体代码实现思路:

当进行全选操作时,针对数组进行去重,单选判断一下是否选中还是取消选中,选中往数组push元素,取消splice删除指定元素即可

//单选
  selectCheckOne(val, row) {
  //isSelect true为选中 false 为取消
      let isSelect = val.length && val.indexOf(row) > -1
      //findIndex返回-1则不存在,>0则存在
      let n = this.select_box.findIndex(v => {
        return v == row.companyId
      })
      if (isSelect) {
        if (n < 0) this.select_box.push(row.companyId)
      } else {
        if (n > -1) this.select_box.splice(n, 1)
      }
    },
    //全选
    selectAll(arr) {
    //全选先把所有id拿到并去重
      let _arr = [...new Set(arr.map(res => res.companyId))]
      this.select_box = _arr
    },

你可能感兴趣的:(vue.js,ui,前端)