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.菜单组件

3.main 页面调用

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 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生命周期函数中调用后端获取数据，最终效果图