Element ui中menu组件(el-menu/el-menu-item/el-submenu/template) 层级结构和用法

（此篇文章写下的时间是2020年，所以如今Element UI都更新了不知道多少版了，肯定会有些许变化，请勿完全照搬照抄，虽然可能这部分代码没什么大的变动，但还是要以官方文档为准，此文仅仅是借鉴，理解具体思路，然后再按照官方的例子来应用到自己的项目中）

初学者，刚接触，用到不知道怎么回事刚接触，今天就特意各种粘贴复制示例代码，终于自己试出来了，具体的结构层级关系。

看完就能知道这个menu的结构上怎么组织和使用

1. 我准备的示例：

先上代码，格式加了空行，方便看结构：（前期模板组件的导入和注册都略过了）

选项1选项2选项3选项1导航二导航三导航四

2. 好戏正式开始：

看上面的示例代码， 最外面一层是由   标签 包裹的， 先从简单的开始，看倒数一二三，后面那三个导航，因为都是最简单的结构，

仅一级导航栏

我取用 导航二 来做演示。 用   标签 包裹的 , 里面的标签  是图标没什么说的， 那个标签    就是导航栏最顶上一层的一级导航（没有子导航栏的），我们来看一下效果：

导航二

只有一个导航栏，没别的了

总结，当你想要的导航栏只有一级的时候，我们就仅采用我这种结构的ok了，   包裹要显示的以及导航栏内容

一级导航栏 + 一级导航栏下的子导航栏

观察最开始 官方element ui 给的案例，应该是和第一个导航栏有关，我们拿那一部分做尝试，

这个是用  标签包裹的 

一级导航栏+子导航

上面竟然没有显示我要他显示的内容，点开后的效果见下图

竟然我要的一级导航标题到了里面， 不对不对, 再回头看下示例，

先试下红色圈出的部分，添加上template 看下

子导航栏

  点开后： 看起来还ok吧，

但就是子导航栏的格式有点问题，不是我们想要的效果，不过一级导航栏的显示是有了，看来这个 template 标签是用来控制 submenu 的 对应的 那级的 导航栏内容的显示。

然后我们开始尝试 黄色框里面的部分：

子导航栏选项1

点开后： 出了个选项一，

看来 submenu 标签就是用来控制 多一层 子导航栏， 而里面的 template 标签就是用来设置 那一级导航栏 的标题内容的，

而实际的子导航栏，就单纯的一个导航栏【没有子导航栏那种】， 使用 el-menu-item 标签来实现

一级导航栏+子导航栏组

现在我们再回过头来看导航组

官网示例提供了两种 初始化 导航组的方式

通过el-menu-item-group组件可以实现菜单进行分组，分组名可以通过title属性直接设定，也可以通过具名 slot 来设定

分组一 选项A分组一 选项B分组二 选项C选项D选项E - 选项1

第一种和第二种分组方式的差别：

第一种以 template 标签方式 声明了组的名称

第二种以 munu-item-group 的  title 属性的方式 声明

里面的子导航栏 都是采用   标签 来声明的，这里都一样

上面就是我分析的结构，根据具体情况看看你需要哪种结构

然后就是说一下属性：

属性： 

* default-active：表示当前active的菜单项的编号 
* index：类型为字符串，在每一个el-menu-item组件上都有一个编号，给default-active标记

参考： element-ui使用导航栏跳转路由用法

* slot：slot ,就是插入的意思

参考： element ui slot

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！