数组包含对象利用递归处理成想要的格式

原创已于 2022-12-01 15:43:33 修改 · 168 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #javascript #vue.js

于 2022-03-03 09:39:12 首次发布

原始格式

{
    "d":[
        {
            "d_n":"CNC_MEM",
            "d":[
                {
                    "d_n":"SYSTEM"
                },
                {
                    "d_n":"MTB1"
                },
                {
                    "d_n":"MTB2"
                },
                {
                    "d_n":"USER",
                    "d":[
                        {
                            "d_n":"LIBRARY"
                        },
                        {
                            "d_n":"PATH1",
                            "f":[
                                {
                                    "f_n":"SAMPLE"
                                },
                                {
                                    "f_n":"O9998"
                                },
                                {
                                    "f_n":"O55"
                                },
                                {
                                    "f_n":"O56"
                                },
                                {
                                    "f_n":"O57"
                                },
                                {
                                    "f_n":"GETTINGSTARTED"
                                }
                            ]
                        },
                        {
                            "d_n":"PATH2",
                            "f":[
                                {
                                    "f_n":"O9998"
                                }
                            ]
                        },
                        {
                            "d_n":"LC1"
                        },
                        {
                            "d_n":"LC2"
                        }
                    ]
                }
            ]
        }
    ]
}

预期格式（把上面格式的数据转换成element ui中的联级菜单显示）

options: [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }

获取到原始数据利用递归

//递归处理数组
    findDep(node = [],arr=[]) {
      for(let i=0;i< node.length;i++) {
        arr.push({label: node[i].d_n,value:node[i].d_n});
        if(node[i].d && node[i].d.length){
          arr[i].children=this.findDep(node[i].d,[]);
        }
      }
      return arr
    },