专栏首页天天javascript 树状结构的转换(递归)

javascript 树状结构的转换(递归)

在使用vue和museui构建移动站的时候发现museui中没有树状结构的UI组件,因业务需求,项目中的组织结构是树状结构,在npm中找到 <code>vue-treeselect</code> ,第一次使用,发现不能对树状结构的属性进行配置

[
  {
    id:1,
    lable:"一级组织",
    children:[
    {
      id:1,
        lable:"二级组织",
      children:[]
    },
    {
      id:1,
        lable:"二级组织",
      children:[]
    }
    ]
  }

]
// 后台返回的数据机构
[{
        "title": "中国有限公司",
        "key": "1",
        "value": "1",
        "children": [{
            "title": "武汉有限公司",
            "key": "2",
            "value": "2",
            "children": [{
                "title": "无锡有限公司",
                "key": "3",
                "value": "3",
                "children": [{
                    "title": "afasdfa",
                    "key": "6",
                    "value": "6",
                    "children": []
                }, {
                    "title": "asdfasdfasdf",
                    "key": "8",
                    "value": "8",
                    "children": []
                }]
            }, {
                "title": "asdfasdfasdf",
                "key": "7",
                "value": "7",
                "children": []
            }]
        }, {
            "title": "test11111111",
            "key": "4",
            "value": "4",
            "children": [{
                "title": "test123456",
                "key": "5",
                "value": "5",
                "children": []
            }]
        }, {
            "title": "测试公司",
            "key": "9",
            "value": "9",
            "children": []
        }, {
            "title": "重工技术有限公司",
            "key": "11",
            "value": "11",
            "children": []
        }]
    }]

其中 props {id:'',label:'',children:[]}是不能项elementui中可以自己传入自己定义key值,

<treeselect :value="value"
                placeholder='请选择组织'
                @select='selectNode'
                :options="options">
      <label slot="option-label"
             slot-scope="{ node, shouldShowCount, count, labelClassName }"
             :class="labelClassName">
        <span class="">{{ node.label }}</span>
      </label>
    </treeselect>

那就只能通过对数据进行处理得到 vue-treeselect需要的数据

javascript 树状结构的转换

export const treeFormat = (arr) => {
    // [{
    //   id: 'a',
    //   label: 'a',
    //   children:[
    //     {
    //       id: 'a',
    //       label: 'a',
    //       children:[]
    //     },
    //     {
    //       id: 'a',
    //       label: 'a',
    //     }
    //   ]
    // },
    //   {
    //     id: 'b',
    //     label: 'b'
    //   }
    // ]
    if (Array.isArray(arr)) return
    let newTree = []
    arr.map(el => {
        if (el.children && el.children.length) {
            let childNode = treeFormat(el.children)
            newTree.push({
                id: el.key,
                label: el.title,
                children: childNode
            })

        } else {
            newTree.push({
                id: el.key,
                label: el.title
            })
        }
    })
    console.log(newTree)
    return newTree
}
[{
    "id": "1",
    "label": "中国有限公司",
    "children": [{
        "id": "2",
        "label": "武汉有限公司",
        "children": [{
            "id": "3",
            "label": "无锡有限公司",
            "children": [{
                "id": "6",
                "label": "afasdfa"
            }, {
                "id": "8",
                "label": "asdfasdfasdf"
            }]
        }, {
            "id": "7",
            "label": "asdfasdfasdf"
        }]
    }, {
        "id": "4",
        "label": "test11111111",
        "children": [{
            "id": "5",
            "label": "test123456"
        }]
    }, {
        "id": "9",
        "label": "测试公司"
    }, {
        "id": "11",
        "label": "重工技术有限公司"
    }]
}]

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • $.extend()插件(放大镜)

    天天_哥
  • H5

    天天_哥
  • js控制节点小结

    天天_哥
  • 剑指offer - 从上到下打印二叉树III - JavaScript

    题目描述: 请实现一个函数按照之字形顺序打印二叉树,即第一行按照从左到右的顺序打印,第二层按照从右到左的顺序打印,第三行再按照从左到右的顺序打印,其他行以此类推...

    心谭博客
  • 纸壳CMS的插件加载机制

    纸壳CMS是基于插件化设计的,可以通过扩展插件来实现不同的功能。如何通过插件来扩展,可以参考这篇文章:

    Mr. Wei
  • 亿航赴美上市 “无人机第一股”首日收盘持平

    12月12日,被称为是“无人机第一股” 无人机制造商企业亿航智能(以下简称亿航)正式于美国纳斯达克挂牌上市,股票代码为“EH” ,总计发行320万股美国存托股(...

    AiTechYun
  • ASTMatcher分析函数调用链(上)

    clang是llvm的编译器前端,是一个C语言、C++、Objective-C、Objective-C++语言的轻量级编译器,基本工作是进行词法分析、语法分析,...

    adding
  • RabbitMQ(四) ——路由

    RabbitMQ(四)——路由 (原创内容,转载请注明来源,谢谢) 一、概述 路由模式(routing)是交换机不将消息广播到全部的队列中,而是采用交换机的另一...

    用户1327360
  • FPGA 的功耗概念与低功耗设计研究

    随着半导体工艺的飞速发展和芯片工作频率的提高 ,芯片的功耗迅速增加 ,而功耗增加又导致芯片发热量的增大和可靠性的下降 。因此 ,功耗已经成为深亚微米集成电路设计...

    碎碎思
  • 群晖DS218+部署kafka

    我是个Java程序员,在家写代码时常用到redis、mysql、kafka这些基础服务,通常做法是打开电脑,启动redis、mysql、kafka,用完再关闭电...

    程序员欣宸

扫码关注云+社区

领取腾讯云代金券