Vue+elementUI实现 封装el-menu导航栏

效果图
Vue+elementUI实现 封装el-menu导航栏_第1张图片

子组件menus.vue


    

父组件demo.vue






模拟数据menuList.json

[
    {
        "resourceId": "1",
        "icon":true,
        "resourceName": "一级菜单1",
        "children": [
            {
                "resourceId": "12",
                "resourceName": "二级菜单1",
                "children": [
                    {
                        "resourceId": "122",
                        "resourceName": "三级菜单",
                        "children": [
                            {
                                "resourceId": "1222",
                                "resourceName": "四级级菜单1",
                                "children": [
                                    {
                                        "resourceId": "12221",
                                        "resourceName": "五级级菜单1",
                                        "children": []
                                    },
                                    {
                                        "resourceId": "12222",
                                        "resourceName": "五级级菜单2",
                                        "children": []
                                    },
                                    {
                                        "resourceId": "12223",
                                        "resourceName": "五级级菜单3",
                                        "children": []
                                    }
                                ]
                            }
                        ]
                    }
                ]
            },
            {
                "resourceId": "13",
                "resourceName": "二级菜单2",
                "children": []
            }
        ]
    }, {
        "resourceId": "2",
        "icon":true,
        "resourceName": "一级菜单2",
        "children": [
            {
                "resourceId": "12",
                "resourceName": "二级菜单1",
                "children":[]
            }
        ]
    }, {
        "resourceId": "3",
        "icon":true,
        "resourceName": "一级菜单3",
        "children": []
    }
]

你可能感兴趣的:(vue.js,elementui,javascript)