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根据自己情况不同,按需修改
GitHub 加速计划 / vu / vue-element-admin
87.26 K
30.42 K
下载
PanJiaChen/vue-element-admin: 是一个基于 Vue.js 和 Element UI 的后台管理系统模板,支持多种数据源和插件扩展。该项目提供了一个完整的后台管理系统模板,可以方便地实现后台管理系统的快速搭建和定制,同时支持多种数据源和插件扩展。
最近提交(Master分支:2 个月前 )
0caa975e - 2 年前
cd3f7267 - 2 年前
更多推荐
已为社区贡献2条内容
所有评论(0)