element 中 el-menu 组件的无限极循环
程序员文章站
2022-04-11 18:47:43
实现思路主要组件嵌套(组件自己调用自己) 下面是组件所需要的数据 { "code": 1, "data": { "menuVoList": [ { "childList": [ { "childList": [], "menu": { "createBy": "0-1", "createTime": ......
实现思路主要组件嵌套(组件自己调用自己)
下面是组件所需要的数据
{
"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-ui组件中input等的change事件中传递自定义参数
-
vue使用Element组件时v-for循环里的表单项验证方法
-
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
-
element 中 el-menu 组件的无限极循环
-
vue中element-ui组件默认css样式修改的四种方式
-
在vue2.0中引用element-ui组件库的方法
-
vue中element组件样式修改无效的解决方法
-
element-ui组件中input等的change事件中传递自定义参数
-
vue封装element组件库中的封装通用table,是否启用多选、按钮及是否分页,样式可自定义设置
-
element上传组件循环引用及简单时间倒计时的实现