递归数据类型常见于菜单数据结构,组织树形结构,今天我们来了解一个简单的方法来渲染这种递归数据结构的数据。
先来看一段树组件的数据
[{
label: '一级 1',
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'
}]
}]
}],
可以看出,不管是父节点还是子节点所有字段都是一样的,对于这样的数据我们应该如何渲染?
上代码
created() {
this.query()
getTree().then((res) => {
if (res.code === '200') {
console.log(res.data)
this.tree = this.filterTree(res.data)
}
})
},
说一下这段代码,在created生命周期函数获取树形结构的数据,然后调用filterTree()方法,并将接口获取的数据传递过去。
filterTree(tree) {
return tree.map(item => {
item = {
label: item.orgName,
orgId: item.orgId,
children: item.children
}
if (item.children.length > 0) {
item.children = this.filterTree(item.children)
}
console.log(this.tree)
return item
})
},
这个方法比较简便的地方在于要是有chidren的话自己调用自己,就不用写很多的循环,写起来非常简便也便于理解。要是你们写树形图基本可以用我的这个代码。
看到这里啦,还是点个赞支持一下啦!