<el-checkbox
:indeterminate="checkList.indeterminate"
v-model="checkList.checkAll"
@change="checkAllChange">
全选
</el-checkbox>
<el-checkbox-group
v-model="checkList.checkValue"
@change="checkChange">
<el-checkbox
v-for="i in checkList.list"
:label="i.key"
:key="i.key">
{{i.name}}
</el-checkbox>
</el-checkbox-group>
<script>
return {
checkList:{
indeterminate:true,
checkAll: false,
list:[
{
name:"框框1",
key:"1"
},
{
name:"框框2",
key:"2"
}
],
checkValue:[],
}
}
checkAllChange(val) {
let list = []
this.checkList.list.forEach(function(item){
list.push(item.key)
})
this.checkList.checkValue = val ? list : [];
this.checkList.indeterminate = false;
},
checkChange(value) {
console.log(value)
console.log(this.checkList.checkValue)
let checkedCount = value.length;
this.checkList.checkAll = checkedCount === this.checkList.list.length;
this.checkList.indeterminate = checkedCount > 0 && checkedCount < this.checkList.list.length;
}
</script>