vue+element-ui构建动态菜单

1.构建菜单数据结构 config.js

let config =[
    {
        "createUserId":0,
        "parentMenuId":0,
        "icon":"el-icon-message",
        "name":"系统管理",
        "alias":"系统管理",
        "id":1,
        "sort":0,
        "state":"ENABLE",
        "type":"NONE",
        "childs":[
            {
                "createUserId":0,
                "parentMenuId":1,
                "icon":"el-icon-message",
                "name":"权限管理",
                "alias":"权限管理",
                "id":3,
                "sort":0,
                "state":"ENABLE",
                "type":"LINK",
                "value":"/auth",
                "childs":[
                    {
                        "createUserId":0,
                        "parentMenuId":3,
                        "icon":"el-icon-message",
                        "name":"权限管理son",
                        "alias":"权限管理son",
                        "id":11,
                        "sort":0,
                        "state":"ENABLE",
                        "type":"LINK",
                        "value":"/auth",
                        "childs":[

                        ]
                    }
                ]
            },
            {
                "createUserId":0,
                "parentMenuId":1,
                "icon":"el-icon-message",
                "name":"角色管理",
                "alias":"角色管理",
                "id":3,
                "sort":1,
                "state":"ENABLE",
                "type":"LINK",
                "value":"/elc",
                "childs":[
                    {
                        "createUserId":0,
                        "parentMenuId":3,
                        "icon":"el-icon-message",
                        "name":"权限管理son",
                        "alias":"权限管理son",
                        "id":11,
                        "sort":0,
                        "state":"ENABLE",
                        "type":"LINK",
                        "value":"/auth",
                        "childs":[

                        ]
                    }
                ]
            }
        ]
    },
    {
        "createUserId":0,
        "parentMenuId":0,
        "icon":"el-icon-news",
        "name":"用户管理",
        "alias":"用户管理",
        "id":6,
        "sort":1,
        "state":"ENABLE",
        "type":"NONE",
        "childs":[
            {
                "createUserId":0,
                "parentMenuId":6,
                "icon":"el-icon-message",
                "name":"邮箱管理",
                "alias":"邮箱管理",
                "id":7,
                "sort":0,
                "state":"ENABLE",
                "type":"LINK",
                "value":"/elc",
                "childs":[

                ]
            }
        ]
    }
]

export default config

2.菜单组件

<template>
  <div class="navMenu">
    
    <label v-for="navMenu in navMenus" :key="navMenu.name">
      <el-menu-item v-if="navMenu.childs==null"
                    :key="navMenu.id" :data="navMenu" :index="navMenu.name" 
                  @click="handleRoute(navMenu.value)" >
        <i :class="navMenu.icon"></i>
        <span slot="title">{{navMenu.alias}}</span>
      </el-menu-item>
 
      <el-submenu v-if="navMenu.childs" @click.native="goto(navMenu.value)"
                  :key="navMenu.id" :data="navMenu" :index="navMenu.name">
        <template slot="title">
          <i :class="navMenu.icon"></i>
          <span> {{navMenu.alias}}</span>
        </template>
        <NavMenu :navMenus="navMenu.childs"></NavMenu>
      </el-submenu>
    </label>
 
  </div>
</template>
 
<script>
  export default {
    name: 'NavMenu',
    props: ['navMenus'],
    data() {
      return {}
    },
    methods: {
      goto (menu) {
        // 通过菜单URL跳转至指定路由
      
       console.info(menu)
       if(menu){
          this.$router.push(menu)
       }
      //
      }
    }
  }
</script>
 
<style scoped>
 
</style>

3.main 页面调用

<template lang="html">
  <div class="" >
  <el-container style="height: 720px; border: 1px solid #eee">
 
    <!--左侧菜单组件-->
  <el-aside width="200px" style="background-color:#2a3a4a">
       <el-menu
         :default-active="isId"
         @select="handleSelect"
         class="el-menu-vertical-demo"
         background-color="#2a3a4a"
         text-color="#dddddd"
         active-text-color="#aaaaaa">
         <NavMenu :navMenus="totalList"></NavMenu>
       </el-menu>
  </el-aside>
  
  <el-container>
    <el-header style="text-align: right; font-size: 12px;" >
    <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" 
    background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
       <el-menu-item index="1">处理中心</el-menu-item>
        <el-submenu index="2">
           <template slot="title">我的工作台</template>
           <el-menu-item index="2-1">选项1</el-menu-item>
        </el-submenu>
        <el-menu-item index="3" disabled>消息中心</el-menu-item>
        <el-menu-item index="4"><a href="#" target="_blank">订单管理</a></el-menu-item>
    </el-menu>
  </el-header>
  <!--MAIN-->
  <el-main>
    <router-view></router-view>
  </el-main>
  <el-footer>------------------</el-footer>
  </el-container>
</el-container>
</div>

</template>

