代码展示：
<template>
<div class>
<div class>
<div class="com1" v-for="(item,index) in cityList" :key="index">
<!-- 标题 -->
<div
class
style="width:100px;height:30px;display: flex;justify-content: center;align-items: center;font-size:15px;"
>
{{item.name}}
<Checkbox
:indeterminate="item.indeterminate"
:value="item.checkAll"
@click.prevent.native="handleCheckAll(item,index)"
></Checkbox>
</div>
<!-- 选项 -->
<div
class="group_list"
style="display:flex;flex-direction:row;flex-wrap:wrap;justify-content: center;align-items: center;font-size:13px;"
>
<CheckboxGroup
v-model="formValidate.children"
style="width:30%;overflow:hidden;line-height:30px;"
v-for="(items,index1) in item.children"
:key="index1"
@on-change="checkAllGroupChange($event,item.children,item)"
>
<!-- <Checkbox style="width:300px;">{{items.name}}</Checkbox> -->
<!-- <Checkbox :label="items.uid" style="width:300px;">{{items.name}}</Checkbox> -->
<!-- {{items.name}} -->
<!-- {{typeof(items)}} -->
<Checkbox :label="items.uid" style="width:300px;">{{items.name}}</Checkbox>
</CheckboxGroup>
</div>
</div>
</div>
<div class style="text-align:center;width:100%;margin-top:10px;">
<Button type="primary" style="margin-right:10px;" @click="handleCommit()">保存</Button>
<Button type="primary" @click="cancleFun">取消</Button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
oldName: [], // 记录上次全选值
indeterminate: true, //全选框的样式
checkAll: false, //是否全选
cityList: [], //区域 标题
formValidate: {
name: "",
type: "",
children: []
},
checkAllGroup: []
};
},
methods: {
// 接收 参数
initDetailData(params) {
console.log(params, "params");
let str = params.row.roomType_Order;
this.formValidate.name = params.row.roomType_Name;
this.formValidate.type = str;
},
// 取消 按钮
cancleFun() {
this.$emit("SubmitCancel");
this.getAll();
this.formValidate.children = [];
this.oldName = [];
},
// 点击 提交 按钮
handleCommit() {
console.log("qqqqqq");
this.btn_loading = true;
// 接下来 调用接口，并把数据 传给后端
var params = JSON.stringify(this.formValidate);
console.log(params, "params");
this.$api.Areas.UpdateRoomArea(params).then(res => {
//// 提交成功 提示 成功
this.$Message.success("提交成功!");
//// 加载 关闭
this.btn_loading = false;
//// 然后 触发父组件 回调函数 页面重新刷新数据
this.$emit("SubmitSuccess");
//// 清空表单数据
this.getAll();
this.formValidate.children = [];
this.oldName = [];
});
},
// 点击 全选 按钮
handleCheckAll(item, index) {
debugger
console.log(item,index,'------------------')
// 首先判断 全选框的样式
// 如果样式为 -
if (item.indeterminate) {
// 不进行 全选
item.checkAll = false;
} else {
// 相反 状态
item.checkAll = !item.checkAll;
}
// indeterminate 为false 没有任何样式
item.indeterminate = false;
// 调用 get方法，传参数 item
this.get(item);
},
get(item) {
console.log(item,',,,,,,,,,,')
// 首先判断 之前有没有 全选 （oldName 全选值）
// 如果没有 全选
if (this.oldName.length == 0) {
// 把值 添加进去
this.oldName.push(item.name);
// 状态 改为 true
item.checkAll = true;
// 定义两个 空数组
var group = [];
var list = [];
// 循环 获取到 所有的 值，push进 group
console.log(item.children,'eeeeeeeeeeeeeeeeeee')
item.children.forEach(e => {
group.push(e.uid);
});
console.log(group,'group')
// 先判断 之前有没有 选择过值
console.log(this.formValidate.children,"133333333333333")
if (this.formValidate.children == 0) {
debugger
this.formValidate.children = group;
} else {
this.formValidate.children.push(...group);
}
// 如果 之前全选过
console.log(this.formValidate.children)
} else if (this.oldName.length > 0) {
// 进行查重
var titleSwitch = true; // 查重开关
// 对所有的全选值 进行循环
this.oldName.forEach(element => {
// 如果 此次选择的值，存在于 oldName中
if (element == item.name) {
// 设置状态 为 false
titleSwitch = false;
}else{
titleSwitch = true;
}
});
// 如果 为 true，说明值不存在于oldName中
if (titleSwitch) {
item.checkAll =true
var group = [];
// 直接 把值 添加进 oldName
this.oldName.push(item.name);
// 把所有的 选项值，添加进group
item.children.forEach(e => {
group.push(e.uid);
});
if (group.length > 0) {
// group 添加进 formValidate
this.formValidate.children.push(...group);
}
// 如果已经全选，再次点击说明，需要把它删除
} else {
// 否则 存在于，oldName
var group = [];
// 获取 所有值，添加进 group
item.children.forEach(e => {
group.push(e.uid);
});
// 对 oldName值 进行循环，找到相同的值，oldName里删除
for (let a = this.oldName.length - 1; a >= 0; a--) {
if (this.oldName[a] == item.name) {
this.oldName.splice(a, 1);
}
}
// 循环formValidate.children，找到并，把该项 删除
for (let i = this.formValidate.children.length - 1; i >= 0; i--) {
group.forEach(element => {
if (element == this.formValidate.children[i]) {
this.formValidate.children.splice(i, 1);
}
});
}
}
}
},
// 选择 每个选项
checkAllGroupChange(event, list, item) {
// event 选中的数据
var selectData = [];
event.forEach(e => {
list.forEach(i => {
if (e == i.uid) {
selectData.push(i);
}
// if (e.uid == i.uid) {
// selectData.push(i);
// }
});
});
console.log(selectData, "ssssss");
// 如果 全都选中， - 变成 √
if (list.length === selectData.length) {
item.indeterminate = false;
item.checkAll = true;
} else if (list.length > selectData.length) {
item.checkAll = false;
item.indeterminate = true;
} else {
item.checkAll = false;
item.indeterminate = false;
// this.get(item)
}
},
// 获取 所有数据 初始化
getAll() {
// 获取 所有 区域 信息
// var param = { floor: "B1" }; //参数待调整
// this.$api.Room.GetArea(param).then(res => {
// this.cityList = res.data.result;
let res = [
{
name: "指挥区",
type: "3261AC91-4589-4897-B57D-985CBC5407F1",
children: [
{
name: "房间04",
uid: "76122987e7b05bbf7f8221aa1f12c06e"
},
{
name: "房间05",
uid: "ca0b81823e17839eac1dbf8b5b3976df"
},
{
name: "房间06",
uid: "26fe84446f089b4771761870af4ed613"
},
{
name: "门岗",
uid: "55645088c0dcf527bce0b2051ba9dba1"
},
{
name: "房间08",
uid: "0d4b9b3a4423e5e8a1f2ab719b8508b5"
},
{
name: "淋浴间1",
uid: "24d4bd56e6bfe9ffd2f6c509d73711d5"
},
{
name: "淋浴间2",
uid: "277222ca7d1ab1bfee327b81204fd07f"
},
{
name: "房间11",
uid: "310a2683b7f44710a439421fd09abdac"
},
{
name: "房间12",
uid: "5f4bb808eba13c06f4b62ced160effd5"
},
{
name: "电站",
uid: "14809139e1a181fbb8d6e69de295c6c3"
},
{
name: "扩散室2",
uid: "5b966296b54a798b70bd575c412917f1"
},
{
name: "房间15",
uid: "dbf1607da8e02003b83fe7d7ed6e0f06"
},
{
name: "走廊1",
uid: "6d5139461451825d4dddce2ed70dd658"
},
{
name: "扩散室1",
uid: "d7dca7150712d0eb74e37eb318b12d21"
},
{
name: "房间18",
uid: "c3d4975806f2b1b4b0fd7b2430462712"
},
{
name: "房间19",
uid: "1b85c84c8cb3ff8a39fade48808372ff"
},
{
name: "房间20",
uid: "e3a4fedff9f6871286cd6e450bd4d39b"
},
{
name: "卫生间2",
uid: "b29c354dea4276b320a83eb23e6ea70b"
}
]
},
{
name: "休息区",
type: "3261AC91-4589-4497-B57D-985CBC5407F1",
children: [
{
name: "卫生间1",
uid: "f156e06683392d5b480e3428b5f690dc"
},
{
name: "走廊2",
uid: "89ed99c4757177118f15977871bab4cb"
},
{
name: "房间02",
uid: "6027077fdeb5fa1bd681262b9aa12f86"
}
]
},
{
name: "作战区",
type: "3261SC91-4589-4127-B57D-985CBC5407F1",
children: [
{
name: "卫生间22",
uid: "f156e06681232d5b480e3428b5f690dc"
},
{
name: "走廊11",
uid: "89ed99c4765477118f15977871bab4cb"
},
{
name: "房间29",
uid: "6027077fdeb5fa1bd689872b9aa12f86"
}
]
}
];
this.cityList = res;
this.cityList.forEach((item,index) => {
item.checkAll = false;
item.indeterminate = false;
});
console.log(this.cityList, "ccccc");
// });
}
},
mounted() {
this.getAll();
}
};
</script>
<style lang="stylus" scoped></style>
PNG