描述:树形图结构的三维数值,过滤掉子项的一些数据(通过勾选),返回新的三位数组。
难点:数组的每项结构不一样,有的含有children,有的不含children,具体看下方数据结构。
解决方案:两层foreach 循环,最里面一层用filter,貌似filter无论几层循环,只能用在最后一层。
this.dataList = [
{
"label": "申请单",
"children": [
{
"label": "状态 : 报告"
},
{
"label": "编号 : A0003"
},
{
"label": "优先级 : 正常"
}
]
},
{
"label": "检测项目",
"children": [
{
"label": "开始循环 : 检测项目"
},
{
"label": "结束循环 : 检测项目"
},
{
"label": 1,
"children": [
{
"label": "1 : 2"
},
{
"label": "名称 : 测试"
},
{
"label": "章节号 : 001"
},
{
"label": "标准名 : 暂无"
},
{
"label": "检测值 : 小于3"
},
{
"label": "检测结论 : 1"
},
{
"label": "原始记录表 : {\"url\":\"/file/downloads/ent/dev/admin/202208/e2308666-12fe-11ed-b924-00163e0e4e24.json\",\"pdf_url\":null}"
}
]
},
{
"label": 2,
"children": [
{
"label": "名称 : 测试2"
},
{
"label": "章节号 : 002"
},
{
"label": "标准名 : 暂无"
},
{
"label": "检测值 : 大雨2"
},
{
"label": "检测结论 : 2"
}
]
}
]
},
{
"label": "申请单记录",
"children": [
{
"label": "检测日期 : 2022-08-09 00:00:00"
},
{
"label": "温度 : 18"
},
{
"label": "湿度 : 23"
},
{
"label": "大气压 : 5"
},
{
"label": "检测设备 : 华为"
},
{
"label": "重量4 : 1额"
},
{
"label": "样品测试1 : 21"
},
{
"label": "原始记录表 : 21"
},
{
"label": "报告日期 : 21"
},
{
"label": "记录1 : w而且"
},
{
"label": "申请单记录 : e1"
},
{
"label": "结论 : 21"
}
]
},
{
"label": "样品",
"children": [
{
"label": "开始循环 : 样品"
},
{
"label": "结束循环 : 样品"
},
{
"label": 1,
"children": [
{
"label": "编号 : A001"
},
{
"label": "名称 : jack"
},
{
"label": "重量 : 36"
},
{
"label": "型号 : s"
},
{
"label": "描述 : 无"
},
{
"label": "收样时间 : 2022-08-23 00:00:00"
},
{
"label": "收样人 : 9"
},
{
"label": "状态 : un_received"
},
{
"label": "原始记录表 : 21"
},
{
"label": "图片",
"children": [
{
"label": 1,
"children": [
{
"label": "filename : OIP-C (5).jpg"
},
{
"label": "url : /file/downloads/ent/dev/admin/202208/19551520-131e-11ed-af0f-00163e0e4e24.jpg"
},
{
"label": "userId : 1"
},
{
"label": "userName : 管理员"
}
]
}
]
}
]
}
]
},
{
"label": "报告",
"children": [
{
"label": "状态 : 编制"
},
{
"label": "编号 : AA0237"
},
{
"label": "样品",
"children": [
{
"label": 1,
"children": [
{
"label": "A001"
}
]
}
]
},
{
"label": "h5版报告配置 : /file/downloads/www/dev/admin/202208/2e24d146-1884-11ed-9e0c-00163e0e4e24.json"
}
]
},
{
"label": "报告二维码:widthxheight : "
},
{
"label": "当前日期 : 2022-08-11"
}
]
点击保存配置,触发事件。
const AllcheckedNodes = this.$refs.tree.getCheckedKeys(true, false);
console.log(AllcheckedNodes); // 获取所有勾选项
let newArry = []
this.dataList1.forEach((item,index) =>{
newArry[index] = item
if(item.label == '检测项目' || item.label == '样品' ){
newArry[index].label = item.label
item.children.forEach((itm,idx) =>{
newArry[index].children[idx] = itm
if(itm.children){
newArry[index].children[idx].children = itm.children.filter(i =>{
if(AllcheckedNodes.includes(i.label)){
console.log(i)
return i
}
})
}
})
}
if(item.label == '申请单'){
newArry[index].label = '申请单'
newArry[index].children = item.children.filter(i =>{
if(AllcheckedNodes.includes(i.label)){
return i
}
})
}
if(item.label == '报告'){
newArry[index].label = '报告'
newArry[index].children = item.children.filter(i =>{
if(AllcheckedNodes.includes(i.label)){
console.log(i)
return i
}
})
}
if(item.label == '申请单记录'){
newArry[index].label = '申请单记录'
newArry[index].children = item.children.filter(i =>{
if(AllcheckedNodes.includes(i.label)){
console.log(i)
return i
}
})
}
})
console.log(newArry)