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

以下是组件代码：

[HTML]  查看纯字幕： 
<  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 >  

外部调用也比较简单

[HTML]  查看纯字幕： 
<！ - 左侧菜单组件 - >  
     <  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  >

看看效果：

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

[javascript] 查看纯文本 
{  
    “实体” ：  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

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

猜你喜欢