效果展示:
需求 展示各部门下的其他部门,并展示部门下的人
下面是后台返回的数据结构:
可以看到在每一层children的同级新增了一个数组 userChildren
children代表部门的数据集合
userChildren代表部门下的人员集合
下面上代码:
// 获取树形控件数据
getDeptTree(){
deptTree().then((res)=>{
this.data = res.data
this.data.forEach((item)=>{
item.children.forEach((list)=>{
list.children.forEach((params)=>{
if(params.userChildren.length > 0){
params.userChildren.forEach((rows)=>{
//这里是userChildren结构里要展示的数据是nickName返回,
//我们所需要的是label 所以转化
rows.label = rows.nickName
})
params.children = params.userChildren
}
})
})
})
})
},
<el-tree :data="data" class="mar-r70" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
完事!!这就实现啦