TS的el-tree数据处理方式,递归

javascript 复制代码
private async initData() {
    let res = await GetAllOranizationInfo()
    console.log('res数据', res)
    //获取递归方法return回来的数据
    this.treeData = this.organData(res, null)
    console.log('tree数据', this.treeData)
  }
javascript 复制代码
private organData(allData: any[], topparentId: string): TreeNodeDC[] {
    let res: TreeNodeDC[] = []
    // 通过使用filter方法,从res数据中筛选出 用户的parentId  等于 大组织id的数据 , 并将结果保存在filters数组中。
    //第一次传入的是null,匹配第一个大的组织
    let filters = allData.filter((o) => o.parentId === topparentId)
    console.log('filter之后的res,', filters)
    //对匹配上的数据进行循环操作
    for (let index = 0; index < filters.length; index++) {
      //把值放到node里形成新的对象
      const element = filters[index]
      //默认组织,因为第一个开头传的null,第一次匹配到的就是最大的组织
      let node: TreeNodeDC = {
        id: element.id,
        userId: element.userId,
        label: element.name,
        parentGroupId: element.parentId,
        index: element.index,
        children: [],
        type: 'group'
      }
      //type==0是组织(group),type==1是用户(people)
      if (element.type === 1) {
        node.type = 'people'
      }
      //递归,调用自身方法,传入 第1(n)次获取到的数据的id,然后走流程
      let nodeChildren = this.organData(allData, node.id)
      console.log('nodeChildren,', nodeChildren, allData, node.id)
      // 通过使用filter方法,从res数据中筛选出 小用户的parentId  等于 大组织id的数据 , 并将结果保存在filters数组中
      //这次的就是子级,用户+组织的形式
      //对匹配上的数据进行循环操作
      //排序
      node.children = nodeChildren.sort(function(a, b) {
        return a.index - b.index
      })
      //返回node数组
      res.push(node)
    }

    return res
  }
相关推荐
“AI国潮设计-小江”12 分钟前
【AIGC实战】Python+SDXL打造“潮汕英歌舞IP”万能立牌插件,批量生成“发财元宝蛋糕”视觉营销方案(附源码)
开发语言·人工智能·python·prompt·aigc
孟健35 分钟前
Kimi K3.1 Pro 编程实测:3个月27万行代码,每年1.7万预算下如何9分钟修好顽固Bug
前端·开源·ai编程
lhbweilai44 分钟前
分析FreeRTOS内核对象API的源码实现(八)
c语言·开发语言·stm32·单片机
努力努力再努力wz1 小时前
【C++高阶系列】C++20 协程底层原理:函数为什么能暂停?从状态机到 Task,彻底串起挂起、恢复与协程调度
开发语言·c++·c++20·1024程序员节
inksci1 小时前
在线编辑表格,功能强大,json互转
前端·javascript·html
咩咩啃树皮1 小时前
JavaScript 中 this 指向为什么总在变?
开发语言·前端·javascript
程序员清风1 小时前
算法题中的边界条件、测试与调试
开发语言·算法·kotlin
砚底藏山河1 小时前
python量化实操:冷热分层存储
java·开发语言·python·金融
十五年专注C++开发1 小时前
pybind11:一个跨C++和Python平台的编程库
开发语言·c++·python·pybind11
CodeYp20191 小时前
第11讲:stack 和 queue
开发语言·c++·queue·stack