数组转树形结构的两种实现

简介: 数组转树形结构的两种实现

先假设数组数据:

const arr = [
  { id: '01', name: '张大大', pid: '', job: '项目经理' },
  { id: '02', name: '小亮', pid: '01', job: '产品leader' },
  { id: '03', name: '小美', pid: '01', job: 'UIleader' },
  { id: '04', name: '老马', pid: '01', job: '技术leader' },
  { id: '05', name: '老王', pid: '01', job: '测试leader' },
  { id: '06', name: '老李', pid: '01', job: '运维leader' },
  { id: '07', name: '小丽', pid: '02', job: '产品经理' },
  { id: '08', name: '大光', pid: '02', job: '产品经理' },
  { id: '09', name: '小高', pid: '03', job: 'UI设计师' },
  { id: '10', name: '小刘', pid: '04', job: '前端工程师' },
  { id: '11', name: '小华', pid: '04', job: '后端工程师' },
  { id: '12', name: '小李', pid: '04', job: '后端工程师' },
  { id: '13', name: '小赵', pid: '05', job: '测试工程师' },
  { id: '14', name: '小强', pid: '05', job: '测试工程师' },
  { id: '15', name: '小涛', pid: '06', job: '运维工程师' }
]

递归

/**
     * json格式转树状结构
     * @param   {json}      json数据
     * @param   {String}    一级节点pid
     * @return  {Array}     数组
     */
 transListDataToTreeData(list, root) {
      const arr = [];
      // 1.遍历
      list.forEach((item) => {
        // 2.首次传入空字符串  判断list的pid是否为空 如果为空就是一级节点
        if (item.pid === root) {
          // 找到之后就要去找item下面有没有子节点  以 item.id 作为 父 id, 接着往下找
          const children = transListDataToTreeData(list, item.id);
          if (children.length > 0) {
            // 如果children的长度大于0,说明找到了子节点
            item.children = children;
          }
          // 将item项, 追加到arr数组中
          arr.push(item);
        }
      });
      return arr;
    }
transListDataToTreeData(arr,'')

对象形式

/**
     * json格式转树状结构
     * @param   {json}      json数据
     * @return  {Array}     数组
     */
    transData(arr) {
      let r = [],
        hash = {},
        i = 0,
        j = 0,
        len = a.length;
      for (; i < len; i++) {
        hash[a[i].id] = a[i];
      }
      // console.log(hash,'hash');
      for (; j < len; j++) {
        let aVal = a[j],
          hashVP = hash[aVal.pid];
        aVal.label = aVal.name;
        if (hashVP) {
          !hashVP.children && (hashVP.children = []);
          hashVP.children.push(aVal);
        } else {
          r.push(aVal);
        }
      }
      // console.log(r);
      return r;
    }
transData(arr);


相关文章
|
JavaScript 前端开发 API
vue element plus Cascader 级联选择器
vue element plus Cascader 级联选择器
2329 0
|
XML 前端开发 Java
谷粒商城笔记+踩坑(5)——商品服务-属性分组、品牌关联分类,spu+sku+分页拦截器
SPU和SKU、属性分组的增删改查、QueryWrapper的and和or用法、获取当前品牌关联的所有分类
谷粒商城笔记+踩坑(5)——商品服务-属性分组、品牌关联分类,spu+sku+分页拦截器
Vue3级联选择(Cascader)
这是一个可定制的级联选择器组件,支持多级下拉选项。主要属性包括:数据源、文本字段、值字段、后代字段、占位符文本、选择行为、间距、宽度、高度、禁用状态、清除功能、搜索功能及过滤函数等。组件可根据需求灵活配置,并支持动态更新与事件回调。在线预览和详细示例可见[这里](https://themusecatcher.github.io/vue-amazing-ui/guide/components/cascader.html)。
1355 2
Vue3级联选择(Cascader)
|
JavaScript
Vue2级联选择(Cascader)
这是一个基于 Vue 3 的级联选择组件,支持多种自定义属性,如数据源、选中项、文本字段等。提供了丰富的配置项,如层级间隙、宽度、高度、禁用状态和占位符等,便于灵活使用。组件通过监听选择变化并触发回调事件,实现了动态更新与交互。
1158 1
Vue2级联选择(Cascader)
|
数据格式
Element el-cascader 级联选择器详解
本文目录 1. 概述 2. 数据绑定 2.1 默认数据绑定 2.2 指定绑定数据格式 3. 常用功能 3.1 修改触发方式 3.2 增加清空按钮 3.3 可搜索 3.4 选中项只显示最后一级 3.5 可选中任意一级 3.6 面板样式 3.7 自定义节点内容 4. 动态加载下级 5. 小结
4899 0
技术经验分享:Cascader级联选择器Element的使用和总结
技术经验分享:Cascader级联选择器Element的使用和总结
434 0
|
JavaScript 编译器
vue3引入element-plus完整步骤
vue3引入element-plus完整步骤
2521 5
|
定位技术 API 数据格式
Element UI【详解】el-cascader 级联选择器 - 行政区划选择(可以选择任意一级),限定选择范围,获取并解析选中的节点
Element UI【详解】el-cascader 级联选择器 - 行政区划选择(可以选择任意一级),限定选择范围,获取并解析选中的节点
4457 0