好资源导航 » 文章资讯 » element 中 el-menu 组件的无限极循环思路代码详解

element 中 el-menu 组件的无限极循环思路代码详解

2023-07-26 15:48:04 83

实现思路主要组件嵌套（组件自己调用自己）

下面是组件所需要的数据

{
"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）代码如下





{{value.menu.name}}

.el-submenu__titlei{ color:#fff; } .el-menu--collapse{ width:54px; }

接下来在需要使用menu组件的地方引入刚才定义的组件



importmenuTreefrom'@/component/menu'
exportdefault{
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组件的无限极循环的文章就介绍到这了,更多相关el-menu组件无限极循环内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

返回顶部
514930285
czq8825@qq.com

element 中 el-menu 组件的无限极循环思路代码详解

热门推荐

随机推荐