詳解VUE Element-UI多級(jí)菜單動(dòng)態(tài)渲染的組件
更新時(shí)間：2019年04月25日 14:11:03 作者：王世春
這篇文章主要介紹了VUE Element-UI多級(jí)菜單動(dòng)態(tài)渲染的組件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
以下是組件代碼：
<template>
<div class="navMenu">
<label v-for="navMenu in navMenus">
<el-menu-item v-if="navMenu.childs==null&&navMenu.entity&&navMenu.entity.state==='ENABLE'"
:key="navMenu.entity.id" :data="navMenu" :index="navMenu.entity.name" :route="navMenu.entity.value"
disabled="">
<i :class="navMenu.entity.icon"></i>
<span slot="title">{{navMenu.entity.alias}}</span>
</el-menu-item>
<el-submenu v-if="navMenu.childs&&navMenu.entity&&navMenu.entity.state==='ENABLE'"
:key="navMenu.entity.id" :data="navMenu" :index="navMenu.entity.name">
<template slot="title">
<i :class="navMenu.entity.icon"></i>
<span> {{navMenu.entity.alias}}</span>
</template>
<NavMenu :navMenus="navMenu.childs"></NavMenu>
</el-submenu>
</label>
</div>
</template>
<script>
export default {
name: 'NavMenu',
props: ['navMenus'],
data() {
return {}
},
methods: {}
}
</script>
<style scoped>
</style>
外部調(diào)用也比較簡(jiǎn)單
<!--左側(cè)菜單組件-->
<el-menu
default-active="0"
class="el-menu-vertical-demo"
@select="menuSelected"
background-color="#F0F6F6"
text-color="#3C3F41"
active-text-color="black">
<NavMenu :navMenus="leftMenus"></NavMenu>
</el-menu>
最后看下效果：
值得一提的是，完成此菜單需要后端的配合，筆者這里后端給出的數(shù)據(jù)為：
{
"entity": null,
"childs": [
{
"entity": {
"id": 1,
"parentMenuId": 0,
"name": "systemManage",
"icon": "el-icon-message\r\n",
"alias": "系統(tǒng)管理",
"state": "ENABLE",
"sort": 0,
"value": null,
"type": "NONE",
"discription": "用于系統(tǒng)管理的菜單",
"createUserId": 1
},
"childs": [
{
"entity": {
"id": 3,
"parentMenuId": 1,
"name": "authManage",
"icon": "el-icon-loading",
"alias": "權(quán)限管理",
"state": "ENABLE",
"sort": 0,
"value": "/system/auth",
"type": "LINK",
"discription": "用于權(quán)限管理的菜單",
"createUserId": 1
},
"childs": null
},
{
"entity": {
"id": 4,
"parentMenuId": 1,
"name": "roleManage",
"icon": "el-icon-bell",
"alias": "角色管理",
"state": "ENABLE",
"sort": 1,
"value": "/system/role",
"type": "LINK",
"discription": "用于角色管理的菜單",
"createUserId": 1
},
"childs": null
},
{
"entity": {
"id": 2,
"parentMenuId": 1,
"name": "menuManage",
"icon": "el-icon-edit",
"alias": "菜單管理",
"state": "ENABLE",
"sort": 2,
"value": "/system/menu",
"type": "LINK",
"discription": "用于菜單管理的菜單",
"createUserId": 1
},
"childs": null
},
{
"entity": {
"id": 5,
"parentMenuId": 1,
"name": "groupManage",
"icon": "el-icon-mobile-phone\r\n",
"alias": "分組管理",
"state": "ENABLE",
"sort": 3,
"value": "/system/group",
"type": "LINK",
"discription": "用于分組管理的菜單",
"createUserId": 1
},
"childs": null
}
]
},
{
"entity": {
"id": 6,
"parentMenuId": 0,
"name": "userManage",
"icon": "el-icon-news",
"alias": "用戶管理",
"state": "ENABLE",
"sort": 1,
"value": null,
"type": "NONE",
"discription": "用于用戶管理的菜單",
"createUserId": 1
},
"childs": [
{
"entity": {
"id": 7,
"parentMenuId": 6,
"name": "accountManage",
"icon": "el-icon-phone-outline\r\n",
"alias": "帳號(hào)管理",
"state": "ENABLE",
"sort": 0,
"value": "",
"type": "NONE",
"discription": "用于帳號(hào)管理的菜單",
"createUserId": 1
},
"childs": [
{
"entity": {
"id": 14,
"parentMenuId": 7,
"name": "emailManage",
"icon": "el-icon-sold-out\r\n",
"alias": "郵箱管理",
"state": "ENABLE",
"sort": 0,
"value": "/content/email",
"type": "LINK",
"discription": "用于郵箱管理的菜單",
"createUserId": 1
},
"childs": null
},
{
"entity": {
"id": 13,
"parentMenuId": 7,
"name": "passManage",
"icon": "el-icon-service\r\n",
"alias": "密碼管理",
"state": "ENABLE",
"sort": 1,
"value": "/content/pass",
"type": "LINK",
"discription": "用于密碼管理的菜單",
"createUserId": 1
},
"childs": null
}
]
},
{
"entity": {
"id": 8,
"parentMenuId": 6,
"name": "integralManage",
"icon": "el-icon-picture",
"alias": "積分管理",
"state": "ENABLE",
"sort": 1,
"value": "/user/integral",
"type": "LINK",
"discription": "用于積分管理的菜單",
"createUserId": 1
},
"childs": null
}
]
},
{
"entity": {
"id": 9,
"parentMenuId": 0,
"name": "contentManage",
"icon": "el-icon-rank",
"alias": "內(nèi)容管理",
"state": "ENABLE",
"sort": 2,
"value": null,
"type": "NONE",
"discription": "用于內(nèi)容管理的菜單",
"createUserId": 1
},
"childs": [
{
"entity": {
"id": 10,
"parentMenuId": 9,
"name": "classifyManage",
"icon": "el-icon-printer",
"alias": "分類(lèi)管理",
"state": "ENABLE",
"sort": 0,
"value": "/content/classify",
"type": "LINK",
"discription": "用于分類(lèi)管理的菜單",
"createUserId": 1
},
"childs": null
},
{
"entity": {
"id": 11,
"parentMenuId": 9,
"name": "articleManage",
"icon": "el-icon-star-on",
"alias": "文章管理",
"state": "ENABLE",
"sort": 1,
"value": "/content/article",
"type": "LINK",
"discription": "用于文章管理的菜單",
"createUserId": 1
},
"childs": null
},
{
"entity": {
"id": 12,
"parentMenuId": 9,
"name": "commentManage",
"icon": "el-icon-share",
"alias": "評(píng)論管理",
"state": "ENABLE",
"sort": 2,
"value": "/content/comment",
"type": "LINK",
"discription": "用于評(píng)論管理的菜單",
"createUserId": 1
},
"childs": null
}
]
}
]
}
總結(jié)：當(dāng)遇到多叉樹(shù)或無(wú)限層級(jí)問(wèn)題時(shí)，vue的遞歸組件是個(gè)比較好的解決方案，可以較大的節(jié)約開(kāi)發(fā)時(shí)間降低開(kāi)發(fā)成本。
以上所述是小編給大家介紹的VUE Element-UI多級(jí)菜單動(dòng)態(tài)渲染的組件詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- element-plus+Vue3實(shí)現(xiàn)表格數(shù)據(jù)動(dòng)態(tài)渲染
- element-plus日歷(Calendar)動(dòng)態(tài)渲染以及避坑指南
- vue+elementUI組件遞歸實(shí)現(xiàn)可折疊動(dòng)態(tài)渲染多級(jí)側(cè)邊欄導(dǎo)航
- vue element 中的table動(dòng)態(tài)渲染實(shí)現(xiàn)（動(dòng)態(tài)表頭）
- vue element動(dòng)態(tài)渲染、移除表單并添加驗(yàn)證的實(shí)現(xiàn)
- VUE2.0+ElementUI2.0表格el-table循環(huán)動(dòng)態(tài)列渲染的寫(xiě)法詳解
- Vue+ElementUI實(shí)現(xiàn)表單動(dòng)態(tài)渲染、可視化配置的方法
- Element-Plus實(shí)現(xiàn)動(dòng)態(tài)渲染圖標(biāo)的示例代碼
相關(guān)文章
vue中如何給多個(gè)按鈕動(dòng)態(tài)添加類(lèi)名
這篇文章主要介紹了vue中如何給多個(gè)按鈕動(dòng)態(tài)添加類(lèi)名問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要介紹了vue?innerHTML?綁定單擊事件不生效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
在vue中，并不是任何時(shí)候數(shù)據(jù)都是雙向綁定的，解決數(shù)據(jù)沒(méi)有被雙向綁定我們可以使用?vm.$set?實(shí)例方法，該方法是全局方法?Vue.set?的一個(gè)別名，這篇文章主要介紹了vue中$set用法詳細(xì)講解,需要的朋友可以參考下2022-12-12
記錄vue項(xiàng)目中遇到的一點(diǎn)小問(wèn)題
本文是腳本之家小編給大家收藏整理的關(guān)于vue項(xiàng)目中遇到的一點(diǎn)小問(wèn)題，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
使用vue.js2.0 + ElementUI開(kāi)發(fā)后臺(tái)管理系統(tǒng)詳細(xì)教程（一）
這篇文章主要介紹了使用vue.js2.0 + ElementUI開(kāi)發(fā)后臺(tái)管理系統(tǒng)詳細(xì)教程（一）的相關(guān)資料,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了vue接口請(qǐng)求加密實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
vue中使用vee-validator完成表單校驗(yàn)方案
vee-validator是一種基于vue模板的輕量級(jí)校驗(yàn)框架。本文主要討論的是vee-validator校驗(yàn)方案，感興趣的朋友跟隨小編一起看看吧2019-11-11
vue使用ElementUI時(shí)導(dǎo)航欄默認(rèn)展開(kāi)功能的實(shí)現(xiàn)
這篇文章主要介紹了vue使用ElementUI時(shí)導(dǎo)航欄默認(rèn)展開(kāi)功能的實(shí)現(xiàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-07-07
vue中axios給后端傳遞參數(shù)出現(xiàn)等于號(hào)和雙引號(hào)的問(wèn)題及解決方法
這篇文章主要介紹了vue中axios給后端傳遞參數(shù)出現(xiàn)等于號(hào)和雙引號(hào)要怎么解決,項(xiàng)目場(chǎng)景我是傳遞一個(gè)string字符給后端時(shí)候報(bào)錯(cuò)，隨手把這個(gè)問(wèn)題記錄下來(lái)了，需要的朋友可以參考下解決方案2022-11-11
這篇文章主要介紹了Vue源碼中一些util函數(shù)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04