menu什么意思

Elementui中menu组件（el-menuel-menu-itemel-submen。。

。

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

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

1.我准备的⽰例：

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

default-active="2"

class="el-menu-vertical-demo"

@open="handleOpen"

@clo="handleClo"

background-color="#545c64"

text-color="#fff"

active-text-color="#ffd04b">

导航⼀

分组⼀

选项1

选项2

选项3

选项4

选项1

导航⼆

导航三

导航四

2.好戏正式开始：

看上⾯的⽰例代码，最外⾯⼀层是由标签包裹的，先从简单的开始，看倒数⼀⼆三，后⾯那三个导航，因为都是

最简单的结构，

仅⼀级导航栏

我取⽤导航⼆来做演⽰。⽤标签包裹的,⾥⾯的标签是图标没什么说的，那个标

签就是导航栏最顶上⼀层的⼀级导航（没有⼦导航栏的），我们来看⼀下效果：

default-active="1"

background-color="#333744"

text-color="#fff"

active-text-color="#ffd04b">

导航⼆

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

总结，当你想要的导航栏只有⼀级的时候，我们就仅采⽤我这种结构的ok了，包裹要显⽰的以及导航

栏内容

⼀级导航栏+⼀级导航栏下的⼦导航栏

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

这个是⽤标签包裹的

default-active="1"

background-color="#333744"

text-color="#fff"

active-text-color="#ffd04b"

>

⼀级导航栏+⼦导航

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

竟然我要的⼀级导航标题到了⾥⾯，不对不对,再回头看下⽰例，

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

default-active="1"

background-color="#333744"

text-color="#fff"

active-text-color="#ffd04b"

>

⼀级dhl+zdh

⼦导航栏

点开后：看起来还ok吧，

但就是⼦导航栏的格式有点问题，不是我们想要的效果，不过⼀级导航栏的显⽰是有了，看来这个template标签是⽤来控制submenu的

对应的那级的导航栏内容的显⽰。

然后我们开始尝试黄⾊框⾥⾯的部分：

default-active="1"

background-color="#333744"

text-color="#fff"

active-text-color="#ffd04b"

>

⼀级dhl+zdh

⼦导航栏

选项4

选项1

点开后：出了个选项⼀，

看来submenu标签就是⽤来控制多⼀层⼦导航栏，⽽⾥⾯的template标签就是⽤来设置那⼀级导航栏的标题内容的，

⽽实际的⼦导航栏，就单纯的⼀个导航栏【没有⼦导航栏那种】，使⽤el-menu-item标签来实现

⼀级导航栏+⼦导航栏组

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

官⽹⽰例提供了两种初始化导航组的⽅式

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

default-active="1"

background-color="#333744"

text-color="#fff"

active-text-color="#ffd04b"

>

选项⼀

选项⼀-分组⼀

分组⼀选项A

分组⼀选项B

分组⼆选项C

选项D

选项E

选项E-选项1

第⼀种和第⼆种分组⽅式的差别：

第⼀种以template标签⽅式声明了组的名称

第⼆种以munu-item-group的title属性的⽅式声明

⾥⾯的⼦导航栏都是采⽤标签来声明的，这⾥都⼀样

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

然后就是说⼀下属性：

属性：

*default-active：表⽰当前active的菜单项的编号

*index：类型为字符串，在每⼀个el-menu-item组件上都有⼀个编号，给default-active标记

参考：

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

参考：