详解VUEElement-UI多级菜单动态渲染的组件
以下是组件代码:
网站建设哪家好,找创新互联公司!专注于网页设计、网站建设、微信开发、重庆小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了绥中免费建站欢迎大家使用!
外部调用也比较简单
最后看下效果:
值得一提的是,完成此菜单需要后端的配合,笔者这里后端给出的数据为:
{ "entity": null, "childs": [ { "entity": { "id": 1, "parentMenuId": 0, "name": "systemManage", "icon": "el-icon-message\r\n", "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-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 }, "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多级菜单动态渲染的组件详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持!
文章题目:详解VUEElement-UI多级菜单动态渲染的组件
标题链接:http://scyanting.com/article/pepdhd.html