将数据转成树形结构并且替换其中的类名让其可以用在element树形控件上

本文链接：https://blog.csdn.net/sisuiban/article/details/123869458

<script>
    const data = [
      {
        "sortId": "123456",
        "sortName": "yang1",
        "children": [
          {
            "sortId": "1234567",
            "sortName": "yang2",
            "children": [
              {
                "sortId": "1234568",
                "sortName": "yang3",
                "children": []
              }
            ]
          },
          {
            "sortId": "1234569",
            "sortName": "yang4",
            "children": []
          }
        ]
      },
      {
        "sortId": "1234560",
        "sortName": "yang5",
        "children": []
      },
      {
        "sortId": "12345698",
        "sortName": "yang6",
        "children": []
      },
      {
        "sortId": "12345697",
        "sortName": "yang7",
        "children": []
      }
    ]

    let NewArray = data.map(ele=>AAgetTreeData(ele))

    function AAgetTreeData(data) {
      const hasChild = data.children && data.children.length > 0
      return {
        id: data.sortId,
        name: data.sortName,
        children: hasChild ? data.children.map((i) => this.TreeArrar(i)) : []
      }
    }
    console.log('新的数组',NewArray)
 



    const dataeee = [
      {
        "ID": 11113,
        "ParentID": 11105,
        "MenuName": "新菜单项",
        "CreateTime": "2022-03-27 14:23:33",
        "IsDeleted": false
      },
      {
        "ID": 11112,
        "ParentID": 11105,
        "MenuName": "充值记录",
        "CreateTime": "2022-03-27 14:23:26",
        "IsDeleted": false
      },
      {
        "ID": 11111,
        "ParentID": 10100,
        "MenuName": "附加能力实验室价格",
        "CreateTime": "2022-03-27 12:11:54",
        "IsDeleted": false
      },
      {
        "ID": 11110,
        "ParentID": 11104,
        "MenuName": "服务方案(商铺)",
        "CreateTime": "2022-03-24 17:26:10",
        "IsDeleted": false
      },
      {
        "ID": 11109,
        "ParentID": 11105,
        "MenuName": "发票信息",
        "CreateTime": "2022-03-22 15:42:05",
        "IsDeleted": false
      },
      {
        "ID": 11108,
        "ParentID": 11105,
        "MenuName": "地址管理",
        "CreateTime": "2022-03-22 15:39:34",
        "IsDeleted": false
      },
      {
        "ID": 11107,
        "ParentID": 11105,
        "MenuName": "用户认证管理",
        "CreateTime": "2022-03-22 14:39:02",
        "IsDeleted": false
      },
      {
        "ID": 11106,
        "ParentID": 11105,
        "MenuName": "检测账户",
        "CreateTime": "2022-03-22 14:38:35",
        "IsDeleted": false
      },
      {
        "ID": 11105,
        "ParentID": 0,
        "MenuName": "检验用户管理",
        "CreateTime": "2022-03-22 14:37:42",
        "IsDeleted": false
      },
      {
        "ID": 11104,
        "ParentID": 0,
        "MenuName": "方案管理",
        "CreateTime": "2022-03-17 21:19:05",
        "IsDeleted": false
      }
    ]

    // 调用 转换树形的方法
    let liss = getTree(dataeee)


    function getTree(data) {
      // 把一级数据分离出来   ParentID === 0
      const parents = data.filter((ele) => ele.ParentID === 0)
      // 把子级数据分离出来   ParentID ！== 0
      const children = data.filter((ele) => ele.ParentID !== 0)
      dataListTree(parents, children)
      return parents
      function dataListTree(parents, children) {
        parents.map((p) => {
          children.map((c，index) => {
          		let _children = JSON.parse(JSON.stringfy(children))
          			_children.splice(index,1)
          			dataListTree([c],_children)
            if (c.ParentID === p.ID) {
              if (p.children) {
                p.children.push(c)
              } else {
                p.children = [c]
              }
            }
          })
        })
      }
    }
    console.log('树形结构', liss)


    let NewData =  liss.map((ele) =>TreeArrar(ele))
    console.log('变成可以给属性控件使用的',NewData)
    function TreeArrar(data) {
      const hasChild = data.children && data.children.length > 0
      return {
        //   element UI 树形控件上那个文字内容需要的是  label 属性，而获取的数据中没有，我们就把  MenuName 这个属性 改成我们需要的
        label: data.MenuName,
        ID: data.ID,
        ParentID:data.ParentID,
        CreateTime:data.CreateTime,
        children: hasChild ? data.children.map((i) => this.TreeArrar(i)) : []
      }
    }


    
  </script>

