基于Vue3和Element Plus的遞歸組件實(shí)現(xiàn)多級導(dǎo)航欄功能(示例代碼)
更新時(shí)間：2025年06月17日 11:15:48 作者：ArabySide
本文基于 Vue3 和 Element Plus,通過遞歸組件實(shí)現(xiàn)了可動(dòng)態(tài)渲染的多級導(dǎo)航欄,利用自引用數(shù)據(jù)結(jié)構(gòu)和深度控制避免無限循環(huán),同時(shí)結(jié)合 TypeScript 規(guī)范數(shù)據(jù)類型并優(yōu)化組件封裝,感興趣的朋友一起看看吧
前言
在日常工作中，我能經(jīng)常能碰到那種自引用類似的數(shù)據(jù)結(jié)構(gòu)。比方說樹形的導(dǎo)航欄結(jié)構(gòu)，我們期望Vue渲染時(shí)遞歸遍歷組件樹，直到葉子節(jié)點(diǎn)。一個(gè)組件在其自身的模板中調(diào)用自身的組件，這便是Vue中的遞歸組件。
一、遞歸的意義
想象一個(gè)這樣的一個(gè)對象數(shù)組。每個(gè)對象有基本的path路徑，name名稱，label標(biāo)簽，icon圖標(biāo)。這四個(gè)屬性是必須的，個(gè)別對象本身有children屬性包含它的子菜單內(nèi)容。并且children屬性本身也是對應(yīng)一個(gè)包含path，name，label，icon四個(gè)基本屬性和children可選屬性的對象。
這樣的話我們就構(gòu)建了一個(gè)典型的自引用類似的數(shù)據(jù)結(jié)構(gòu)，相互之間互相嵌套。相信大家已經(jīng)發(fā)現(xiàn)了，在我們不知道嵌套深度的情況下，是沒法通過循環(huán)完整解析出全部數(shù)據(jù)。并且遞歸的邏輯復(fù)用性是優(yōu)于循環(huán)。這樣的結(jié)果也會(huì)使遞歸在代碼居然簡潔性，靈活性，方便擴(kuò)展性。
二、遞歸組件的實(shí)現(xiàn)——基于element-plus UI的多級導(dǎo)航欄
2.1 element-plus Menu菜單官方示例
我們接下來要開發(fā)的多級導(dǎo)航欄是基于element-plus的menu菜單組件。觀察官方代碼結(jié)構(gòu)，組件最由el-menu標(biāo)簽包裹，el-sub-menu為一級菜單，內(nèi)嵌的el-menu-item為一級菜單的子內(nèi)容。但el-sub-menu里面也可以繼續(xù)添加el-sub-menu標(biāo)簽，作為一個(gè)二級菜單。實(shí)現(xiàn)組件樹的結(jié)構(gòu)。
樹狀導(dǎo)航欄代碼如下：
<el-menu> <!-- 最外層菜單容器 -->
├─ <el-sub-menu> <!-- 一級菜單（可展開） -->
│ ├─ 菜單標(biāo)題（含圖標(biāo)和文本）
│ └─ <el-sub-menu> <!-- 二級菜單（嵌套在一級菜單內(nèi)） -->
│ ├─ 二級菜單標(biāo)題
│ └─ <el-menu-item> <!-- 二級菜單子項(xiàng) -->
├─ <el-menu-item> <!-- 一級菜單子項(xiàng)（非展開項(xiàng)） -->
└─ <el-menu-item> <!-- 一級菜單子項(xiàng) -->
</el-menu>完整實(shí)例代碼
<template>
<el-row class="tac">
<el-col :span="12">
<h5 class="mb-2">Default colors</h5>
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
>
<el-sub-menu index="1">
<template #title>
<el-icon><location /></el-icon>
<span>Navigator One</span>
</template>
<el-menu-item-group title="Group One">
<el-menu-item index="1-1">item one</el-menu-item>
<el-menu-item index="1-2">item two</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group Two">
<el-menu-item index="1-3">item three</el-menu-item>
</el-menu-item-group>
<el-sub-menu index="1-4">
<template #title>item four</template>
<el-menu-item index="1-4-1">item one</el-menu-item>
</el-sub-menu>
</el-sub-menu>
<el-menu-item index="2">
<el-icon><icon-menu /></el-icon>
<span>Navigator Two</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<el-icon><document /></el-icon>
<span>Navigator Three</span>
</el-menu-item>
<el-menu-item index="4">
<el-icon><setting /></el-icon>
<span>Navigator Four</span>
</el-menu-item>
</el-menu>
</el-col>
</el-row>
</template>
<script lang="ts" setup>
import {
Document,
Menu as IconMenu,
Location,
Setting,
} from '@element-plus/icons-vue'
const handleOpen = (key: string, keyPath: string[]) => {
console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
console.log(key, keyPath)
}
</script>2.2 接口定義
定義組件的對象數(shù)組結(jié)構(gòu)。path路徑，name名稱，label標(biāo)簽，icon圖標(biāo)，這四個(gè)屬性是必須的。個(gè)別對象本身有children屬性包含它的子菜單內(nèi)容。
export interface NavTreeMenuItem {
path: string;
name?: string;
label: string;
icon: string;
children?: NavTreeMenuItem[];
}2.3 組件遞歸
vue3中實(shí)現(xiàn)遞歸組件是組件在其模板中直接調(diào)用自身。比如我定義了一個(gè)組件名稱叫menuTreeItem.vue，我就可以在該vue文件內(nèi)直接調(diào)用menuTreeItem。這是基于這主要?dú)w功于Vue 3 單文件組件的編譯時(shí)處理機(jī)制和 < script setup> 的特性。
在menuTreeItem.vue的el-sub-menu節(jié)點(diǎn)里判斷children屬性是否有值，并且沒有超過最大遞歸深度。
值得注意的是，使用遞歸方法要注意無限遞歸這個(gè)漏洞風(fēng)險(xiǎn)，需要設(shè)置最大深度，避免無限遞歸
menuTreeItem.vue文件片段
<template>
<template v-for="item in treeData" :key="item.path" :index="item.path">
<el-sub-menu v-if="item.children && item.children.length > 0 && currentDepth < maxDepth" :index="item.path">
<!-- -->
<menuTreeItem :tree-data="item.children" :current-depth="currentDepth + 1"
:max-depth="maxDepth"></menuTreeItem>
<!-- -->
</el-sub-menu>
</template>
</template>2.4 父組件封裝遞歸組件
前文我們把需要遞歸的組件封裝成單獨(dú)子組件，最后嵌套在父組件里，防止不必要的內(nèi)容被遍歷渲染。
<template>
<el-aside :style="{ width: menuWidth }">
<h3 class="mb-2" v-once>后臺(tái)系統(tǒng)</h3>
<div class="sidebar-menu">
<el-menu default-active="2" class="my-el-menu" @open="handleOpen" @close="handleClose">
<menuTreeItem :tree-data="treeData" :max-depth="5"></menuTreeItem>
</el-menu>
</div>
</el-aside>
</template>三、完整代碼——基于element-plus UI的多級導(dǎo)航欄
3.1 組件架構(gòu)
navigationAside
├─ index.vue <!-- 核心組件 -->
├─ menuTreeItem.vue <!-- 遞歸組件 -->
└─ types.ts <!-- 接口類型 -->
</el-menu>3.2 types.ts
export interface NavTreeMenuItem {
path: string;
name?: string;
label: string;
icon: string;
url?: string;
children?: NavTreeMenuItem[];
}3.3 menuTreeItem.vue
<template>
<template v-for="item in treeData" :key="item.path" :index="item.path">
<el-sub-menu v-if="item.children && item.children.length > 0 && currentDepth < maxDepth" :index="item.path">
<template #title>
<component class="icons" :is="item.icon"></component>
<span>{{ item.label }}</span>
</template>
<MenuTreeItem :tree-data="item.children" :isRoot="false" :current-depth="currentDepth + 1"
:max-depth="maxDepth"></MenuTreeItem>
</el-sub-menu>
<el-menu-item v-else :index="item.path">
<component class="icons" :is="item.icon"></component>
<span>{{ item.label }}</span>
</el-menu-item>
</template>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router'
const router = useRouter()
import {
Document,
Menu as IconMenu,
Location,
Setting,
} from '@element-plus/icons-vue'
import { NavTreeMenuItem } from './types'
const props = withDefaults(defineProps<{
treeData: NavTreeMenuItem[];
isRoot?: boolean;
currentDepth?: number; // 當(dāng)前深度
maxDepth?: number; // 最大深度
}>(), {
isRoot: true,
currentDepth: 1, // 默認(rèn)當(dāng)前深度為1
maxDepth: 3 // 默認(rèn)最大深度為3
})
</script>
<style lang="less" scoped>
:deep(.icons) {
height: 18px;
margin-right: 5px;
width: 18px;
}
</style>3.4 index.vue
<template>
<el-aside :style="{width: menuWidth}">
<h3 v-if="!isCollapse" class="mb-2" v-once>天津城安遠(yuǎn)傳系統(tǒng)</h3>
<h3 v-else class="mb-2" v-once>遠(yuǎn)傳</h3>
<div class="sidebar-menu">
<el-menu default-active="2"
class="my-el-menu"
:collapse="isCollapse"
@open="handleOpen"
@close="handleClose" >
<menuTreeItem :tree-data="treeData" :max-depth="5"></menuTreeItem>
</el-menu>
</div>
</el-aside>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import {useWebSettingDataStore} from '../../stores'
import menuTreeItem from './menuTreeItem.vue'
const router = useRouter()
import {
Document,
Menu as IconMenu,
Location,
Setting,
} from '@element-plus/icons-vue'
import { NavTreeMenuItem } from './types'
const props = defineProps<{
treeData: NavTreeMenuItem[];
isRoot?: boolean;
}>();
const store = useWebSettingDataStore()
const isCollapse = computed(() => store.state.isCollapse);
const menuWidth = computed(() => store.state.isCollapse ? '64px' : '180px')
const handleOpen = (key: string, keyPath: string[]) => {
console.log("open")
console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
console.log("close")
console.log(key, keyPath)
}
</script>
<style lang="less" scoped>
.el-menu {
border-right: none;
height: 100%;
}
.el-aside {
display: flex;
flex-direction: column;
//border-right: 1px solid #e4e7ed;
background-color: #304156;
h3 {
line-height: 13px;
color: #fff;
text-align: center;
flex-shrink: 0;
/* 防止被壓縮 */
}
}
.sidebar-menu {
flex: 1;
overflow-y: auto;
padding: 10px 0;
}
/* 可選：美化滾動(dòng)條 */
.sidebar-menu::-webkit-scrollbar {
width: 4px;
}
.sidebar-menu::-webkit-scrollbar-thumb {
background-color: #bfcbd9;
border-radius: 3px;
}
.my-el-menu{
--el-menu-bg-color: #304156;
--el-menu-text-color: #bfcbd9;
--el-menu-hover-bg-color: #263445;
--el-menu-active-color: #409eff;
}
</style>3.5 組件調(diào)用與運(yùn)行結(jié)果
<commNavigationAside :tree-data="navTreeData"></commNavigationAside> import commNavigationAside from "@/components/navigationAside/index.vue"
總結(jié)
本文基于 Vue3 和 Element Plus，通過遞歸組件實(shí)現(xiàn)了可動(dòng)態(tài)渲染的多級導(dǎo)航欄，利用自引用數(shù)據(jù)結(jié)構(gòu)和深度控制避免無限循環(huán)，同時(shí)結(jié)合 TypeScript 規(guī)范數(shù)據(jù)類型并優(yōu)化組件封裝。
到此這篇關(guān)于基于Vue3和Element Plus的遞歸組件實(shí)現(xiàn)多級導(dǎo)航欄的文章就介紹到這了,更多相關(guān)vue Element Plus導(dǎo)航欄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue + Element-ui的下拉框el-select獲取額外參數(shù)詳解
這篇文章主要介紹了Vue + Element-ui的下拉框el-select獲取額外參數(shù)詳解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue數(shù)據(jù)變化監(jiān)聽錯(cuò)誤的常見原因與解決方案
在?Vue.js?開發(fā)中,watch?是一個(gè)強(qiáng)大的工具,用于監(jiān)聽數(shù)據(jù)的變化并執(zhí)行相應(yīng)的操作,然而,許多開發(fā)者在使用?watch?時(shí)會(huì)遇到數(shù)據(jù)變化未被正確監(jiān)聽的問題,這可能導(dǎo)致程序邏輯錯(cuò)誤或視圖更新失敗,本文將探討這些問題的常見原因,并提供相應(yīng)的解決方案,需要的朋友可以參考下2025-03-03
這篇文章主要為大家介紹了手寫一個(gè)vite插件教程示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
vue中g(shù)et和post請求的區(qū)別點(diǎn)總結(jié)
在本篇文章里小編給大家分享的是一篇關(guān)于vue中g(shù)et和post請求的區(qū)別點(diǎn)總結(jié)內(nèi)容，對此有興趣的朋友們可以跟著學(xué)習(xí)下。2021-12-12
CLI是一個(gè)全局安裝的npm包，提供了終端里的vue命令。它可以通過vue create快速搭建一個(gè)新項(xiàng)目，或者直接通過vue serve構(gòu)建新想法的原型。你也可以通過vue ui通過一套圖形化界面管理你的所有項(xiàng)目2022-11-11
這篇文章主要介紹了Vue中的單向數(shù)據(jù)流原則,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03
這篇文章主要介紹了提高vue.js中大型數(shù)據(jù)的性能,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下2019-06-06
本文介紹了如何使用Vue 3編寫一個(gè)帶提示的表格組件,并假設(shè)每行都有一個(gè)保存按鈕,如果需要全部保存,還會(huì)加上驗(yàn)證,感興趣的朋友一起看看吧2025-02-02
Mint UI 基于 Vue.js 移動(dòng)端組件庫
Mint UI 包含豐富的 CSS 和 JS 組件，能夠滿足日常的移動(dòng)端開發(fā)需要。接下來通過本文給大家分享Mint UI 基于 Vue.js 移動(dòng)端組件庫，需要的朋友參考下吧2017-11-11
vue3容器布局和導(dǎo)航路由實(shí)現(xiàn)示例
這篇文章主要為大家介紹了vue3容器布局和導(dǎo)航路由實(shí)現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06