vue数据处理,父子相关数据处理
数据处理,父子相关数据处理
目的 实现完成Antd IView 等等 树形控件的显示
需要的数据格式就是
就是每个节点的数据都是放在children里面的
处理方法:
首先判断依据就是 我的父节点(parentId)别的indexId就证明是有关系的
所以我们首先要把所有的父节点都找出来,也就是我的parentId没有和其余indexid相同的,就证明我就是最外层的父节点。(这样的情况会出现多个父节点就是有多棵树了)
还有就是要是你的项目里面 就只有一个父节点,那你就把数据写死,要是没有这个父节点,就全部没有数据
注意: 里面的parentIndexCode和indexCode,分别对于父子数据的对应关系,还有就是需要整理出来数据,自己往上写,最后会整个return出来
// 处理相应的父子数据
toTreeData(data) {
let resData = data;
let tree = [];
for (let i = 0; i < resData.length; i++) {
if (resData.filter(item => resData[i].parentIndexCode == item.indexCode).length == 0) {
let obj = {
value: resData[i].indexCode,
key: resData[i].indexCode.toString(),
title: resData[i].name,
indexCode: resData[i].indexCode,
parentIndexCode: resData[i].parentIndexCode,
slots: {
icon: 'global',
},
children: []
};
tree.push(obj);
// resData.splice(i, 1);
}
}
run(tree);
function run(chiArr) {
if (resData.length !== 0) {
for (let i = 0; i < chiArr.length; i++) {
for (let j = 0; j < resData.length; j++) {
if (chiArr[i].indexCode == resData[j].parentIndexCode) {
let obj = {
value: resData[j].indexCode,
key: resData[j].indexCode,
title: resData[j].name,
indexCode: resData[j].indexCode,
slots: {
icon: 'environment',
},
parentIndexCode: resData[j].parentIndexCode,
children: []
};
chiArr[i].children.push(obj);
resData.splice(j, 1);
j--;
}
}
run(chiArr[i].children);
}
}
}
return tree;
},
咫尺远近却无法靠近的那个你,才敢让你发觉你并不孤寂