{{navmenu.entity.alias}}:key="navmenu.entity.id" :data="navmenu" :index="navme..._element-ui三个文件实现三级菜单">
赞
踩
以下是组件代码:
:key="navmenu.entity.id" :data="navmenu" :index="navmenu.entity.name" :route="navmenu.entity.value"
disabled="">
{{navmenu.entity.alias}}
:key="navmenu.entity.id" :data="navmenu" :index="navmenu.entity.name">
{{navmenu.entity.alias}}
export default {
name: 'navmenu',
props: ['navmenus'],
data() {
return {}
},
methods: {}
}
外部调用也比较简单
default-active="0"
class="el-menu-vertical-demo"
@select="menuselected"
background-color="#f0f6f6"
text-color="#3c3f41"
active-text-color="black">
最后看下效果:
值得一提的是,完成此菜单需要后端的配合,笔者这里后端给出的数据为:
{
"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多级菜单动态渲染的组件详解整合,希望对大家有所帮助
如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。