Vue+element 动态生成导航栏方法(全)

动态生成的思路

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

1.循环遍历生成的方法

  • 先判断是否有对应的二级菜单再进行对应的循环
           
                    
                    
      {{ children.menuName }}           
                   

{{ item.menuName }}         
 

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

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

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

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

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


2.通过递归的方式生成导航栏(重头戏!!)

要实现一个动态灵活的导航栏就必须导航栏本身的排序,层级都是可控可调的所以上面的导航栏的实现仍然不够灵活与动态
  • 递归生成也非常简单!!

    核心:二次封装导航栏

先对el-menu里面进行编写




对el-menu进行封装

使用的时候调用这个组件




调用的时候


文章末尾福利

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

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

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

   

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

你可能感兴趣的:(vue实战)