遇到的问题:
如何根据后台返回的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;
}