Vue+element 动态生成导航栏方法（全）

动态生成的思路

1.通过对标签的循环遍历生成导航栏
2.通过导航栏自身的递归调用形成

1.循环遍历生成的方法

• 先判断是否有对应的二级菜单再进行对应的循环

           
                    
                    
      {{ children.menuName }}           
                   

{{ item.menuName }}         
 

缺点：无法实现多级导航,无法进行一级菜单间的排序

这是最最最简单的二级菜单实现方法所以适用范围也少

• 用一个div或template标签包含在外层进行循环，里面用v-if判断是否含有children并执行对应标签

           
      
  
                    
                    
      {{ children.menuName }}           
                   
{{ item.menuName }}         
 
        
 

缺点：无法实现多级导航栏（或者说会使代码冗杂不确定性高）

适用于层级较少简单的导航栏

---

2.通过递归的方式生成导航栏（重头戏！！）

要实现一个动态灵活的导航栏就必须导航栏本身的排序，层级都是可控可调的所以上面的导航栏的实现仍然不够灵活与动态

• 递归生成也非常简单！！

  核心：二次封装导航栏

先对el-menu里面进行编写

对el-menu进行封装

使用的时候调用这个组件

调用的时候

​

文章末尾福利

element-ui的隐藏控件—el-scrollbar 对滚动条样式的修改

你是否还在纠结于滚动条样式太过于丑陋，局部的修改又不是很方便，当文本超出范围的时候加一句”overflow:scroll;“ 但看到那又宽又古老的样式实在不忍吐槽。
现在只需要在需要的的地方加上一句话就好啦

在使用时要设置外层容器高度并且要设置el-scrollbar 的高度为100%
例如：

至于滚动条更深入的使用大家可以自行百度o(*≧▽≦)ツ ~ ┴┴