js把后端返回的数组类型(不具有树形结构但有关联性)处理为树形结构
当我们做树形图时例如element ui tree组件
我们所需要的数据格式是这样的
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
}, {
label: '一级 2',
children: [{
label: '二级 2-1',
children: [{
label: '三级 2-1-1'
}]
}, {
label: '二级 2-2',
children: [{
label: '三级 2-2-1'
}]
}]
}, {
label: '一级 3',
children: [{
label: '二级 3-1',
children: [{
label: '三级 3-1-1'
}]
}, {
label: '二级 3-2',
children: [{
label: '三级 3-2-1'
}]
}]
}],
具有父集和子集环环相套
但是有的时候后端返回的格式可能是这样的
data: function () {
return {
infotree: [
{
iD: "",
index: 0,
parentIndex: -1,
name: "世界",
type: "EPT_Folder",
},
{
iD: "",
index: 1,
parentIndex: 0,
name: "地形倾斜",
type: "EPT_Folder",
},
{
iD: "",
index: 2,
parentIndex: 1,
name: "拉卜楞镇地形3DT20210129ALL",
type: "EPT_Scene",
},
{
iD: "",
index: 3,
parentIndex: 1,
name: "",
type: "EPT_Scene",
},
{
iD: "",
index: 4,
parentIndex: 1,
name: "夏河影像202102260117_3DT",
type: "EPT_Scene",
},
{
iD: "",
index: 5,
parentIndex: 1,
name: "兰州市地形L17_20210722",
type: "EPT_Scene",
},
{
iD: "",
index: 6,
parentIndex: 1,
name: "甘肃省影像20210812",
type: "EPT_Scene",
},
{
iD: "",
index: 7,
parentIndex: 1,
name: "L19地形影像_20210722",
type: "EPT_Scene",
},
{
iD: "",
index: 8,
parentIndex: -1,
name: "L19地形影像_20210722",
type: "EPT_Scene",
},
{
iD: "",
index: 9,
parentIndex: 8,
name: "L19地形影像_20210722",
type: "EPT_Scene",
},
{
iD: "",
index: 10,
parentIndex: 9,
name: "L19地形影像_20210722",
type: "EPT_Scene",
},
],
};
},
后端把所有的数据都返回来了 数据之间有关联性
此数据就是 对象中parentIndex 就是他父级的index并且第一级的index是等于-1的
那么我们就可以写了
先处理一下第一级
//最后新的数组
let NewMenu = [];
let that = this;
//获取第一级 根据parentIndex==-1
for (let index in this.infotree) {
if (this.infotree[index].parentIndex == -1) {
NewMenu.push(this.infotree[index]);
}
}
现在我们第一级就已经出来了
然后我们需要定义一个函数,从第一级一层一层的往下添加数据
//循环的方法
//第一个参数 需要插入子集的那个数组
//第二个参数 总数据 (在这里 就是后端返给我们的数据 this.infotree)
circulation(data, bigdata) {
let that = this;
//循环需要插入子集的那个数组
for (let index in data) {
//我们需要先判断他到底有没有下一级才能把他的下一级插入进去
//所以我们要定义另外一个函数 isHaveChildren
//返回值 isHaveChildren.isHave 是否有下一级
//返回值 isHaveChildren.children 下一级
let isHaveChildren = that.isHaveChildren(
data[index].index,
that.infotree
);
//如果有下一级
if (isHaveChildren.isHave) {
//下一级内容为 isHaveChildren.children
data[index].children = isHaveChildren.children;
//再次走这里
//是因为我们不知道到底有几层
//所以我们要判断我的下一级是否还有下一级所以再次调用这个函数
that.circulation(data[index].children, that.infotree);
}
}
},
判断是否有下一级的函数
//第一个参数 父级的index 因为我们数据的parentIndex 就是父级的index
//第二个参数 需要判断的数据也就是 总数据 (在这里 就是后端返给我们的数据 this.infotree)
isHaveChildren(index, data) {
//默认没有下一级
let isHave = false;
let that = this;
//下一级
let children = [];
for (let index1 in data) {
//用父级index和数据对比 如果有就是有下一级
if (data[index1].parentIndex == index) {
//有下一级
isHave = true;
//把这个下一级push到我们定义的 存放下一级的数组里
children.push(data[index1]);
}
}
//return 出去
//isHave就是是否有下一级
//children就是下一级
return {
isHave,
children,
};
},
经过这一系类的判断 插入
最后得到的结果就是这样
完整代码
<template></template>
<script>
export default {
data: function () {
return {
infotree: [
{
iD: "",
index: 0,
parentIndex: -1,
name: "世界",
type: "EPT_Folder",
},
{
iD: "",
index: 1,
parentIndex: 0,
name: "地形倾斜",
type: "EPT_Folder",
},
{
iD: "",
index: 2,
parentIndex: 1,
name: "拉卜楞镇地形3DT20210129ALL",
type: "EPT_Scene",
},
{
iD: "",
index: 3,
parentIndex: 1,
name: "",
type: "EPT_Scene",
},
{
iD: "",
index: 4,
parentIndex: 1,
name: "夏河影像202102260117_3DT",
type: "EPT_Scene",
},
{
iD: "",
index: 5,
parentIndex: 1,
name: "兰州市地形L17_20210722",
type: "EPT_Scene",
},
{
iD: "",
index: 6,
parentIndex: 1,
name: "甘肃省影像20210812",
type: "EPT_Scene",
},
{
iD: "",
index: 7,
parentIndex: 1,
name: "L19地形影像_20210722",
type: "EPT_Scene",
},
{
iD: "",
index: 8,
parentIndex: -1,
name: "L19地形影像_20210722",
type: "EPT_Scene",
},
{
iD: "",
index: 9,
parentIndex: 8,
name: "L19地形影像_20210722",
type: "EPT_Scene",
},
{
iD: "",
index: 10,
parentIndex: 9,
name: "L19地形影像_20210722",
type: "EPT_Scene",
},
],
};
},
async mounted() {
let NewMenu = [];
let that = this;
//获取第一级 根据parentIndex==-1
for (let index in this.infotree) {
if (this.infotree[index].parentIndex == -1) {
NewMenu.push(this.infotree[index]);
}
}
//循环
this.circulation(NewMenu, this.infotree);
//处理之后的
console.log(NewMenu);
},
methods: {
//循环的方法
//第一个参数 需要插入的地方
//第二个参数 总数据
circulation(data, bigdata) {
let that = this;
//循环要插入的地方
for (let index in data) {
//返回值 isHaveChildren.isHave 是否有下一级
//返回值 isHaveChildren.children 下一级
let isHaveChildren = that.isHaveChildren(
data[index].index,
that.infotree
);
//如果有下一级
if (isHaveChildren.isHave) {
//下一级内容为 isHaveChildren.children
data[index].children = isHaveChildren.children;
//再次走这里
that.circulation(data[index].children, that.infotree);
}
}
},
// 判断是否有子集
//第一个参数 父级的id
//第二个参数 需要判断的数据
isHaveChildren(index, data) {
//默认没有下一级
let isHave = false;
let that = this;
//下一级
let children = [];
for (let index1 in data) {
//用父级id和数据对比 如果有就是有下一级
if (data[index1].parentIndex == index) {
isHave = true;
children.push(data[index1]);
}
}
return {
isHave,
children,
};
},
},
};
</script>
<style>
</style>
点个关注支持一下我吧
