后台返回树结构的全部数据前端处理成树结构的数据

html 结构

<el-tree ref="tree" class="dept-tree" :highlight-current="true" :data="treeList" :props="defaultProps" @node-contextmenu="showMenu" node-key="id" default-expand-all @node-click="noteClick" :expand-on-click-node="false">
</el-tree>

data

treeList: [],           // 处理后的树结构数据
defaultProps: {
    children: 'children',   // 子集字段
    label: 'name'           // 树显示出来的字段
},

methods 方法

 getTree(){this.$post("/api/pc/RepositoryController/findAllRepository", {}, (data) => {let list = data.repositoryList || []
        // 拼接 name 把想要的字段拼接显示
        list.map(item=>{item.name =`${item.area}-${item.area}`}
             })
             // 调用下面的函数 处理成树结构
             this.treeList = this.getChildren(list, null, [])         
        })
    },
    
getChildren(arr, parentId, result){arr.map((item, index) => {if(item.parentId == parentId){let children = this.getChildren(arr, item.id, [])
            if(children.length){item.children = children} 
             result.push(item)
        }
    })
    return result
   },