很久没写博客了原因就是懒,
刚下班今天写了个基于 element 导航菜单实现多层菜单 (可以无限多层)
组件核心思想就是组件递归 (这个有时候面试会问到)
可以看看这篇我写的简单文章《vue 组件递归》
然后就判断 children 有没有内容, 没内容就是选择项嘛, 内容就是父菜单
只提供最基础实现功能各种回调可以参考 element 文档去改, 我只写了主体
element 导航菜单官方文档: https://element.eleme.cn/2.0/#/zh-CN/component/menu
效果图:
- // ====== 组件: ==================
- <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 多层导航菜单" 不过这位大佬写的比我详细多了,
我写的只是初级版帮助理解而已, 进阶的话看这篇文章是很好的: https://blog.csdn.net/qq_31126175/article/details/88824380
来源: https://www.cnblogs.com/konghaowei/p/12489579.html