element多层导航菜单
程序员文章站
2022-06-25 08:41:19
很久没写博客了原因就是懒, 刚下班今天写了个基于element导航菜单实现多层菜单(可以无限多层) 组件核心思想就是组件递归(这个有时候面试会问到) 可以看看这篇我写的简单文章《vue组件递归》 然后就判断children有没有内容,没内容就是选择项嘛,内容就是父菜单 只提供最基础实现功能各种回调可 ......
很久没写博客了原因就是懒,
刚下班今天写了个基于element导航菜单实现多层菜单(可以无限多层)
组件核心思想就是组件递归(这个有时候面试会问到)
可以看看这篇我写的简单文章《》
然后就判断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
上一篇: 粗盐有哪些用处?腌呀、炒呀