{{navmenu.entity.alias}}:key="navmenu.entity.id" :data="navmenu" :index="navme..._element-ui三个文件实现三级菜单">
当前位置:   article > 正文

vue三级菜单渲染_详解VUE Element-UI多级菜单动态渲染的组件

element-ui三个文件实现三级菜单

以下是组件代码:

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">

最后看下效果:

10a5486e34035d32634c738d4f28950e.png

值得一提的是,完成此菜单需要后端的配合,笔者这里后端给出的数据为:

{

"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多级菜单动态渲染的组件详解整合,希望对大家有所帮助

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/不正经/article/detail/579915
推荐阅读
相关标签
  

闽ICP备14008679号