vue-element-admin递归处理菜单数据
·
使用递归处理数据,然后动态添加侧边菜单
前端得到这样的对象数组
let a=[
{
icon: "#",
id: 1,
menuId: 1,
menuName: "系统管理",
parentId: "0",
remark: null,
url: "/system",},
{
icon: "#",
id: 2,
menuId: 2,
menuName: "系统监控",
parentId: "0",
remark: null,
url: "/monitor",
},
{
icon: "#",
id: 3,
menuId: 3,
menuName: "设备管理",
parentId: "0",
remark: null,
url: "/sytool"
},
封装一个处理数据的函数
menuData(data){
if(data=='' ||data==undefined || data.length==0 ){
return Message.success('菜单数据为空')
}
let menuList = JSON.parse(JSON.stringify(data)); //深拷贝
let menuRouters = []
menuList.forEach((m, i) => {
if (m.parentId == '0') { //最外层,没有父层的
let module = {
path:m.url,
component: Layout,
name: m.menuName,
meta: { id: m.menuId, title: m.menuName, icon: 'el-icon-s-home'},
}
menuRouters.push(module);
}
})
function convertTree(routers) { //递归添加children
routers.forEach(r=>{
menuList.forEach((m,i)=>{
if(m.parentId && m.parentId == r.meta.id){
if(!r.children) {r.children=[]; };
let key=m.url.lastIndexOf('/')
let fileName=m.url.slice(key); //后端传的/system/user 我需要这样/system/user/user
let menu={
path:m.url,
name:m.menuName,
component(resolve){require(['@/views'+m.url+fileName],resolve)},
meta:{id:m.menuId,title:m.menuName,fullPath:m.url}
}
r.children.push(menu)
}
})
if(r.children) convertTree(r.children)
})
}
convertTree(menuRouters);
return menuRouters
},
我的url可能和你们的不一样,比如我的文件是这样的system/user/user,而后端传的是/system/user,有的人是system/user/index根据自己情况不同,按需修改
更多推荐
所有评论(0)