一、场景
采用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)
        }
      })
    },
Logo

快速构建 Web 应用程序

更多推荐