js将列表数据融入树形结构数据

最新推荐文章于 2026-06-19 08:48:50 发布

原创最新推荐文章于 2026-06-19 08:48:50 发布 · 535 阅读

9 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#javascript #前端 #vue.js

本文介绍了如何在ruoyi-vue框架下，通过构建部门树和用户列表，实现部门用户树的渲染。首先构建部门树，然后将用户数据与部门关联，形成部门用户树结构，最后通过mapTree函数递归地将用户添加到部门节点中。

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