vue-element-admin递归处理菜单数据
vue-element-admin
PanJiaChen/vue-element-admin: 是一个基于 Vue.js 和 Element UI 的后台管理系统模板,支持多种数据源和插件扩展。该项目提供了一个完整的后台管理系统模板,可以方便地实现后台管理系统的快速搭建和定制,同时支持多种数据源和插件扩展。
项目地址:https://gitcode.com/gh_mirrors/vu/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根据自己情况不同,按需修改
PanJiaChen/vue-element-admin: 是一个基于 Vue.js 和 Element UI 的后台管理系统模板,支持多种数据源和插件扩展。该项目提供了一个完整的后台管理系统模板,可以方便地实现后台管理系统的快速搭建和定制,同时支持多种数据源和插件扩展。
最近提交(Master分支:4 个月前 )
0caa975e - 3 年前
cd3f7267 - 3 年前
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐



所有评论(0)