快捷導(dǎo)航

vue+el-menu實現(xiàn)菜單欄無限多層級分類

更新時間：2022年03月28日 11:23:22 作者：lvan找不到bug

這篇文章主要為大家詳細介紹了vue+el-menu實現(xiàn)菜單欄無限多層級分類，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue+el-menu實現(xiàn)菜單欄無限多層級分類的具體代碼，供大家參考，具體內(nèi)容如下

思路：數(shù)據(jù)格式須為數(shù)組內(nèi)部多層嵌套模式，利用遞歸渲染菜單欄數(shù)據(jù)實現(xiàn)菜單多層級分類。

1.模擬菜單數(shù)據(jù)，引入封裝組件

<template>
? <div class="container">
? ? <el-container>
? ? ? <el-header>Header</el-header>
? ? ? <el-container class="container-body">
? ? ? ? <el-aside class="menu-container">
?
? ? ? ? ? <!-- 實現(xiàn)菜單多級分類 -->
? ? ? ? ? <el-menu
? ? ? ? ? ? default-active="1-1-1-1"
? ? ? ? ? ? background-color="#545c64"
? ? ? ? ? ? text-color="#fff"
? ? ? ? ? ? active-text-color="#ffd04b">
? ? ? ? ? ? <!-- 引入組件 -->
? ? ? ? ? ? <menu-tree :menuData="menuList"></menu-tree>
? ? ? ? ? </el-menu>
?
? ? ? ? </el-aside>
? ? ? ? <el-main class="main-container">Main</el-main>
? ? ? </el-container>
? ? </el-container>
? </div>
</template>
?
<script>
import MenuTree from '../../components/MentTree'
export default {
? components: {
? ? MenuTree
? },
? data () {
? ? return {
? ? ? menuList: [
? ? ? ? {
? ? ? ? ? index: '1',
? ? ? ? ? icon: 'el-icon-menu',
? ? ? ? ? name: '一級菜單01',
? ? ? ? ? children: [
? ? ? ? ? ? {
? ? ? ? ? ? ? index: '1-1',
? ? ? ? ? ? ? icon: 'el-icon-film',
? ? ? ? ? ? ? name: '二級菜單01',
? ? ? ? ? ? ? children: [
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? index: '1-1-1',
? ? ? ? ? ? ? ? ? icon: 'el-icon-date',
? ? ? ? ? ? ? ? ? name: '三級菜單01',
? ? ? ? ? ? ? ? ? children: [
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? index: '1-1-1-1',
? ? ? ? ? ? ? ? ? ? ? icon: 'el-icon-monitor',
? ? ? ? ? ? ? ? ? ? ? name: '四級菜單01'
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? index: '1-1-2',
? ? ? ? ? ? ? ? ? icon: 'el-icon-headset',
? ? ? ? ? ? ? ? ? name: '三級菜單02'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ]
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? index: '1-2',
? ? ? ? ? ? ? icon: 'el-icon-data-line',
? ? ? ? ? ? ? name: '二級菜單02'
? ? ? ? ? ? }
? ? ? ? ? ]
? ? ? ? },
? ? ? ? {
? ? ? ? ? index: '2',
? ? ? ? ? icon: 'el-icon-s-data',
? ? ? ? ? name: '一級菜單02'
? ? ? ? },
? ? ? ? {
? ? ? ? ? index: '3',
? ? ? ? ? icon: 'el-icon-s-operation',
? ? ? ? ? name: '一級菜單03'
? ? ? ? },
? ? ? ? {
? ? ? ? ? index: '4',
? ? ? ? ? icon: 'el-icon-user',
? ? ? ? ? name: '一級菜單04'
? ? ? ? }
? ? ? ]
? ? }
? },
? mounted () {},
? methods: {}
}
</script>

2.MenuTree組件內(nèi)部實現(xiàn)菜單欄遞歸渲染

<template>
? <div>
? ? <template v-for="menu in this.menuData">
? ? ? <el-submenu :key="menu.index" :index="menu.index" v-if="menu.children">
? ? ? ? ? <template slot="title">
? ? ? ? ? ? ? <i :class="menu.icon"></i>
? ? ? ? ? ? ? <span slot="title">{{menu.name}}</span>
? ? ? ? ? </template>
? ? ? ? ? <menu-tree :menuData="menu.children"></menu-tree>
? ? ? </el-submenu>
? ? ? <el-menu-item :key="menu.index" :index="menu.index" v-else>
? ? ? ? ? <i :class="menu.icon"></i>
? ? ? ? ? <span slot="title">{{menu.name}}</span>
? ? ? </el-menu-item>
? ? </template>
? </div>
</template>
?
<script>
export default {
? props: ['menuData'],
? name: 'MenuTree'
}
</script>

3.完成效果展示