element多层导航菜单很久没写博客了原因就是懒，
刚下班今天写了个基于element导航菜单实现多层菜单（可以⽆限多层）
组件核⼼思想就是组件递归（这个有时候⾯试会问到）
可以看看这篇我写的简单⽂章《》
然后就判断children有没有内容，没内容就是选择项嘛，内容就是⽗菜单
只提供最基础实现功能各种回调可以参考element⽂档去改，我只写了主体
效果图：
// ====== 组件： ==================
<template>
<div>
<template v-for="(item,index) in list">
    <!-- 标题 -->
<template v-if="item.children.length">
<el-submenu :key="index" :index="item.index">
<template :index="item.index" slot="title">
<i :class="item.icon"></i>
<span>{{item.name}}</span>
</template>
<el-menu-item-group>
<sideBar :list="item.children"></sideBar>
</el-menu-item-group>
</el-submenu>
</template>
    <!-- 选项 -->
<template v-else>
<el-menu-item :key="index" :index="item.index">
<i :class="item.icon"></i>
<span>{{item.name}}</span>
</el-menu-item>
</template>
</template>
</div>
</template>
<script>
export default {
name: "sideBar",
导航菜单props: {
list: Array
}
};
</script>
<style></style>
// ====== 调⽤： ==================
<!-- html调⽤ -->
<el-menu>
<SideBar :list="sideBarData"></SideBar>
</el-menu>
// 这个是数据格式
sideBarData: [
{
name: "菜单1",
index: "menu1",
icon: "el-icon-menu",
children: [
{
name: "菜单1-1",
index: "menu1-1",
icon: "el-icon-menu",
children: [
{
name: "菜单1-1-1",
index: "menu1-1-1",
icon: "el-icon-menu",
children: []
},
{
name: "菜单1-1-2",
index: "menu1-1-2",
icon: "el-icon-menu",
children: []
}
]
},
{
name: "菜单1-2",
index: "menu1-2",
icon: "el-icon-menu",
children: []
}
]
},
{
name: "菜单2",
index: "menu2",
icon: "el-icon-document-copy",
children: [
{
name: "数据集管理2",
index: "dataset2",
icon: "el-icon-document-copy",
children: []
},
]
},
{
name: "菜单2",
index: "menu3",
icon: "el-icon-folder",
children: []
}
]
补个截图可能会好看好理解些：
最后推荐个⽂章也是写“element多层导航菜单”不过这位⼤佬写的⽐我详细多了，

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。