详解VUE Element-UI多级菜单动态渲染的组件

以下是组件代码：

外部调用也比较简单

最后看下效果：

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

{
  "entity": null,
  "childs": [
    {
      "entity": {
 "id": 1,
 "parentMenuId": 0,
 "name": "systemManage",
 "icon": "el-icon-messagern",
 "alias": "系统管理",
 "state": "ENABLE",
 "sort": 0,
 "value": 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-phonern",
     "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-outlinern",
     "alias": "帐号管理",
     "state": "ENABLE",
     "sort": 0,
     "value": "",
     "type": "NONE",
     "discription": "用于帐号管理的菜单",
     "createUserId": 1
   },
   "childs": [
     {
"entity": {
  "id": 14,
  "parentMenuId": 7,
  "name": "emailManage",
  "icon": "el-icon-sold-outrn",
  "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-servicern",
  "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
   },
   "childs": null
 },
 {
   "entity": {
     "id": 12,
     "parentMenuId": 9,
     "name": "commentManage",
     "icon": "el-icon-share",
     "alias": "评论管理",
     "state": "ENABLE",
     "sort": 2,
     "value": "/content/comment",
     "type": "link",
     "discription": "用于评论管理的菜单",
     "createUserId": 1
   },
   "childs": null
 }
      ]
    }
  ]
}

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

以上所述是小编给大家介绍的VUE Element-UI多级菜单动态渲染的组件详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！