问题： 如何根据后台返回的id值，获取本地菜单对应的数据，创建动态的菜单呢？

遇到的问题：

如何根据后台返回的id值，获取本地菜单对应的数据，创建动态的菜单呢？

 

解决思路：

1、将本地菜单数据构建平级数组。

2、构建所需的菜单数组。

3、创建所需的节点树。

 

解决方法：

1、本地的菜单数据，getMenuData

{
    "code":"000000",
    "msg": "成功",
    "data":[
        {
            "id":1,
            "parentId":null,
            "icon":"el-icon-s-home",
            "index":"dashboard",
            "title":"首页",
            "childs":[]
        },
        {
            "id":2,
            "parentId":null,
            "icon":"el-icon-news",
            "index":"news",
            "title":"新闻",
            "childs":[
                {
                    "id":4,
                    "parentId":2,
                    "icon":"el-icon-date",
                    "index":"addNews",
                    "title":"添加新闻",
                    "childs":[]
                },
                {
                    "id":5,
                    "parentId":2,
                    "icon":"el-icon-date",
                    "index":"newsDetail",
                    "title":"新闻详情",
                    "childs":[]
                },
            ]
        },
        {
            "id":3,
            "parentId":null,
            "icon":"el-icon-notice",
            "index":"notice",
            "title":"通知",
            "childs":[
                {
                    "id":6,
                    "parentId":3,
                    "icon":"el-icon-date",
                    "index":"addNotice",
                    "title":"添加通知",
                    "childs":[]
                },
                {
                    "id":7,
                    "parentId":3,
                    "icon":"el-icon-date",
                    "index":"noticeDetail",
                    "title":"通知详情",
                    "childs":[]
                },
            ]
        },
        {
            "id":8,
            "parentId":null,
            "icon":"el-icon-user",
            "index":"user",
            "title":"用户",
            "childs":[
                {
                    "id":9,
                    "parentId":8,
                    "icon":"el-icon-date",
                    "index":"addUser",
                    "title":"添加用户",
                    "childs":[
                        {
                            "id":10,
                            "parentId":9,
                            "icon":"el-icon-date",
                            "index":"delUser",
                            "title":"删除用户",
                            "childs":[]
                        },
                    ]
                },
                {
                    "id":11,
                    "parentId":8,
                    "icon":"el-icon-date",
                    "index":"userDetail",
                    "title":"用户详情",
                    "childs":[]
                },
            ]
        }
    ]
}

2、将本地菜单数据构建平级数组

/**定义所需的参数
  items:[1,2,3,6,8,9,10,11]  //后台返回的菜单数据
  getMenuData:[]  //本地的菜单数据
  allBanlanceMenu:[]  //平级数组
  newAry:[]  //过滤出来所需的菜单数组
  menuTree:[]  //所需的节点树
**/

this.getLevelMenuArray(this.getMenuData.data);
//将本地菜单数据构建平级数组
getLevelMenuArray(datas){
  datas.forEach(e=>{
    if(e.childs.length == 0){
      let t ={
        id:e.id,
        index:e.index,
        parentId:e.parentId,
        title:e.title,
        icon:e.icon
      };
      this.allBanlanceMenu.push(t); //添加第一级节点
      return;
    }else{
      //构建所需的对象，如果第二级节点含有子级，对第二级节点进行构造添加
      let y ={
        id:e.id,
        index:e.index,
        parentId:e.parentId,
        title:e.title,
        icon:e.icon
      };
      this.allBanlanceMenu.push(y); //添加第二级节点
      this.getLevelMenuArray([...e.childs]);  //递归继续查找第二三级节点，[...e.childs]是取消数组赋值产生的地址引用问题（即深拷贝）
    }
  });
}

3、构建所需的菜单数组

/**定义所需的参数
  items:[1,2,3,6,8,9,10,11]  //后台返回的菜单数据
  getMenuData:[]  //本地的菜单数据
  allBanlanceMenu:[]  //平级数组
  newAry:[]  //过滤出来所需的菜单数组
  menuTree:[]  //所需的节点树
**/

this.getRequireMenuArray(this.allBanlanceMenu);
//构建所需的菜单数组
getRequireMenuArray(datas){
  datas.forEach(e=>{
    //遍历后台返回的数组id，如果e.id==v，则将其添加到newAry中
    this.items.forEach(v=>{
      if(e.id == v){ 
        this.newAry.push(e);
      }
    })
  })
}

4、创建所需的节点树

/**定义所需的参数
  items:[1,2,3,6,8,9,10,11]  //后台返回的菜单数据
  getMenuData:[]  //本地的菜单数据
  allBanlanceMenu:[]  //平级数组
  newAry:[]  //过滤出来所需的菜单数组
  menuTree:[]  //所需的节点树
**/


this.buildMenuTree();
//创建所需的节点树
buildMenuTree(){
  this.newAry.forEach(e=>{
    //判断如果parentId不为空，则为第一级节点，添加第一级节点
    if(!e.parentId){
      this.menuTree.push(e);
    }
  });

  this.menuTree.forEach(v=>{
    //判断如果v.childs 不存在或者v.childs=[],则调用getChildArray方法，获取第二三级节点
    //********注：数组里面添加数组，需要用concat，不能使用push
    v.childs = (v.childs || (v.childs = [])).concat(
        this.getChildArray(v,this.newAry)
    );
  });
}

//判断第二三级节点
getChildArray(parent,allMenu){
  let childArr = [];

  allMenu.forEach(e=>{
    //找到父节点parent
    if(e.parentId && e.parentId == parent.id){
      childArr.push(e); 
    }
  });

  if(childArr.length === 0){
    return [];
  }

  //查找第三级
  childArr.forEach(v=>{
    v.childs = (v.childs || (v.childs = [])).concat(
      this.getChildArray(v,allMenu)
    );
  });
  return childArr;
}