蝙蝠岛资源网 Design By www.hbtsch.com
实现思路主要组件嵌套(组件自己调用自己)
下面是组件所需要的数据
{ "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.hbtsch.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com
暂无element 中 el-menu 组件的无限极循环思路代码详解的评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]