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;
}
},