代码中树结构的构造,有时候我们使用第三方插件,正常要把后台返回来的数组构造成插件所需要的格式
常规结构如下:
1.title:名称
1.key:键值
1.children:儿子树
1.expand:是否展开
1.isLeaf:是否是叶子节点
代码构造如下:
let citys = [
{
name:'西安',
key:'xian',
children:[{
name:'高新区',
key:'高新',
children:[
{
name:'小寨',
key:'xiaozhai',
children:[]
},
{
name:'纬一街',
key:'weiyiStreet',
children:[]
}
]
}]
},
{
name:'咸阳',
key:'xianyang',
children:[{
name:'新区',
key:'xin',
children:[
{
name:'彩虹桥',
key:'caihong',
children:[]
},
{
name:'下马河',
key:'xiama',
children:[]
}
]
}]
}
]
组装函数如下:
function makeTree(citys){
let datas = citys;
datas.forEach(item => {
const extra = {
title:item.name,
key:item.key,
isLeaf:!item.children.length
}
Object.assign(item,extra);
if (!extra.isLeaf) {
makeTree(item.children)
}
})
}
makeTree(citys)
总结:我们可以用组装好的数组去进行 目录树的渲染,根据对应设置的属性的true或者false去控制目录树的展示!
