先看下数据
点击查看
const nodes = [
{
id: 1,
label: "一级 1",
pid: 0,
children: [
{
id: 4,
pid: 1,
label: "二级 1-1",
}
],
},
{
id: 2,
label: "一级 2",
pid: 0,
},
{
id: 3,
label: "一级 3",
pid: 0,
children: [
{
id: 7,
label: "二级 3-1",
pid: 3,
children: [
{
id: 9,
label: "4级 4-1",
pid: 7,
},
]
},
{
id: 8,
label: "二级 3-2",
pid: 3,
},
],
},
];
开始处理,找到那个值处于哪条线上
// 找到树上的一条线
function findIndexArray(data, id, indexArray) {
let arr = Array.from(indexArray)
for (let i = 0, len = data.length; i < len; i++) {
arr.push({ id: data[i].id, label: data[i].label ,pid:data[i].pid})
if (data[i].id === id) {
return arr
}
let children = data[i].children
if (children && children.length) {
let result = findIndexArray(children, id, arr)
if (result)
return result
}
arr.pop()
}
return false
}
// console.log(findIndexArray(nodes, 9, [])) =>
[
{ id: 3, label: '一级 3', pid: 0 },
{ id: 7, label: '二级 3-1', pid: 3 },
{ id: 9, label: '4级 4-1', pid: 7 }
]
这条线上的数据拿到了,那么开始吧线上的数据构成一条树
// 把线构成树
function toTree(data) {
let result = []
if (!Array.isArray(data)) {
return result
}
// data.forEach(item => {
// delete item.children
// })
let map = {}
data.forEach(item => {
map[item.id] = item
})
data.forEach(item => {
let parent = map[item.pid]
if (parent) {
(parent.children || (parent.children = [])).push(item)
} else {
result.push(item)
}
})
return result
}
console.log(toTree(findIndexArray(nodes, 9, []))[0])
/**
{
id: 3,
label: '一级 3',
pid: 0,
children: [{
id: 7,
label: '二级 3-1',
pid: 3,
children: [
{
id: 9,
label: "4级 4-1",
pid: 7,
},
]
}]
}
*/
笔记,解构树
// 树状数据添加
recursiveget(treedata) {
for (var i in treedata) {
if (treedata[i].type == 'area') {
treedata[i].icon = 'el-icon-map-location'
this.recursiveget(treedata[i].children)
this.defaultTree.push(treedata[i].id)
}else {
treedata[i].icon = 'el-icon-school'
this.recursiveget(treedata[i].children)
}
}
return treedata
},