做管理后台开发的时候,需要用到 Element 的 NavMenu 组件,于是乎,翻开文档,大致是这样实现的。
<el-menu>
<el-menu-item index="1"> 标题一 </el-menu-item>
<el-submenu index="2">
<template slot="title"> 标题二 </template>
<el-menu-item index="2-1"> 选项 1 </el-menu-item>
</el-submenu>
</el-menu>
非常简单,But,实际开发中,就不是这么一回儿事儿了,我们的导航菜单,层级是不确定的。有可能是一层,有可能是两层,有可能是三层,崩溃不崩溃。按照这个中规中矩的写法,似乎要写到天荒地老了。
我们来梳理一下如何实现。
- 一层,使用 elMenuItem,很好~
- 二层,使用 elSubmenu 嵌套 elMenuItem,很好~
- 三层,使用 elSubmenu 嵌套 elMenuItem 嵌套 elSubmenu,不太好了
- …
是不是联想起来什么了,对,递归。
赶紧翻翻 vue 文档吧,果真,有一种叫做递归组件的东西,说白了,就是组件中再调用组件。(注意:递归组件一定要记得写好 name 属性)
所以,赶紧实现一下吧。
先来写一下需要递归的 MenuGroup 组件
<div id="menu-group">
<el-menu-item index="1"> 标题一 </el-menu-item>
<el-submenu index="2">
<template slot="title"> 标题二 </template>
<menu-group></menu-group>
</el-submenu>
</div>
然后写一下 Menu 组件
<el-menu>
<menu-group></menu-group>
</el-menu>
完活。