使用递归处理数据,然后动态添加侧边菜单
前端得到这样的对象数组

 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 年前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