element-ui菜单导航的三种递归写法（一）

1.建一个侧边目录

<div class="whr-side-menu">
      <el-menu
       class="el-menu-vertical-demo"
     	:router="true"
      	:default-active="$route.path"
      	>
            <menutree :menu="somenu"></menutree>

      </el-menu>

</div>

2.新建一个组件menutree

//新建一个组件menutree，name:"menutree"，这样就能自己调用自己（递归）
<template>
    <fragment>
        <template v-for="(item,index_0) in menu">

            <el-menu-item v-if="item.children.length==0" :key="index_0" 		  :index="item.route?item.route:''"
                          @click="addProcess(item)">
                <i :class="item.icon"></i>
                <span slot="title">{{item.menu_name}}</span>
            </el-menu-item>

            <el-submenu v-else :index="item.route" :key="index_0">
                <template slot="title">
                    <i :class="item.icon"></i>
                    <span slot="title">{{item.menu_name}}</span>
                </template>
                <menutree :menu="item.children"></menutree>
            </el-submenu>
        </template>

    </fragment>
</template>

1.首先安装一下vue-fragment这个插件。

2.在main.js里配置一下

import Fragment from 'vue-fragment'
Vue.use(Fragment.Plugin)

这样就可以用<fragment></fragment>的标签了。

大功告成了！

到此就搞定了，这样做的原因主要是template不能没发循环。