详解VUE Element-UI多级菜单动态渲染的组件 程序员文章站 2023-12-13 23:19:58 以下是组件代码： 以下是组件代码： <template> <div class="navmenu"> <label v-for="navmenu in navmenus"> <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> export default { name: 'navmenu', props: ['navmenus'], data() { return {} }, methods: {} } </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> 最后看下效果： 值得一提的是，完成此菜单需要后端的配合，笔者这里后端给出的数据为： { "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多级菜单动态渲染的组件详解整合，希望对大家有所帮助 上一篇： 下一篇： 推荐阅读 详解VUE Element-UI多级菜单动态渲染的组件 vue服务端渲染页面缓存和组件缓存的实例详解 详解VUE Element-UI多级菜单动态渲染的组件 vue服务端渲染页面缓存和组件缓存的实例详解 详解VUE里子组件如何获取父组件动态变化的值 VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解 使用Vue开发动态刷新Echarts组件的教程详解 浅谈vue单一组件下动态修改数据时的全部重渲染 详解Vue.js3.0 组件是如何渲染为DOM的 vue+elementUI组件递归实现可折叠动态渲染多级侧边栏导航