Vue项目最少代码生成树形结构(无限嵌套),生成导航栏.

数据 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": []
                    }
                ]
            }
        ]
    }
]