实现思路主要组件嵌套(组件自己调用自己)
下面是组件所需要的数据
{ "code": 1, "data": { "menuVoList": [ { "childList": [ { "childList": [], "menu": { "createBy": "0-1", "createTime": 1587610158, "id": "2f006aed6a114579bd8b9809724428f7", "name": "系统用户权限管理", "parentId": "6d68079a16b94292990f612237bd048e", "path": "/userallotrole", "updateBy": "0-1", "updateTime": 1587610221 } }, { "childList": [], "menu": { "createBy": "0-1", "createTime": 1587605059, "id": "c948265cdf27420eb7b6b502292c5990", "name": "系统用户管理", "parentId": "6d68079a16b94292990f612237bd048e", "path": "/user", "updateBy": "0-1", "updateTime": 1587610230 } } ], "menu": { "createBy": "0-1", "createTime": 1587605025, "id": "6d68079a16b94292990f612237bd048e", "name": "用户管理", "parentId": "", "path": "/#", "updateBy": "0-1", "updateTime": 1587610117 } }, { "childList": [ { "childList": [], "menu": { "createBy": "0-1", "createTime": 1587469457, "id": "d4b70897052742bb860cf14cea8cf131", "name": "新建/修改菜单", "parentId": "82e5ca1ab2e04d8faffeb973286771ec", "path": "/newMenu", "updateBy": "0-1", "updateTime": 1587469457 } } ], "menu": { "createBy": "0-1", "createTime": 1587469385, "id": "82e5ca1ab2e04d8faffeb973286771ec", "name": "菜单管理", "parentId": "", "path": "", "updateBy": "0-1", "updateTime": 1587469426 } }, { "childList": [ { "childList": [], "menu": { "createBy": "0-1", "createTime": 1587468494, "id": "3a092edd120d40b79322d8486e53e5a1", "name": "系统角色管理", "parentId": "ce5704f647d341fe8334ad12c6dd4a6b", "path": "/setrole", "updateBy": "0-1", "updateTime": 1587469340 } }, { "childList": [], "menu": { "createBy": "0-1", "createTime": 1587469360, "id": "61d0e4fecbed407d89b1ea5878072374", "name": "设置角色权限", "parentId": "ce5704f647d341fe8334ad12c6dd4a6b", "path": "/authorization", "updateBy": "0-1", "updateTime": 1587469360 } }, { "childList": [], "menu": { "createBy": "0-1", "createTime": 1587469520, "id": "a1a2f6bcbfba4a7f9178ef03ea0fe5b0", "name": "权限管理", "parentId": "ce5704f647d341fe8334ad12c6dd4a6b", "path": "/resource", "updateBy": "0-1", "updateTime": 1587624251 } } ], "menu": { "createBy": "0-1", "createTime": 1587468417, "id": "ce5704f647d341fe8334ad12c6dd4a6b", "name": "角色管理", "parentId": "", "path": "", "updateBy": "0-1", "updateTime": 1587468417 } } ] }, "message": "成功" }
现在我们来设置组件 (在 componet 文件夹里面建一个 menu.vue) 代码如下
<template> <div> <template v-for="value in menuData"> <el-submenu v-if="value.childList.length > '0'" :index="value.menu.name"> //判断传进来的数据中 childList 数组length 是否大于零, 如果大于零表示 不是不需要在循环下去了 <template slot="title"> <i class="el-icon-s-tools" /> <span slot="title">{{ value.menu.name }}</span> </template> <MenuTree :menu-data="value.childList" /> </el-submenu> <el-menu-item v-else :index="value.menu.path"> <span slot="title">{{ value.menu.name }}</span> </el-menu-item> </template> </div> </template> <script> export default { name: 'MenuTree', props: ['menuData'] } </script> <style lang="scss" > .el-submenu__title i { color: #fff; } .el-menu--collapse { width: 54px; } </style>
接下来 在需要使用 menu 组件的地方引入刚才定义的组件
<template> <el-menu class="el-menu-vertical-demo" :collapse="isCollapse" background-color="#4A5A74" active-text-color="#ffd04b" text-color="#fff" :unique-opened="true" :default-active="this.$route.path" @select="handleSelect" > <menuTree :menu-data="list" /> </el-menu> </template> import menuTree from '@/component/menu' export default{ components: { menuTree }, data: { list: [] }, methods: { getMenuList({}).then(res => { //我这里是请求后台得来得数据,没有数据直接用我上面得数据,不过得像我下面这样处理 if (res.status === 200) { this.list = res.data.data.menuVoList } }) } }
这样,em-menu 组件的无限极循环便实现了,注意,我 上面代码中 el-menu 的属性可能多了一些,请根据自己需要删除
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年09月21日
2024年09月21日
- 黑神话悟空上品狸侍长精魄获取方法一览|上品狸侍长精魄收集攻略
- 大自然环保音乐系列《风花雪月》4CD/DTS[WAV分轨]
- 模拟之声慢刻CD甄妮《86精选[日本母带]》[低速原抓WAV+CUE]
- [ABC]安娜-胆麦发烧女声[6N纯银镀膜][2016[低速原抓WAV+CUE]
- 任天堂今晚举行直面会!第三方及独立游戏展示
- 《哆啦A梦的铜锣烧店物语》发售!开罗公式+哆啦A梦
- 任天堂公布《塞尔达传说》系列时间线:野炊与王泪独立在外
- 五条人.2012-一些风景2CD【刀马旦】【WAV+CUE】
- 陈奕迅.2013-Easons.Life演唱会2CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 许美静.1995-遗憾(新马版)【上华】【WAV+CUE】
- 《叶倩文 歌声情缘》[WAV+CUE][410MB]
- 《张国荣 首首动听经典不容错过 追忆的风 2CD》[WAV+CUE][870MB]
- 《腾格尔 容中尔甲 亚东 高原三星 男人篇 3CD》[WAV/分轨][1GB]
- 命运圣契公测实测可用兑换码大全 命运圣契最新兑换码分享
- 黑神话悟空上品疾蝠精魄获取方法一览|上品疾蝠精魄收集攻略