动态生成的思路

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

1.循环遍历生成的方法

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

 <el-menu   class="first-navigation"  
      :default-active="this.$route.path"          
     router          
      mode="horizontal"   
       @select="handleSelect" >          
      <el-submenu v-for="item in nav" :key="item.menuName" v-if="item.children" :index="item.code">              
      <template slot="title">{{ item.menuName }}</template>              
      <el-menu-item           
      v-for="children in item.children"                :
      key="children.menuName"               
       :index="children.code"              
       >{{ children.menuName }}</el-menu-item>           
        </el-submenu>           
<el-menu-item   v-for="item in nav" :key="item.menuName"  v-if="!item.children" :index="item.code">
{{ item.menuName }}</el-menu-item>         
 </el-menu>

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

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

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

 <el-menu   class="first-navigation"  
      :default-active="this.$route.path"          r
      outer          
      mode="horizontal"   
       @select="handleSelect" >          
      <div class="navigation-title" v-for="item in nav" :key="item.menuName">  
      <el-submenu v-if="item.children" :index="item.code">              
      <template slot="title">{{ item.menuName }}</template>              
      <el-menu-item           
      v-for="children in item.children"                :
      key="children.menuName"               
       :index="children.code"              
       >{{ children.menuName }}</el-menu-item>           
        </el-submenu>           
<el-menu-item v-else :index="item.code">{{ item.menuName }}</el-menu-item>         
 </div>        
 </el-menu>

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

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

---

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

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

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

  核心：二次封装导航栏

先对el-menu里面进行编写

<template> 
 <div v-if="item.children">    
 <template v-if="item.children.length == 0">        
     <el-menu-item :index="item.path">  
     {{item.title}}        
     </el-menu-item>    
 </template>
    <el-submenu v-else :index="item.path">      
         <template slot="title" >           
         {{item.title}}      
         </template>
<template v-for="child in item.children">        
      <navigation-item  v-if="child.children&&child.children.length>0"     
      :item="child"          
      :key="child.path"/>        
      <el-menu-item v-else :key="child.path" :index="child.path">       
      {{child.title}}        
       </el-menu-item>      
          </template>   
   </el-submenu>  
 </div>
</template>

<script>
export default {
         name: 'navigationItem',
         props: {
           item: {
             type: Object,
            required: true
            }
            }       
            }
</script>

对el-menu进行封装

使用的时候调用这个组件

<template>
         <div class="first-navigation">
           <el-scrollbar wrap-class="scrollbar-wrapper">
             <el-menu
               router
               mode="horizontal"
               background-color="#304156"
               text-color="#bfcbd9"
               active-text-color="#409EFF">
             <navigation-item   v-for="menu in menuList" :key="menu.path" :item="menu" />
           </el-menu>
         </el-scrollbar>
         </div>
 </template>
<script>
      import navigationItem from './navigationItem

   export default {
         name:'navigation',
         components: { navigationItem},
         props:{
           menuList: {
               type: Array,
              required: true
           }
         }
       }
       </script>
</script>

调用的时候

<template>
    <navigation :menuList="navList"/>
</template>
​
<script>
import  navigation from './navigation.vue'
export default {
  name: 'app',
  components: { navigation},
  data() {
    return {
      navList:"",
    }
  }
}
</script>

文章末尾福利

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

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

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

   <el-scrollbar style="height:100%">

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