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

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
   },