详解VUE Element-UI多级菜单动态渲染的组件
更新时间：2019年04月25日 14:11:03 作者：王世春
这篇文章主要介绍了VUE Element-UI多级菜单动态渲染的组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
以下是组件代码：
<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中如何给多个按钮动态添加类名问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
这篇文章主要介绍了vue innerHTML 绑定单击事件不生效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
在vue中，并不是任何时候数据都是双向绑定的，解决数据没有被双向绑定我们可以使用 vm.$set 实例方法，该方法是全局方法 Vue.set 的一个别名，这篇文章主要介绍了vue中$set用法详细讲解,需要的朋友可以参考下2022-12-12
本文是脚本之家小编给大家收藏整理的关于vue项目中遇到的一点小问题，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
使用vue.js2.0 + ElementUI开发后台管理系统详细教程（一）
这篇文章主要介绍了使用vue.js2.0 + ElementUI开发后台管理系统详细教程（一）的相关资料,需要的朋友可以参考下2017-01-01
这篇文章主要介绍了vue接口请求加密实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
vee-validator是一种基于vue模板的轻量级校验框架。本文主要讨论的是vee-validator校验方案，感兴趣的朋友跟随小编一起看看吧2019-11-11
这篇文章主要介绍了vue使用ElementUI时导航栏默认展开功能的实现,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-07-07
vue中axios给后端传递参数出现等于号和双引号的问题及解决方法
这篇文章主要介绍了vue中axios给后端传递参数出现等于号和双引号要怎么解决,项目场景我是传递一个string字符给后端时候报错，随手把这个问题记录下来了，需要的朋友可以参考下解决方案2022-11-11
这篇文章主要介绍了Vue源码中一些util函数，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
最新评论