溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了如何實現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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
