element ui 菜单 动态生成 导航

1. 利用饿了么ui 的 导航菜单组件 （el-menu）来结合 后台返回的 菜单数组进行循环嵌套。

2.看如下代码

 <el-menu
        :default-active="activeIndex2"
        :unique-opened="true"   
        mode="horizontal"
        @select="handleSelect"
        background-color="#3b72c5"
        text-color="#fff"
        active-text-color="#9DD9FF">
        <template v-for="(item,index) in items">
         //判断一级菜单里面是否有二级菜单
          <template v-if="item.children.length!=0">
                //id如果是数字的需加上''               
                  <el-submenu  :index="item.id+''" :key="index"                    
                     @click.native="openMenu(item,index)">
                    <template>
                       <i :class="item.icon"></i>
                       <span slot="title">{{ item.label }}</span>
                    </template>
                      //判断是否有三级菜单
                    <template v-for="(subItem,idx) in item.children">
                      <el-submenu
                          v-if="subItem.children.length!=0"
                          :index="subItem.id+''"
                          :key="idx">
                          <template slot="title">{{ subItem.label }}</template>
                          <el-menu-item
                              v-for="(threeItem,i) in subItem.children"
                              @click.native="openMenu1(threeItem,i)"
                              :key="i"
                              :index="threeItem.id+''">{{ threeItem.label }}</el-menu-    
                        item>
                      </el-submenu>
                    
                    //二级菜单
                      <el-menu-item
                          v-else
                          :index="subItem.id+''"
                          :key="idx"
                          @click.native="openMenu1(subItem,idx)"
                          >{{ subItem.label }}
                      </el-menu-item>
                    </template>  
                 </el-submenu>
          </template > 

          <!-- //一级菜单 -->
          <template v-else>
              <el-menu-item  :index="item.id+''"  :key="index" 
                   @click.native="openMenu(item,index)"    id="leftMenuItem"   
                >
                 <!-- <template slot="title" >
                  <i :class="item.icon" style="color:#fff;font-size:14px;"  v- 
                        bind:style="'color:'+(index==activeIndex2?'#9dd9ff':'#fff')"/>
                  <span style="font-size:14px;"  
                          :class="index==activeIndex2?'activ1':'activ2'"> </span>
                </template>  -->
                 {{ item.label }}
                </el-menu-item>   
          </template>
        
        </template>
   
</el-menu>

3.这样可以给每一级菜单单独添加事件，对某些需求有重要的作用。