HTML部分
<div class="mb">
<el-row>
<el-col :span="8" :offset="4">
<span>{{ checkBox.qgqzy[0].zyname }}</span>
</el-col>
<el-col :span="5" :offset="7">
<!-- 全选 -->
<el-checkbox
:indeterminate="indeterminate"
v-model="checkAll"
@change="handleCheckAllChange"
>全选</el-checkbox
>
</el-col>
</el-row>
<!-- 多选的内容区 -->
<div class="checkboxWarp">
<el-checkbox-group v-model="qgqzyFilter" @change="checkedqgChange">
<el-checkbox
v-for="item in checkBox.qgqzy"
:key="item.id"
:label="item.mlcode"
style="display: block"
v-model="item.mlname"
>{{ item.mlname }}</el-checkbox
>
</el-checkbox-group>
</div>
</div>
js
data() {
return {
// 地区专业选中的值
form: {
dqcode: "",
zycode: "",
},
// 后端返回的表的数据
checkBox: {
qgqzy: [{ dqname: "" }],
qgfj: [{ dqname: "" }],
zjfj: [{ dqname: "" }],
},
// 自己修改后端返回来的值确定全选内容
qgqzyFilter: [],
// 该多选框的总长度
qgqzyFilterLength: 0,
// 全选绑定的值
checkAll: true,
indeterminate: false,
};
},
created() {
posts("ml/zlk", this.form).then((res) => {
this.checkBox = res;
// 拿到一个当前选项的数组
this.qgqzyFilter = this.checkBox.qgqzy.map((item) => {
return item.mlcode;
});
// 将总长度先存一下
this.qgqzyFilterLength = res.qgqzy.length;
});
},
methods: {
// 选区内容判断图标样式
checkedqgChange(value) {
let checkedCount = value.length;
// 选中的长度与总长度相等 全选标记为true
this.checkAll = checkedCount === this.qgqzyFilterLength;
// 不全选且不全不选状态 全选图标状态为true
this.indeterminate =
checkedCount > 0 && checkedCount < this.qgqzyFilterLength;
},
// 全选的事件
handleCheckAllChange(val) {
const all = this.checkBox.qgqzy.map((item) => {
return item.mlcode;
});
// 判断当前内容是全选还是清空
this.qgqzyFilter = val ? all : [];
this.indeterminate = false;
},
}