这篇文章主要讲解了如何实现element中el-menu组件的无限极循环，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。
实现思路主要组件嵌套（组件自己调用自己）
下面是组件所需要的数据
{
"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 的属性可能多了一些，请根据自己需要删除
看完上述内容，是不是对如何实现element中el-menu组件的无限极循环有进一步的了解，如果还想学习更多内容，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
