首页 > 其他分享 >扁平化数据的树形化(转换包含三级目录)

扁平化数据的树形化(转换包含三级目录)

时间:2022-10-10 15:01:20浏览次数:38  
标签:扁平化 Tree item 树形 组件 数据 children 三级

在用vue+elementUI做管理系统时会使用到UI组件库中的Tree组件,就需要将获取到的扁平的数据转换成树形数据才好使用组件库中的Tree,这个函数可以转成三级Tree,函数如下

// 扁平化数据树形化
    transTree(arr, rootCode) {
      // 定义存储树形数据的空数组
      const tree = [];
      arr.forEach(item => {
        // 判断是否是父节点
        if (item.parentcode == rootCode) {
          const children = this.transTree(arr, item.code);
          children.length > 0 ? (item.children = children) : 0;
          tree.push(item);
        }
      })

      return tree;
    },

这是转换前后的数据对比

 

 在使用Tree组件时可以专门给它使用一个参数记录需要渲染的数据,这样子就可以避免在处理需要渲染的数据会污染源数据

 

标签:扁平化,Tree,item,树形,组件,数据,children,三级
From: https://www.cnblogs.com/grapefruitZ/p/16775737.html

相关文章

  • 2022 ICPC网络赛(二) G Good Permutation(树形DP 排列组合 建树)
    2022ICPC网络赛(二)GGoodPermutation题意:​ 现在有一个长度为n的排列,现在给出m组约束条件,请问有多少种方案满足这个约束条件。​ 约束条件:给出l,r,表示\([l,r]\)这个......
  • 产品自主组装树形结构CSS实现(手机、电脑自适应)
    源码下载​​​​​​......
  • Spring源码-Spring为什么使用三级缓存解决循环依赖
    Spring使用三级缓存,分别是singletonObjects,earlySingletonObjects,singletonFactories来解决循环依赖问题。但是用二级缓存就可以解决循环依赖了。为什么要使用三级缓存呢?因......
  • 0928模拟赛 树形熔断器
    在计算以\(u\)为根的子树的答案时,只需要知道会经过\(u\)的方案的和,再加上儿子的答案。对于子树内的点\(v\),假设它是\(u\)在\(son\)方向的儿子,要让它成为最小值,由......
  • spring三级缓存解决循环依赖
    创建单例bean主要经过三个步骤:1.实例化,2.填充属性,3:初始化一级缓存:singletonObjects,存放经过初始化后的bean。当通过名字获取bean的时候,如果这个名字对应的bean在一级缓存......
  • 怎么写出数组扁平化?如何手写flat函数
    手写一下数组扁平化flat(),但是发现居然没有一个能够完成写出来,所以打算总结一下如果遇到了数组扁平化的题目(也可以叫做手动封装flat()方法),到底应该怎么写,怎么写可......
  • 八、简单树形结构
    树是啥?不就是树吗?实际上,我们今天所说的树,是一种数据结构。它叫做树形结构,实际上长这样:树今天的概念比较多,也很繁杂,大家看看就行,没必要完全记住,只要知道大概的意思......
  • 数组扁平化
    数组扁平化:多维数组变一维数组。方式1:ES6中的flat函数letarr=[1,2,3,[4,5,6,[7,9,8]]];console.log(arr.flat(Infinity));方式2:扩展运算符vararr=[1,2......
  • layui懒加载树形表格
    最近在使用layui做懒加载的树形表格,所以分享下demo使用最新的3.0稳定版,修复了许多小问题gitee地址:https://gitee.com/ele-admin/treetable-lay下载地址:https://......
  • js 树形结构 数组 互转
    letarr=[{"categoryCode":"90000","categoryCnName":"A1级别","id":"111","bdictDesc":"测试1","pid":"0","validStatus"......