分享一个VUE Element-UI 的多级菜单动态渲染的组件
来源：互联网 发布：centos 离线安装ruby 编辑：程序博客网 时间：2024/05/29 13:49
以下是组件代码：
<template> <div class="LeftMenu"> <el-submenu v-if="menuItem.childs&&menuItem.entity" v-for="menuItem in menuItems" :key="menuItem.entity.id" :index="menuItem.entity.name"> <template slot="title"> <i :class="menuItem.entity.icon"></i> <span> {{menuItem.entity.alias}}</span> </template> <LeftMenu :menuItems="menuItem.childs"></LeftMenu> </el-submenu> <el-menu-item v-if="menuItem.childs==null&&menuItem.entity" v-for="menuItem in menuItems" :key="menuItem.entity.id" :index="menuItem.entity.name"> <i :class="menuItem.entity.icon"></i> <span slot="title">{{menuItem.entity.alias}}</span> </el-menu-item> </div></template><script> export default { name: 'LeftMenu', props: ['menuItems'], data() { return {} }, methods: {} }</script><style scoped></style>外部调用也比较能简单
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#F0F6F6" text-color="#3C3F41" active-text-color="black"> <!--左侧菜单组件--> <LeftMenu :menuItems="menuItems"></LeftMenu> </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的递归组件是个比较好的解决方案，可以较大的节约开发时间降低开发成本。
如果您有兴趣，不防加入我们的开源框架minsx：https://github.com/MinsxFramework 期待您的到来！
阅读全文
0 0
- 分享一个VUE Element-UI 的多级菜单动态渲染的组件
- vue.js+element-ui动态配置菜单
- vue+element-ui+ajax的一个表格实例
- vue element-ui dialog组件
- UI组件渲染的方式
- 推荐一个vue, angular的组件分享网站--轮子工厂
- 在vue项目中使用element-ui的Upload上传组件
- vue与element-ui的结合，脚手架第一步【vue日记】
- VUE 使用新版本 element-ui 组件库 Select 组件时， value 值为对象时的 BUG 处理
- VUE 使用新版本 element-ui 组件库 Select 组件时， value 值为对象时的 BUG 处理
- 一个windows xp风格的多级菜单
- vue单一组件下动态修改数据时的全部重渲染
- element-ui 组件的 table 多选
- element ui 的树形组件上手
- 使用Vue.js和Element-UI做一个简单的登录页面
- 【PC端vue ui框架学习】vue项目如何使用基于vue的UI框架Element
- Android UI--简单的多级导航菜单的做法之一
- UI组件的即刻渲染和延迟渲染
- Python---filter()函数
- Spring Boot入门
- pandas.DataFrame.any与pandas.DataFrame.all
- 记一次打PSU26635745的过程
- MYSQL AND 和 OR
- 分享一个VUE Element-UI 的多级菜单动态渲染的组件
- 利用Github Pages+Hexo搭建个人博客
- （阿里/百度/腾讯）云服务器建站全过程（Ubuntu Server 16.04.1 LTS 64位）
- 【scala 小试牛刀1】scala vs python 解一元二次方程
- const char *a与char const *a与char * const a的区别
- 路由器与交换机的基本工作原理
- 空调模拟控制器
- Vue开发跨端应用（五）cordova-ios运行问题
- 自动化测试的意义到底在哪里？
