vue数据处理:把数组处理成适用于tree组件的数据

例:
数据处理前:
[{"id":1,"pid":0,"name":"默认维度","type":"0"},
{"id":2,"pid":1,"name":"上海科技有限公司","type":"1"},
{"id":3,"pid":2,"name":"北京科技有限公司","type":"1"},
{"id":4,"pid":2,"name":"北京科技有限公司","type":"1"},
{"id":117,"pid":4,"name":"测试部门","type":"2"},
{"id":5,"pid":2,"name":"徐州科技有限公司","type":"1"},
{"id":6,"pid":2,"name":"重庆科技有限公司","type":"1"},
{"id":114,"pid":12,"name":"需求分析师","type":"3"},
{"id":7,"pid":2,"name":"人力资源部","type":"2"},
{"id":100,"pid":7,"name":"修改岗位测试3","type":"3"},
{"id":101,"pid":7,"name":"添加岗位测试","type":"3"},
{"id":102,"pid":7,"name":"添加岗位测试2","type":"3"},
{"id":103,"pid":8,"name":"java开发","type":"3"},
{"id":107,"pid":7,"name":"HR","type":"3"},
{"id":8,"pid":2,"name":"产品研发部","type":"2"},
{"id":10,"pid":8,"name":"统一岗位","type":"3"},
{"id":9,"pid":2,"name":"销售部","type":"2"},
{"id":108,"pid":9,"name":"销售顾问","type":"3"},
{"id":11,"pid":2,"name":"深圳科技有限公司","type":"1"},
{"id":12,"pid":2,"name":"咨询服务部","type":"2"},
{"id":106,"pid":12,"name":"咨询顾问","type":"3"}]

数据处理后:
[
{"id":1,
"pid":0,
"name":"默认维度",
"type":"0",
"children":
[
{
"id":2,
"pid":1,
"name":"上海科技有限公司",
"type":"1",
"children":
[
{
"id":3,
"pid":2,
"name":"北京科技有限公司",
"type":"1",
"children":[]
},
{
"id":4,
"pid":2,
"name":"北京科技有限公司",
"type":"1",
"children": [
{"id":117,"pid":4,"name":"测试部门","type":"2","children":[]}]},
{"id":5,"pid":2,"name":"徐州科技有限公司","type":"1","children":[]},
{"id":6,"pid":2,"name":"重庆科技有限公司","type":"1","children":[]},
{"id":7,"pid":2,"name":"人力资源部","type":"2","children":[{"id":100,"pid":7,"name":"修改岗位测试3","type":"3","children":[]},
{"id":101,"pid":7,"name":"添加岗位测试","type":"3","children":[]},
{"id":102,"pid":7,"name":"添加岗位测试2","type":"3","children":[]},
{"id":107,"pid":7,"name":"HR","type":"3","children":[]}]},
{"id":8,"pid":2,"name":"产品研发部","type":"2","children":[{"id":103,"pid":8,"name":"java开发","type":"3","children":[]},
{"id":10,"pid":8,"name":"统一岗位","type":"3","children":[]}]},
{"id":9,"pid":2,"name":"销售部","type":"2","children":[{"id":108,"pid":9,"name":"销售顾问","type":"3","children":[]}]},
{"id":11,"pid":2,"name":"深圳科技有限公司","type":"1","children":[]},
{"id":12,"pid":2,"name":"咨询服务部","type":"2","children":[{"id":114,"pid":12,"name":"需求分析师","type":"3","children":[]},
{"id":106,"pid":12,"name":"咨询顾问","type":"3","children":[]}
]
}
]
}
]
}
]

接下来进行数据处理:
1.将要处理的数据赋值给content变量,和声明处理后的数据的变量

let content = `${数据处理前的list}`
var newlist = []

2.给每条数据加上children属性

for (var a = 0; a < content.length; a++) {
content[a].children = []
}

3.拿出最高层级的元素----pid数值最小则层级最高,此处直接取0,省去很多麻烦的数据操作

for (var b = 0; b < content.length; b++) {
if (content[b].pid === 0) {
newlist = content.splice(b, 1)
}
}

4封装递归方法并执行

function deepSort (list, content) {
var content1 = []
for (var m = 0; m < list.length; m++) {
for (var n = 0; n < content.length; n++) {
if (list[m].id === content[n].pid) {
list[m].children.push(content[n])
} else {
content1.push(content[n])
}
}
}
for (var o = 0; o < list.length; o++) {
deepSort(list[o].children, content1)
}
}

执行:

deepSort(newlist, content)

得到的newlist就是我们要的处理后的数据。
至此,完毕~

posted on 2019-05-09 09:57  子墨'  阅读(907)  评论(0编辑  收藏  举报

导航