<script>
import config from "./config";
import NavMenu from "./menuTemp";
export default {
  data() {
    return {
      totalList: [],
      isId: "权限管理",
      activeIndex: '1',
      activeIndex2: '1'
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  },
  components: {
    NavMenu
  },
  beforeRouteEnter(to, from, next) {
    console.log("我从哪里来", to.params.id, from);
    var self = this;

    next(vm => {
      vm.isId = to.params.id;
    });
  },
  watch: {
    $route(to, from) {
      this.isId = to.params.id;
    }
  },
  created() {
    this.totalList = config;
  }
};
</script>

<style>

  
  .el-aside {
    color: #333;
  }
</style>

5.router 

import Vue from 'vue'
import Router from 'vue-router'
import Main from '@/ele/Main.vue'
import user from '@/components/system/user.vue'
import auth from '@/components/system/auth.vue'


Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            component: Main,
            name: 'Main',
            children: [
                {
                    path: 'elc',
                    component: user,
                    name: 'user'
                },
                {
                    path: 'auth',
                    component: auth,
                    name: 'auth'
                },
                
            ]
        }
    ]
})

前端的组件数据就这些了，后端用递归查询返回数据。

1.后端Ztree ，省略get set

public class Ztree {
    private int id;

    private int parentMenuId;

    private String name;

    private String icon;

    private String alias;

    private String state;

    private int sort;

    private String value;

    private String type;

    private int createUserId;
}

2.模拟构建数据

  List<Ztree> ztreeList =new ArrayList<>();

        Ztree ztree =new Ztree();
        ztree.setId(1);
        ztree.setParentMenuId(0);
        ztree.setName("系统管理");
        ztree.setIcon("el-icon-message");
        ztree.setAlias("系统管理");
        ztree.setState("ENABLE");
        ztree.setSort(0);
        ztree.setValue(null);
        ztree.setType("NONE");


        Ztree ztree1 =new Ztree();
        ztree1.setId(3);
        ztree1.setParentMenuId(1);
        ztree1.setName("权限管理");
        ztree1.setIcon("el-icon-message");
        ztree1.setAlias("权限管理");
        ztree1.setState("ENABLE");
        ztree1.setSort(0);
        ztree1.setValue("/auth");
        ztree1.setType("LINK");

        Ztree ztree11 =new Ztree();
        ztree11.setId(11);
        ztree11.setParentMenuId(3);
        ztree11.setName("权限管理son");
        ztree11.setIcon("el-icon-message");
        ztree11.setAlias("权限管理son");
        ztree11.setState("ENABLE");
        ztree11.setSort(0);
        ztree11.setValue("/auth");
        ztree11.setType("LINK");


        Ztree ztree2 =new Ztree();
        ztree2.setId(3);
        ztree2.setParentMenuId(1);
        ztree2.setName("角色管理");
        ztree2.setIcon("el-icon-message");
        ztree2.setAlias("角色管理");
        ztree2.setState("ENABLE");
        ztree2.setSort(1);
        ztree2.setValue("/elc");
        ztree2.setType("LINK");


        //总的2
        Ztree ztree4 =new Ztree();
        ztree4.setId(6);
        ztree4.setParentMenuId(0);
        ztree4.setName("用户管理");
        ztree4.setIcon("el-icon-news");
        ztree4.setAlias("用户管理");
        ztree4.setState("ENABLE");
        ztree4.setSort(1);
        ztree4.setValue(null);
        ztree4.setType("NONE");


        Ztree ztree6 =new Ztree();
        ztree6.setId(7);
        ztree6.setParentMenuId(6);
        ztree6.setName("邮箱管理");
        ztree6.setIcon("el-icon-message");
        ztree6.setAlias("邮箱管理");
        ztree6.setState("ENABLE");
        ztree6.setSort(0);
        ztree6.setValue("/elc");
        ztree6.setType("LINK");


        ztreeList.add(ztree);
        ztreeList.add(ztree1);
        ztreeList.add(ztree2);
        ztreeList.add(ztree4);
        ztreeList.add(ztree6);
        ztreeList.add(ztree11);

        JSONArray array= JSONArray.parseArray(JSON.toJSONString(ztreeList));

3.递归调用

public static JSONArray treeMenuList(JSONArray menuList, int parentId) {
        JSONArray childMenu = new JSONArray();
        for (Object object : menuList) {
            JSONObject jsonMenu = JSONObject.parseObject(JSONObject.toJSONString(object));
            int menuId = (int)jsonMenu.get("id");
            int pid = (int)jsonMenu.get("parentMenuId");
            if (parentId == pid) {
                JSONArray c_node = treeMenuList(menuList, menuId);
                jsonMenu.put("childs", c_node);
                childMenu.add(jsonMenu);
            }
        }
        return childMenu;
    }

这样，得到的数据就是前端页面需要的数据。数据库建表就是Ztree里的字段。前端页面可以在created生命周期函数中调用后端获取数据，最终效果图