首先效果展示
步骤如下:
1、html
<el-form>
<el-form-item v-for="(item, index) in dataList" :key="index">
<el-checkbox
@change="(val) => handleCheckAllListChange(val, item)"
:indeterminate="itemIndeterminate(item)"
v-model="item.checkAll"
>{{ item.label }}</el-checkbox
>
<el-checkbox-group
v-model="checkedData"
@change="handleCheckedCitiesChange"
style="padding-left: 30px;"
>
<el-checkbox
style="width: 230px;"
v-for="items in item.child"
:key="items.field"
:label="items"
>{{ items.label }}</el-checkbox
>
</el-checkbox-group>
</el-form-item>
</el-form>
2、js
data() {
return {
checkedData: [], //选择多选框时选中的值
// 所有导出数据
dataList: [],
//实际数组格式为
// dataList: [
// {
// field: "gasUser",
// label: "用户基础信息",
// child: [
// {
// field: "userId",
// label: "用户账号",
// dictKey: null,
// dateFormat: null
// },
// {
// field: "userName",
// label: "姓名",
// dictKey: null,
// dateFormat: null
// }
// ]
// },
// {
// field: "gasUserInfo",
// label: "用户身份信息",
// child: [
// {
// field: "certificateType",
// label: "证件类型",
// dictKey: "certificate_type",
// dateFormat: null
// },
// {
// field: "certificateNo",
// label: "证件号码",
// dictKey: null,
// dateFormat: null
// }
// ]
// },
// {
// field: "gasUserPackage",
// label: "用户订购套餐",
// child: [
// {
// field: "wireless",
// label: "无线套餐",
// dictKey: null,
// dateFormat: null
// },
// {
// field: "wired",
// label: "有线套餐",
// dictKey: null,
// dateFormat: null
// },
// {
// field: "mixed",
// label: "混合套餐",
// dictKey: null,
// dateFormat: null
// }
// ]
// },
// {
// field: "gasUserOperator",
// label: "用户绑定宽带",
// child: [
// {
// field: "broadband",
// label: "运营商对接配置和用户宽带账号",
// dictKey: null,
// dateFormat: null
// },
// {
// field: "operatorUserPassword",
// label: "用户宽带密码",
// dictKey: null,
// dateFormat: null
// }
// ]
// }
// ]
};
},
methods: {
// 获取所有导出选项
doExport() {
exporAllSelect(this.exportSelectUrl).then((res) => {
this.dataList = res;
// 添加checkAll是否全选
this.dataList = this.dataList.map((v) => ({
...v,
checkAll: false
}));
this.dataList.forEach((item) => {
let newChild = item.child.filter((v) => {
return v.selected;
});
if (newChild.length == item.child.length) {
item.checkAll = true;
} else {
item.checkAll = false;
}
});
res.forEach((item) => {
item.child.forEach((v) => {
if (v.selected) {
this.checkedData.push(v);
}
});
});
});
},
// 全选
handleCheckAllListChange(val, item) {
// 过滤掉没有选中的数据,item.child中不包含v时返回-1
const filterArr = this.checkedData.filter(
(v) => item.child.indexOf(v) == -1
);
this.checkedData = val ? filterArr.concat(item.child) : filterArr;
},
// 是否全选
itemIndeterminate(item) {
return (
item.child.some((v) => this.checkedData.indexOf(v) > -1) &&
!item.child.every((v) => this.checkedData.indexOf(v) > -1)
);
},
handleCheckedCitiesChange() {
this.dataList.forEach((item) => {
item.checkAll = true;
item.child.forEach((v) => {
if (!this.checkedData.includes(v)) {
item.checkAll = false;
}
});
});
},
// 导出
submitExport() {
// 最后设置数据格式变成跟原来data的数据格式一样
this.checkedData = this.dataList
.map((v) => ({
label: v.label,
field: v.field,
child: v.child.filter((v) => this.checkedData.indexOf(v) > -1)
}))
.filter((v) => v.child.length);
}
}