Id，Pid生成树型结构

时间：2023-05-27 20:07:01 e24f传感器

在某些情况下，后端可能只返回一个数据列表，而不返回完整的树结构。

问题描述：

那么，前端需要如何转换呢？
后端数据返回如下：

//从后端获取的数据列表： [     { 
                 "id": 1,         "resourceCodeId": "a800c24f-91c2-4ebe-93c4-58bd4597172b",         "resourceName": "账户管理",         "parentId": null,         "path": "/accountManagement",         "icon": "el-icon-s-tools"     },     { 
                 "id": 3003,         "resourceCodeId": "e57d1f74-e1e3-4fbd-8fc4-7d57e2d2c097",         "resourceName": "角色管理",         "parentId": "a800c24f-91c2-4ebe-93c4-58bd4597172b",         "path": "/accountManagement/role",         "icon": ""     },         { 
                 "id": 5,         "resourceCodeId": "412a3255-347a-46d3-aa61-506b92f5d35e",         "resourceName": "员工管理",         "parentId": "a800c24f-91c2-4ebe-93c4-58bd4597172b",         "path": "/accountManagement/staff",         "icon": ""     }, ]

解决方案：

可以根据Id,Pid转换树形结构

  // 获取后端数据列表后，数组和父级parentId引入自定义方法   orgStructureFecht() { 
            accountAPI.orgStructure().then(res => { 
        
				if (res.code == 0) { 
        
					this.data = this.getTree(res.data, null)
					console.log('🚀 ~ :',this.data)
				}
			})
		},
		getTree(data, parentId) { 
        
			let result = []
			let temp
			for (let i = 0; i < data.length; i++) { 
        
				/*if (data[i].nameZhCn != null) { data[i].label = data[i].nameZhCn }*/
				if (data[i].parentId== parentId) { 
        
					temp = this.getTree(data, data[i].resourceCodeId)
					if (temp.length > 0) { 
        
						data[i].children = temp
					}
					result.push(data[i])
				}
			}
			return result
		}

ok！完美解决

下面就是通过id,pid生成的树形结构了

{ 
        
        "id": 1,
        "resourceCodeId": "a800c24f-91c2-4ebe-93c4-58bd4597172b",
        "resourceName": "账户管理",
        "parentId": null,
        "path": "/accountManagement",
        "icon": "el-icon-s-tools",
        "children": [
            { 
        
                "id": 5,
                "resourceCodeId": "412a3255-347a-46d3-aa61-506b92f5d35e",
                "resourceName": "员工管理",
                "parentId": "a800c24f-91c2-4ebe-93c4-58bd4597172b",
                "path": "/accountManagement/staff",
                "icon": ""
            },
            { 
        
                "id": 3003,
                "resourceCodeId": "e57d1f74-e1e3-4fbd-8fc4-7d57e2d2c097",
                "resourceName": "角色管理",
                "parentId": "a800c24f-91c2-4ebe-93c4-58bd4597172b",
                "path": "/accountManagement/role",
                "icon": ""
            },
        ]
    }

锐单商城拥有海量元器件数据手册、IC替代型号，打造电子元器件IC百科大全！

Id，Pid生成树型结构

相关文章