vue+element 动态加载数据，checkbox实现全选，不全选
效果图：
功能描述： 图中所展示数据，全是从服务器获取的数据动态加载，实现点击全选，不全选，加粗字体为父节点，后面为子节点。
数据结构：
[
{
"children": [
{
"children": [
{
"incode": "202",
"isdist": 0,
"remark": "yzzd",
"value": "一轴制动"
},
{
"incode": "203",
"isdist": 0,
"remark": "ezzd",
"value": "二轴制动"
},
{
"incode": "204",
"isdist": 0,
"remark": "szzd",
"value": "三轴制动"
},
{
"incode": "205",
"isdist": 0,
"remark": "sizzd",
"value": "四轴制动"
},
{
"incode": "206",
"isdist": 0,
"remark": "wzzd",
"value": "五轴制动"
},
{
"incode": "207",
"isdist": 0,
"remark": "lzzd",
"value": "六轴制动"
}
],
"isdist": 0,
"value": "各轴制动"
},
{
"children": [
{
"incode": "225",
"isdist": 0,
"remark": "yzjzzd",
"value": "一轴加载制动"
},
{
"incode": "226",
"isdist": 0,
"remark": "ezjzzd",
"value": "二轴加载制动"
},
{
"incode": "227",
"isdist": 0,
"remark": "szjzzd",
"value": "三轴加载制动"
},
{
"incode": "228",
"isdist": 0,
"remark": "sizjzzd",
"value": "四轴加载制动"
},
{
"incode": "229",
"isdist": 0,
"remark": "wzjzzd",
"value": "五轴加载制动"
},
{
"incode": "230",
"isdist": 0,
"remark": "lzjzzd",
"value": "六轴加载制动"
}
],
"isdist": 0,
"value": "加载制动"
},
{
"children": [
{
"incode": "209",
"isdist": 0,
"remark": "zyd",
"value": "左远灯"
},
{
"incode": "210",
"isdist": 0,
"remark": "zfd",
"value": "左副灯"
},
{
"incode": "211",
"isdist": 0,
"remark": "zjd",
"value": "左近灯"
},
{
"incode": "212",
"isdist": 0,
"remark": "yyd",
"value": "右远灯"
},
{
"incode": "213",
"isdist": 0,
"remark": "yfd",
"value": "右副灯"
},
{
"incode": "214",
"isdist": 0,
"remark": "yjd",
"value": "右近灯"
}
],
"isdist": 0,
"value": "灯光"
},
{
"children": [
{
"incode": "216",
"isdist": 0,
"remark": "wg",
"value": "外观"
},
{
"incode": "217",
"isdist": 0,
"remark": "dt",
"value": "动态"
},
{
"incode": "218",
"isdist": 0,
"remark": "jt",
"value": "静态"
},
{
"incode": "222",
"isdist": 0,
"remark": "lszd",
"value": "路试制动"
},
{
"incode": "223",
"isdist": 0,
"remark": "lszc",
"value": "路试驻车"
},
{
"incode": "224",
"isdist": 0,
"remark": "lscsb",
"value": "路试车速表"
}
],
"isdist": 0,
"value": "PDA功能"
},
{
"children": [
{
"incode": "201",
"isdist": 0,
"remark": "lz",
"value": "轮重"
},
{
"incode": "208",
"isdist": 0,
"remark": "zczd",
"value": "驻车制动"
},
{
"incode": "215",
"isdist": 0,
"remark": "qlch",
"value": "前轮侧滑"
},
{
"incode": "219",
"isdist": 0,
"remark": "csb",
"value": "车速表"
},
{
"incode": "220",
"isdist": 1,
"remark": "zbzl",
"value": "整备质量"
},
{
"incode": "221",
"isdist": 0,
"remark": "wkcc",
"value": "外廓尺寸"
}
],
"isdist": 0,
"value": "整车"
}
],
"value": "安检检测项目"
},
{
"children": [
{
"children": [
{
"incode": "307",
"isdist": 0,
"remark": "wg",
"value": "外观检测"
},
{
"incode": "308",
"isdist": 0,
"remark": "obd",
"value": "OBD检测"
},
{
"incode": "309",
"isdist": 0,
"remark": "hbgc",
"value": "环保过车"
}
],
"isdist": 0,
"value": "通用"
},
{
"children": [
{
"incode": "304",
"isdist": 0,
"remark": "sds",
"value": "双怠速"
},
{
"incode": "305",
"isdist": 0,
"remark": "wtgk",
"value": "稳态工况"
},
{
"incode": "306",
"isdist": 0,
"remark": "stgk",
"value": "简易瞬态工况"
}
],
"isdist": 0,
"value": "汽油车"
},
{
"children": [
{
"incode": "301",
"isdist": 0,
"remark": "yd",
"value": "滤纸式烟度"
},
{
"incode": "303",
"isdist": 0,
"remark": "jzjs",
"value": "加载减速"
},
{
"incode": "302",
"isdist": 0,
"remark": "btgyd",
"value": "不透光烟度"
}
],
"isdist": 0,
"value": "柴油车"
}
],
"value": "环检检测项目"
}
]页面代码： 采用三层循环，依次加载显示视图。
{{ card.value }}
{{ item.value}}
{{ items.value}}
实现效果代码：
//实现组内全选和不全选
handleCheckAllChange(val,row) {
if(val=='1'){
row.forEach(item => {
this.$set(item, 'isdist', 1);
})
}else{
row.forEach(item => {
this.$set(item, 'isdist', 0);
})
}
},如果保存时，数据结构为 202,203,204,205,206,207,220；那么可以在保存事件触发时，获取到所有勾选的选项,代码如下：
this.abilityincode = '';
this.options.forEach(element =>{
element.children.forEach(item =>{
item.children.forEach(itemt=> {
if(itemt.isdist === 1){
this.abilityincode += itemt.incode+',';
}
});
})
});
this.abilityincode =this.abilityincode.substring(0,this.abilityincode.length-1);到此，小功能完成。注意 :false-label="0" :true-label="1" 上图代码中"0"或者"1"，可以为1或者0，或者true或false，取决于服务器返回的数据。
记录：计算属性
v-model="red[index]"
computed: { //分组名数据值的设置
red() { //v-model="red[index]" red：计算函数 index传某组的第几个
let statusArr = new Array();
this.options.forEach(item=>{
item.children.forEach(items=> {
let status = 1;
items.children.forEach(itemt=> {
if(itemt.isdist === 0) {
status = 0;
}
});
statusArr.push(status);
});
});
console.log(JSON.stringify(statusArr)) //[1,0,0,0,0,0,0,0,0,0,0,0,0,0]
return statusArr;
}
}