实现不限层级的Element的NavMenu

2019-10-11

做管理后台开发的时候,需要用到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>

完活。

原文链接:segmentfault.com

上一篇:npm install test 全方位解读
下一篇:当面试官问你:你有没有打造过属于自己的ui组件库?
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部