vue+elementUI多级菜单动态渲染组件

以下是组件代码：

<  template  >
  <  div  class  =  “navMenu”  >

    <  label  v-for  =  “navMenus中的navMenu”  >
      <  el-menu-item  v-if  =  “navMenu.childs == null && navMenu.entity && navMenu.entity.state ==='ENABLE'”
                    ：key  =  “navMenu.entity.id”  ：data  =  “navMenu”  ：index  =  “navMenu.entity.name”  ：route  =  “navMenu.entity.value”
                    disabled  =  “”  >
        < i ：class = “navMenu.entity.icon” > i >
        < span slot = “title” > {{navMenu.entity.alias}} span >
      el-menu-item >

      < el-submenu v-if = “navMenu.childs && navMenu.entity && navMenu.entity.state ==='ENABLE'”
                  ：key = “navMenu.entity.id” ：data = “navMenu” ：index = “navMenu.entity.name” >
        < template slot = “title” >
          < i ：class = “navMenu.entity.icon” > i >
          < span >  {{navMenu.entity.alias}} span >
        template >
        < NavMenu ：navMenus = “navMenu.childs” > NavMenu >
      el-submenu >
    label >

  div >
template >

< script >
  导出默认{
    名称：'NavMenu'，
    道具：['navMenus']，
    data（）{
      返回{}
    }，
    方法： {}
  }
script >

< style  scoped >

style >

外部调用也比较简单

<！ - 左侧菜单组件 - >
     <  el-menu
       default-active  =  “0”
       class  =  “el-menu-vertical-demo”
       @  select  =  “menuSelected”
       background-color  =  “＃F0F6F6”
       text-color  =  “＃3C3F41”
       active-text-color  =  “black”  >
       <  NavMenu  ：navMenus  =  “leftMenus”  >  NavMenu  >
     el-menu  >

看看效果：

值得一提的是，完成此菜单需要后端的配合，笔者这里后端给出的数据为：

