数据 treeList
id 必须为唯一,parentId 与id关联,parentId 和 id 一样就是其子目录,parentId 为null默认为第一层
this.treeList = [
{
"id": 1, // id，与parentId关联
"title": "目录一",
"parentId": null,//父级id null为第一级,与id做关联查询父子级关系
},
{
"id": 2,
"title": "目录二",
"parentId": 1,
},
{
"id": 3,
"title": "目录三",
"parentId": 2,
}
]
方法 getTreeList()
getTreeList(id) {
const treeList = this.treeList
// treeList变量数据
// 第一次以后：根据id去查询parentId相同的（相同为子数据）
// 第一次：查找所有parentId为null的数据组成第一级
const child = treeList.filter((item) => item.parentId == id);
// 第一次：循环parentId为-1数组
return child.map((item) => ({
...item,
// 当前存在id（id与parentId应该是必须有的）调用getTreeList() 查找所有parentId为本id的数据
// childs字段写入
children: this.getTreeList(item.id),
}));
}
调用
调用getTreeList() 传入null作为树形第一层
this.treeData = this.getTreeList(null)
结果
[
{
"id": 1,
"title": "目录一",
"parentId": null,
"children": [
{
"id": 2,
"title": "目录二",
"parentId": 1,
"children": [
{
"id": 3,
"title": "目录三",
"parentId": 2,
"children": []
}
]
}
]
}
]
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