把数组中的某个部分改成我们需要的名字

假如已经是完整的树形数据了，需要替换里面的key为符合elementUi多级选择器的话

let oldData=[{"id":"207fa1a9-160c-4943-a89b-8fa4db0547ce","text":"中认英泰检测技术有限公司","title":null,"value":"207fa1a9-160c-4943-a89b-8fa4db0547ce","icon":null,"showcheck":false,"checkstate":0,"hasChildren":true,"isexpand":true,"complete":true,"ChildNodes":[{"id":"1","text":"质量部","title":null,"value":"1","icon":null,"showcheck":false,"checkstate":0,"hasChildren":true,"isexpand":true,"complete":true,"ChildNodes":[{"id":"51","text":"质量室","title":null,"value":"51","icon":null,"showcheck":false,"checkstate":0,"hasChildren":false,"isexpand":true,"complete":true,"ChildNodes":[],"parentId":"1"},{"id":"54","text":"采购室","title":null,"value":"54","icon":null,"showcheck":false,"checkstate":0,"hasChildren":false,"isexpand":true,"complete":true,"ChildNodes":[],"parentId":"1"}],"parentId":"0"},{"id":"10","text":"智能网联工程","title":null,"value":"10","icon":null,"showcheck":false,"checkstate":0,"hasChildren":true,"isexpand":true,"complete":true,"ChildNodes":[{"id":"64","text":"项目一部","title":null,"value":"64","icon":null,"showcheck":false,"checkstate":0,"hasChildren":false,"isexpand":true,"complete":true,"ChildNodes":[],"parentId":"10"},{"id":"68","text":"项目三部","title":null,"value":"68","icon":null,"showcheck":false,"checkstate":0,"hasChildren":false,"isexpand":true,"complete":true,"ChildNodes":[],"parentId":"10"},{"id":"85","text":"测试部","title":null,"value":"85","icon":null,"showcheck":false,"checkstate":0,"hasChildren":false,"isexpand":true,"complete":true,"ChildNodes":[],"parentId":"10"}],"parentId":"0"},{"id":"2","text":"副总经理2-分管部门","title":null,"value":"2","icon":null,"showcheck":false,"checkstate":0,"hasChildren":true,"isexpand":true,"complete":true,"ChildNodes":[{"id":"31","text":"财务部","title":null,"value":"31","icon":null,"showcheck":false,"checkstate":0,"hasChildren":false,"isexpand":true,"complete":true,"ChildNodes":[],"parentId":"2"},{"id":"32","text":"行政部","title":null,"value":"32","icon":null,"showcheck":false,"checkstate":0,"hasChildren":false,"isexpand":true,"complete":true,"ChildNodes":[],"parentId":"2"},{"id":"55","text":"人力资源部","title":null,"value":"55","icon":null,"showcheck":false,"checkstate":0,"hasChildren":false,"isexpand":true,"complete":true,"ChildNodes":[],"parentId":"2"}],"parentId":"0"},{"id":"3","text":"副总经理1-分管部门","title":null,"value":"3","icon":null,"showcheck":false,"checkstate":0,"hasChildren":true,"isexpand":true,"complete":true,"ChildNodes":[{"id":"24","text":"业务一部","title":null,"value":"24","icon":null,"showcheck":false,"checkstate":0,"hasChildren":false,"isexpand":true,"complete":true,"ChildNodes":[],"parentId":"3"},{"id":"25","text":"业务二部1","title":null,"value":"25","icon":null,"showcheck":false,"checkstate":0,"hasChildren":false,"isexpand":true,"complete":true,"ChildNodes":[],"parentId":"3"},{"id":"28","text":"华南广州办","title":null,"value":"28","icon":null,"showcheck":false,"checkstate":0,"hasChildren":false,"isexpand":true,"complete":true,"ChildNodes":[],"parentId":"3"},{"id":"30","text":"华南深圳办","title":null,"value":"30","icon":null,"showcheck":false,"checkstate":0,"hasChildren":false,"isexpand":true,"complete":true,"ChildNodes":[],"parentId":"3"},{"id":"59","text":"业务三部","title":null,"value":"59","icon":null,"showcheck":false,"checkstate":0,"hasChildren":false,"isexpand":true,"complete":true,"ChildNodes":[],"parentId":"3"},{"id":"74","text":"业务四部","title":null,"value":"74","icon":null,"showcheck":false,"checkstate":0,"hasChildren":false,"isexpand":true,"complete":true,"ChildNodes":[],"parentId":"3"},{"id":"90","text":"项目四部","title":null,"value":"90","icon":null,"showcheck":false,"checkstate":0,"hasChildren":false,"isexpand":true,"complete":true,"ChildNodes":[],"parentId":"3"},{"id":"e620d72b-5f86-4e1d-9dc2-05404617562d","text":"南京分中心陈爱国部门","title":null,"value":"e620d72b-5f86-4e1d-9dc2-05404617562d","icon":null,"showcheck":false,"checkstate":0,"hasChildren":false,"isexpand":true,"complete":true,"ChildNodes":[],"parentId":"3"},{"id":"c28d1546-f470-42a7-812f-98867e7149b6","text":"南京分中心韦晓部门","title":null,"value":"c28d1546-f470-42a7-812f-98867e7149b6","icon":null,"showcheck":false,"checkstate":0,"hasChildren":false,"isexpand":true,"complete":true,"ChildNodes":[],"parentId":"3"},{"id":"50bbcabf-949e-43aa-91d2-e83d523d8d58","text":"业务五部","title":null,"value":"50bbcabf-949e-43aa-91d2-e83d523d8d58","icon":null,"showcheck":false,"checkstate":0,"hasChildren":false,"isexpand":true,"complete":true,"ChildNodes":[],"parentId":"3"},{"id":"088a171f-a01f-4a9b-a4b9-83aede543331","text":"业务二部2","title":null,"value":"088a171f-a01f-4a9b-a4b9-83aede543331","icon":null,"showcheck":false,"checkstate":0,"hasChildren":false,"isexpand":true,"complete":true,"ChildNodes":[],"parentId":"3"},{"id":"9f4f166d-4a68-4c7a-9369-a7b9e249bbd4","text":"中认南信业务部","title":null,"value":"9f4f166d-4a68-4c7a-9369-a7b9e249bbd4","icon":null,"showcheck":false,"checkstate":0,"hasChildren":false,"isexpand":true,"complete":true,"ChildNodes":[],"parentId":"3"},{"id":"0c21cbb5-9f34-4512-80a3-e78f1680cc98","text":"业务六部（筹）","title":null,"value":"0c21cbb5-9f34-4512-80a3-e78f1680cc98","icon":null,"showcheck":false,"checkstate":0,"hasChildren":false,"isexpand":true,"complete":true,"ChildNodes":[],"parentId":"3"},{"id":"26816cd9-8593-4d8c-b5c2-4fd63e446c5e","text":"品牌发展部","title":null,"value":"26816cd9-8593-4d8c-b5c2-4fd63e446c5e","icon":null,"showcheck":false,"checkstate":0,"hasChildren":false,"isexpand":true,"complete":true,"ChildNodes":[],"parentId":"3"},{"id":"d9103033-13a9-4af2-9450-dcd8e30578ac","text":"检查评价部（筹）","title":null,"value":"d9103033-13a9-4af2-9450-dcd8e30578ac","icon":null,"showcheck":false,"checkstate":0,"hasChildren":false,"isexpand":true,"complete":true,"ChildNodes":[],"parentId":"3"}],"parentId":"0"},{"id":"34","text":"经理室","title":null,"value":"34","icon":null,"showcheck":false,"checkstate":0,"hasChildren":true,"isexpand":true,"complete":true,"ChildNodes":[{"id":"35","text":"总经理","title":null,"value":"35","icon":null,"showcheck":false,"checkstate":0,"hasChildren":false,"isexpand":true,"complete":true,"ChildNodes":[],"parentId":"34"},{"id":"69","text":"董事长","title":null,"value":"69","icon":null,"showcheck":false,"checkstate":0,"hasChildren":false,"isexpand":true,"complete":true,"ChildNodes":[],"parentId":"34"}],"parentId":"0"},{"id":"78","text":"客服部","title":null,"value":"78","icon":null,"showcheck":false,"checkstate":0,"hasChildren":true,"isexpand":true,"complete":true,"ChildNodes":[{"id":"54eb5a9f-2974-4a41-b83a-80f05e56eb7c","text":"客服部-本部","title":null,"value":"54eb5a9f-2974-4a41-b83a-80f05e56eb7c","icon":null,"showcheck":false,"checkstate":0,"hasChildren":false,"isexpand":true,"complete":true,"ChildNodes":[],"parentId":"78"},{"id":"eb31e82d-39f2-49ab-9299-1c27d141c09d","text":"客服部-广州","title":null,"value":"eb31e82d-39f2-49ab-9299-1c27d141c09d","icon":null,"showcheck":false,"checkstate":0,"hasChildren":false,"isexpand":true,"complete":true,"ChildNodes":[],"parentId":"78"},{"id":"74dbc6b1-6565-44a7-ac1f-e8f1fb356491","text":"客服部-宁波","title":null,"value":"74dbc6b1-6565-44a7-ac1f-e8f1fb356491","icon":null,"showcheck":false,"checkstate":0,"hasChildren":false,"isexpand":true,"complete":true,"ChildNodes":[],"parentId":"78"},{"id":"44037070-9532-44b0-91ac-54c39fa00315","text":"客服部-深圳","title":null,"value":"44037070-9532-44b0-91ac-54c39fa00315","icon":null,"showcheck":false,"checkstate":0,"hasChildren":false,"isexpand":true,"complete":true,"ChildNodes":[],"parentId":"78"}],"parentId":"0"},{"id":"213e1cd2-a0ee-4266-9292-29d74f55848f","text":"研发中心","title":null,"value":"213e1cd2-a0ee-4266-9292-29d74f55848f","icon":null,"showcheck":false,"checkstate":0,"hasChildren":true,"isexpand":true,"complete":true,"ChildNodes":[{"id":"69799b87-d4a9-415c-a870-ff94c36c1b51","text":"网信室","title":null,"value":"69799b87-d4a9-415c-a870-ff94c36c1b51","icon":null,"showcheck":false,"checkstate":0,"hasChildren":false,"isexpand":true,"complete":true,"ChildNodes":[],"parentId":"213e1cd2-a0ee-4266-9292-29d74f55848f"},{"id":"110d8036-d3d5-4d25-8ff4-134b195d5dfa","text":"高端装备产品线","title":null,"value":"110d8036-d3d5-4d25-8ff4-134b195d5dfa","icon":null,"showcheck":false,"checkstate":0,"hasChildren":false,"isexpand":true,"complete":true,"ChildNodes":[],"parentId":"213e1cd2-a0ee-4266-9292-29d74f55848f"},{"id":"5a29b79b-5ba9-410c-a660-fb8653de1219","text":"化学新材料产品线","title":null,"value":"5a29b79b-5ba9-410c-a660-fb8653de1219","icon":null,"showcheck":false,"checkstate":0,"hasChildren":false,"isexpand":true,"complete":true,"ChildNodes":[],"parentId":"213e1cd2-a0ee-4266-9292-29d74f55848f"},{"id":"df91a868-cd7d-4741-8de2-35c8898fbbd0","text":"智能网联产品线","title":null,"value":"df91a868-cd7d-4741-8de2-35c8898fbbd0","icon":null,"showcheck":false,"checkstate":0,"hasChildren":false,"isexpand":true,"complete":true,"ChildNodes":[],"parentId":"213e1cd2-a0ee-4266-9292-29d74f55848f"},{"id":"6b38e37d-5413-4af6-9914-22ae88b878b0","text":"设备设施室","title":null,"value":"6b38e37d-5413-4af6-9914-22ae88b878b0","icon":null,"showcheck":false,"checkstate":0,"hasChildren":false,"isexpand":true,"complete":true,"ChildNodes":[],"parentId":"213e1cd2-a0ee-4266-9292-29d74f55848f"}],"parentId":"0"},{"id":"c47a9e3f-949c-4d8f-8a63-471bcb315197","text":"高端装备工程","title":null,"value":"c47a9e3f-949c-4d8f-8a63-471bcb315197","icon":null,"showcheck":false,"checkstate":0,"hasChildren":true,"isexpand":true,"complete":true,"ChildNodes":[{"id":"66","text":"项目二部","title":null,"value":"66","icon":null,"showcheck":false,"checkstate":0,"hasChildren":false,"isexpand":true,"complete":true,"ChildNodes":[],"parentId":"c47a9e3f-949c-4d8f-8a63-471bcb315197"}],"parentId":"-1"}],"parentId":"0"}]

 //这个是elementUi多级选择器的数据形状，很明显上面的数据结构不符合
 //{
           // value: 'navigation',
            //label: 'Navigation',
            //children: [{
             // value: 'menu',
             // label: 'NavMenu 导航菜单'
           // }

             function replaceKeys(arr) {
                    return arr.map(item => {
                        let newItem = {};
                        for (let key in item) {
                            if (key === 'text') {
                                newItem['label'] = item[key];
                            } else if (key === 'ChildNodes' && Array.isArray(item[key]) && item[key].length > 0) {
                                newItem['children'] = replaceKeys(item[key]);
                            } else {
                                newItem[key] = item[key];
                            }
                        }
                        return newItem;
                    });
                },

//要求: 把 传进来的数组里面的   key为 text 的换成label, key为ChildNodes的换成children
let newData = replaceKeys(oldData)
console.log('新的数据',newData)