element在table中使用多选框

先贴效果图

先说下怎么实现

<template v-for="(item, index) in makeProcess">
        <vd-table-column
          width="120"
          align="center"
        >
          <template
            slot-scope="scope"
            slot="header"
          >
            <el-checkbox
              :label="index"
              :indeterminate="checkList[index].isIndeterminate"
              v-model="checkList[index].selectedAll"
              @change="val=>handleCheckAllChange(val,index)"
            >
              {{ item.name }}
            </el-checkbox>
          </template>
          <template slot-scope="scope">
            <el-checkbox-group v-model="checkList[index].selected">
              <el-checkbox
                :label="scope.row.makeProcess[index].cpId"
                @change="val=>selectOne(val,index)"
              >
                <el-button
                  :type="scope.row.makeProcess[index].curStatus?'warning':'success'"
                  @click="dbClick(scope.row.makeProcess[index].cpId,scope.row.makeProcess[index].curStatus)"
                >
                  {{scope.row.makeProcess[index].curStatus?'取消':'汇报'}}
                </el-button>
              </el-checkbox>
            </el-checkbox-group>
          </template>
        </vd-table-column>
      </template>

上图中的数据如下

makeProcess  的数据如下

 

checkList  的数据    

注：checkList  是在页面初始化时创建的

this.checkList.map(() => {
          this.checkList.push({ selectedAll: false, isIndeterminate: false, selected: [] });
        });
   

 

逻辑实现

 

全选功能

// 全选
    handleCheckAllChange (val, index, i) {
      console.log(val);
      this.checkList[index].selectedAll = val;
      this.checkList[index].isIndeterminate = false;
      if (val) {
        this.checkList[index].selected = [];
        const canSelected = this.$refs.myTables.list;
        canSelected.map(item => {
          this.checkList[index].selected.push(item.makeProcess[index].cpId);
        });
      } else {
        this.checkList[index].selected = [];
      }
      console.log(this.checkList[index]);

    },

单选功能

selectOne (val, index) {
      this.checkList[index].selectedAll = this.checkList[index].selected.length === this.$refs.myTables.list.length;
      this.checkList[index].isIndeterminate = this.checkList[index].selected.length !== this.$refs.myTables.list.length
        && this.checkList[index].selected.length !== 0;
    },

 

dbClick  为点击  取消 / 汇报  时的双击事件，具体逻辑根据自己的业务决定

 

点击提交汇报可以拿到所选中下所绑定的值

let arr = [];
this.checkList.forEach((item, index) => {
   arr = [...arr, ...item.selected];
});
console.log(arr)