扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要讲解了如何实现element中el-menu组件的无限极循环，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。
成都创新互联公司是一家专注于成都网站建设、做网站与策划设计,麻阳网站建设哪家好?成都创新互联公司做网站,专注于网站建设十载,网设计领域的专业建站公司;建站业务涵盖:麻阳等地区。麻阳做网站价格咨询:028-86922220
实现思路主要组件嵌套（组件自己调用自己）
下面是组件所需要的数据
{
"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） 代码如下
//判断传进来的数据中 childList 数组length 是否大于零， 如果大于零表示 不是不需要在循环下去了 {{ value.menu.name }} {{ value.menu.name }}
接下来 在需要使用 menu 组件的地方引入刚才定义的组件
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组件的无限极循环有进一步的了解，如果还想学习更多内容，欢迎关注创新互联行业资讯频道。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网