javascript 树状结构的转换（递归）

天天_哥

发布于 2019-10-24 10:50:44

1.3K0

发布于 2019-10-24 10:50:44

文章被收录于专栏：天天天天

在使用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": "重工技术有限公司"
    }]
}]

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019.10.23 ，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js