您好,登錄后才能下訂單哦!
這篇文章主要講解了如何實(shí)現(xiàn)element中el-menu組件的無限極循環(huán),內(nèi)容清晰明了,對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下,相信大家閱讀完之后會(huì)有幫助。
實(shí)現(xiàn)思路主要組件嵌套(組件自己調(diào)用自己)
下面是組件所需要的數(shù)據(jù)
{ "code": 1, "data": { "menuVoList": [ { "childList": [ { "childList": [], "menu": { "createBy": "0-1", "createTime": 1587610158, "id": "2f006aed6a114579bd8b9809724428f7", "name": "系統(tǒng)用戶權(quán)限管理", "parentId": "6d68079a16b94292990f612237bd048e", "path": "/userallotrole", "updateBy": "0-1", "updateTime": 1587610221 } }, { "childList": [], "menu": { "createBy": "0-1", "createTime": 1587605059, "id": "c948265cdf27420eb7b6b502292c5990", "name": "系統(tǒng)用戶管理", "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": "系統(tǒng)角色管理", "parentId": "ce5704f647d341fe8334ad12c6dd4a6b", "path": "/setrole", "updateBy": "0-1", "updateTime": 1587469340 } }, { "childList": [], "menu": { "createBy": "0-1", "createTime": 1587469360, "id": "61d0e4fecbed407d89b1ea5878072374", "name": "設(shè)置角色權(quán)限", "parentId": "ce5704f647d341fe8334ad12c6dd4a6b", "path": "/authorization", "updateBy": "0-1", "updateTime": 1587469360 } }, { "childList": [], "menu": { "createBy": "0-1", "createTime": 1587469520, "id": "a1a2f6bcbfba4a7f9178ef03ea0fe5b0", "name": "權(quán)限管理", "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": "成功" }
現(xiàn)在我們來設(shè)置組件 (在 componet 文件夾里面建一個(gè) menu.vue) 代碼如下
<template> <div> <template v-for="value in menuData"> <el-submenu v-if="value.childList.length > '0'" :index="value.menu.name"> //判斷傳進(jìn)來的數(shù)據(jù)中 childList 數(shù)組length 是否大于零, 如果大于零表示 不是不需要在循環(huán)下去了 <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 => { //我這里是請(qǐng)求后臺(tái)得來得數(shù)據(jù),沒有數(shù)據(jù)直接用我上面得數(shù)據(jù),不過得像我下面這樣處理 if (res.status === 200) { this.list = res.data.data.menuVoList } }) } }
這樣,em-menu 組件的無限極循環(huán)便實(shí)現(xiàn)了,注意,我 上面代碼中 el-menu 的屬性可能多了一些,請(qǐng)根據(jù)自己需要?jiǎng)h除
看完上述內(nèi)容,是不是對(duì)如何實(shí)現(xiàn)element中el-menu組件的無限極循環(huán)有進(jìn)一步的了解,如果還想學(xué)習(xí)更多內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。