elementUI 使用checkbox多选框循环生成多选表格

html

 <table class="week_table el-table el-table--fit el-table--border el-table--enable-row-hover">
    <thead class="has-gutter">
      <tr class="">
          <th colspan="1" rowspan="1">
               <div class="cell week_title"></div>
          </th>
          <th colspan="1" rowspan="1" v-for="(info,index) in time_tab" :key="info.index" :property="info.key">
                <div class="cell t_center">
                     <el-checkbox :label="info.label" v-model="info.check" @change="val=>handleCheckAllChange(val, info.name)"></el-checkbox>
                 </div>
           </th>
       </tr>
     </thead>
     <tbody>
        <tr class="el-table__row" v-for='item in edit_form.week_checkgroup'>
            <td rowspan="1" colspan="1" class="el-table_3_column_7  ">
                 <div class="cell week_title">{{item.name}}</div>
            </td>
            <td rowspan="1" colspan="1" class="el-table_3_column_7  ">
                 <div class="cell t_center">
                      <el-checkbox v-model="item.check1" @change="handleCheckSingleChange(item.check1, 'check1')" ></el-checkbox>
                 </div>
            </td>
            <td rowspan="1" colspan="1" class="el-table_3_column_7  ">
                 <div class="cell t_center">
                       <el-checkbox v-model="item.check2" @change="handleCheckSingleChange(item.check2, 'check2')" ></el-checkbox>
                 </div>
            </td>
            <td rowspan="1" colspan="1" class="el-table_3_column_7  ">
                 <div class="cell t_center">
                       <el-checkbox v-model="item.check3" @change="handleCheckSingleChange(item.check3, 'check3')" ></el-checkbox>
                 </div>
             </td>
             <td rowspan="1" colspan="1" class="el-table_3_column_7  ">
                 <div class="cell t_center">
                       <el-checkbox v-model="item.check4" @change="handleCheckSingleChange(item.check4, 'check4')" ></el-checkbox>
                 </div>
              </td>
          </tr>
       </tbody>
</table>

data

time_tab:[
            {label: 'aa',name: 'check1',check:false},
            {label: 'bb',name: 'check2',check:false},
            {label: 'cc',name: 'check3',check:false},
            {label: 'dd',name: 'check4',check:false},
],

week_checkgroup: [
                     {name: '一',check1: false,check2: false,check3: false,check4: false},
                     {name: '二',check1: false,check2: false,check3: false,check4: false},
                     {name: '三',check1: false,check2: false,check3: false,check4: false},
                     {name: '四',check1: false,check2: false,check3: false,check4: false},
                     {name: '五',check1: false,check2: false,check3: false,check4: false},
                     {name: '六',check1: false,check2: false,check3: false,check4: false},
                     {name: '日',check1: false,check2: false,check3: false,check4: false},
,

methods

//全选按钮
handleCheckAllChange (val,name) {
    this.week_checkgroup.forEach((w,wIndex) => {
         w[name] = val;
    });
},
// 单选按钮
handleCheckSingleChange(val,name){
    var _index= 0 ;
    var select_length = 0 ;
    if(name==[name]){
         var nameIndex = name.split("check")[1]
         _index=nameIndex-1;
         select_length = this.week_checkgroup.filter((w,wIndex) => { return w[name] == true; }).length;
     }else {
           return
     }
     if(select_length == 7){
        //全选
         this.time_tab[_index].check=true;
      }else{
         //取消
         this.time_tab[_index].check=false;
      }
},

原文地址：https://www.cnblogs.com/JaneLifeBlog/p/14845389.html