<!--
indeterminate和v-model的值呈现的状态
如果true true 或者 true false样式为-
如果false true样式为√
如果false false样式为不勾
-->
<el-checkbox
:indeterminate="isIndeterminate"
v-model="SignAll"
@change="signCheckAll"
>全选</el-checkbox
>
<el-checkbox-group
v-model="checkedSignArr"
@change="signGroup">
<el-checkbox
v-for="item in signArr"
:label="item"
:key="item"
></el-checkbox>
</el-checkbox-group>
-------------------------------------------------
绑定值
SignAll: false,
isIndeterminate: false, //和SignAll判定是否全选
signArr: [], //页面呈现的数组
checkedSignArr: [], //选中的表面的数据
signGetArr: [], //后台接口获取含有id和name的数组
-----------------------------------------------------
方法-------------------------------------------------
// 全选按钮
signCheckAll(val) {
console.log("全选", val);
this.checkedSignArr = val ? this.signArr : [];
this.isIndeterminate = false;
},
// 单个按钮
signGroup(value) {
console.log("单个按钮", value);
let checkedCount = value.length;
this.SignAll = checkedCount === this.signArr.length;
this.isIndeterminate =
checkedCount > 0 && checkedCount < this.signArr.length;
},
//缺个最后提交时,将后台获取的数据和选中的数据对比取出其id的操作。
//复选回显的数组里面类型一定要跟那个循环的树结构类型对上,比如其是数值型的,那么回显数组里面的数据就要是数值型否则不回显示上对勾