效果图:
功能描述: 图中所展示数据,全是从服务器获取的数据动态加载,实现点击全选,不全选,加粗字体为父节点,后面为子节点。
数据结构:
[
{
"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": "环检检测项目"
}
]
页面代码: 采用三层循环,依次加载显示视图。
<el-card class="box-card" v-for="card in options">
<div slot="header" class="clearfix">
<span>{{ card.value }}</span>
</div>
<div class="text item" v-for="(item,index) in card.children">
<el-row :gutter="24" style="margin-bottom: 5px;margin-top: 5px">
<el-col :span="4">
<el-checkbox
style="margin: 0;"
:false-label="0"
:true-label="1"
v-model="item.isdist"
@change="checked=>handleCheckAllChange(checked,item.children)"
class="labs"><b>{{ item.value}}</b></el-checkbox>
</el-col>
<el-col :span="20">
<el-checkbox
style="margin: 0;"
:false-label="0"
:true-label="1"
:key="items.incode"
v-model="items.isdist"
v-for="items in item.children"
@change.native="leftSelected()"
class="labs">{{ items.value}}</el-checkbox>
</el-col>
</el-row>
</div>
</el-card>
实现效果代码:
//实现组内全选和不全选
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; } }