{
    “实体” ：  null ，
    “孩子” ：[
        {
            “实体” ：{
                “id” ：1，
                “parentMenuId” ：0，
                “name” ：  “systemManage” ，
                “icon” ：  “el-icon-message \ r \ n” ，
                “别名” ：  “系统管理” ，
                “状态” ：  “启用” ，
                “排序” ：0，
                “值” ：  null ，
                "type": "NONE",
                "discription": "用于系统管理的菜单",
                "createUserId": 1
            },
            "childs": [
                {
                    "entity": {
                        "id": 3,
                        "parentMenuId": 1,
                        "name": "authManage",
                        "icon": "el-icon-loading",
                        "alias": "权限管理",
                        "state": "ENABLE",
                        "sort": 0,
                        "value": "/system/auth",
                        "type": "LINK",
                        "discription": "用于权限管理的菜单",
                        "createUserId": 1
                    },
                    "childs": null
                },
                {
                    "entity": {
                        "id": 4,
                        "parentMenuId": 1,
                        "name": "roleManage",
                        "icon": "el-icon-bell",
                        "alias": "角色管理",
                        "state": "ENABLE",
                        "sort": 1,
                        "value": "/system/role",
                        "type": "LINK",
                        "discription": "用于角色管理的菜单",
                        "createUserId": 1
                    },
                    "childs": null
                },
                {
                    "entity": {
                        "id": 2,
                        "parentMenuId": 1,
                        "name": "menuManage",
                        "icon": "el-icon-edit",
                        "alias": "菜单管理",
                        "state": "ENABLE",
                        "sort": 2,
                        "value": "/system/menu",
                        "type": "LINK",
                        "discription": "用于菜单管理的菜单",
                        "createUserId": 1
                    },
                    "childs": null
                },
                {
                    "entity": {
                        "id": 5,
                        "parentMenuId": 1,
                        "name": "groupManage",
                        "icon": "el-icon-mobile-phone\r\n",
                        "alias": "分组管理",
                        "state": "ENABLE",
                        "sort": 3,
                        "value": "/system/group",
                        "type": "LINK",
                        "discription": "用于分组管理的菜单",
                        "createUserId": 1
                    },
                    "childs": null
                }
            ]
        },
        {
            "entity": {
                "id": 6,
                "parentMenuId": 0,
                "name": "userManage",
                "icon": "el-icon-news",
                "alias": "用户管理",
                "state": "ENABLE",
                "sort": 1,
                "value": null,
                "type": "NONE",
                "discription": "用于用户管理的菜单",
                "createUserId": 1
            },
            "childs": [
                {
                    "entity": {
                        "id": 7,
                        "parentMenuId": 6,
                        "name": "accountManage",
                        "icon": "el-icon-phone-outline\r\n",
                        "alias": "帐号管理",
                        "state": "ENABLE",
                        "sort": 0,
                        "value": "",
                        "type": "NONE",
                        "discription": "用于帐号管理的菜单",
                        "createUserId": 1
                    },
                    "childs": [
                        {
                            "entity": {
                                "id": 14,
                                "parentMenuId": 7,
                                "name": "emailManage",
                                "icon": "el-icon-sold-out\r\n",
                                "alias": "邮箱管理",
                                "state": "ENABLE",
                                "sort": 0,
                                "value": "/content/email",
                                "type": "LINK",
                                "discription": "用于邮箱管理的菜单",
                                "createUserId": 1
                            },
                            "childs": null
                        },
                        {
                            "entity": {
                                "id": 13,
                                "parentMenuId": 7,
                                "name": "passManage",
                                "icon": "el-icon-service\r\n",
                                "alias": "密码管理",
                                "state": "ENABLE",
                                "sort": 1,
                                "value": "/content/pass",
                                "type": "LINK",
                                "discription": "用于密码管理的菜单",
                                "createUserId": 1
                            },
                            "childs": null
                        }
                    ]
                },
                {
                    "entity": {
                        "id": 8,
                        "parentMenuId": 6,
                        "name": "integralManage",
                        "icon": "el-icon-picture",
                        "alias": "积分管理",
                        "state": "ENABLE",
                        "sort": 1,
                        "value": "/user/integral",
                        "type": "LINK",
                        "discription": "用于积分管理的菜单",
                        "createUserId": 1
                    },
                    "childs": null
                }
            ]
        },
        {
            "entity": {
                "id": 9,
                "parentMenuId": 0,
                "name": "contentManage",
                "icon": "el-icon-rank",
                "alias": "内容管理",
                "state": "ENABLE",
                "sort": 2,
                "value": null,
                "type": "NONE",
                "discription": "用于内容管理的菜单",
                "createUserId": 1
            },
            "childs": [
                {
                    "entity": {
                        "id": 10,
                        "parentMenuId": 9,
                        "name": "classifyManage",
                        "icon": "el-icon-printer",
                        "alias": "分类管理",
                        "state": "ENABLE",
                        "sort": 0,
                        "value": "/content/classify",
                        "type": "LINK",
                        "discription": "用于分类管理的菜单",
                        "createUserId": 1
                    },
                    "childs": null
                },
                {
                    "entity": {
                        "id": 11,
                        "parentMenuId": 9,
                        "name": "articleManage",
                        "icon": "el-icon-star-on",
                        "alias": "文章管理",
                        "state": "ENABLE",
                        "sort": 1,
                        “value” ：  “/ content / article” ，
                        “type” ：  “LINK” ，
                        “discription” ：  “用于文章管理的菜单” ，
                        “createUserId” ：1
                    }，
                    “孩子” ：  空
                }，
                {
                    “实体” ：{
                        “id” ：12，
                        “parentMenuId” ：9，
                        “name” ：  “commentManage” ，
                        “icon” ：  “el-icon-share” ，
                        “别名” ：  “评论管理” ，
                        “状态” ：  “启用” ，
                        “排序” ：2，
                        “value” ：  “/ content / comment” ，
                        “type” ：  “LINK” ，
                        “discription” ：  “用于评论管理的菜单” ，
                        “createUserId” ：1
                    }，
                    “孩子” ：  空
                }
            ]
        }
    ]
}

总结：当遇到多叉树或无限层级问题时，VUE的递归组件是个比较好的解决方案，可以较大的节约开发时间降低开发成本。

网址：https ：//blog.csdn.net/goodsave/article/details/78879842