js将列表数据融入树形结构数据
将用户数据和部门数据构建成tree(树形结构),用于tree组件渲染。3、融入部门树,构成部门用户树。采用ruoyi-vue框架。1、将部门数据构建成部门树。
·
一、场景
采用ruoyi-vue框架
将用户数据和部门数据构建成tree(树形结构),用于tree组件渲染
二、方案
1、将部门数据构建成部门树
部门树结构:
[{
"id": 1,
"label": "xxx部门1",
"children": [......]
},
{
"id": 2,
"label": "xxx部门2",
"children": [{
"id": 3,
"label": "xxx部门2-1",
}]
},
......
]
2、将用户列表
[{
userId: xxx,
deptId: xxx,
userName: xxx
}, {
userId: xxx,
deptId: xxx,
userName: xxx
}]
3、融入部门树,构成部门用户树
makeUserTree() {
let deptTree = xxxx(具体结构如上)
//请求用户数据
let users = [xxxxxxx]
//用户列表字段重建
for (let i in userLists) {
const obj = {
pid: null,
id: null,
uid: null,
label: null,
}
if (res.rows[i].deptId == null || res.rows[i].deptId == "") {
obj.pid = -1
} else {
obj.pid = res.rows[i].deptId
}
//与部门id做区分u_,方便后续选人
obj.id = "u_" + res.rows[i].userId
obj.uid = "u_" + res.rows[i].userId
obj.label = res.rows[i].userName
this.userList.push(obj)
}
this.mapTree(deptTree)
//最终要获取的数据
this.treeData = deptTree
},
//构建tree
mapTree(deptTree) {
deptTree.forEach(ditem => { //遍历树 拼入相应的user
this.userList.forEach(uitem => {
//部门id和用户绑定的部门id
if (ditem.id == uitem.pid && ditem.uid == null) {
if (!ditem.children) {
ditem.children = []
}
ditem.children.push(uitem)
}
})
if (ditem.children) {
//递归
this.mapTree(ditem.children)
}
})
},
更多推荐
已为社区贡献1条内容
所有评论(0)