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

1.创建一个侧边导航栏

<div class="whr-side-menu">
    <menutree :menu="somenu"></menutree>
</div>

2.创建menutree这个组件

<el-menu default-active="">
<template v-for="循环一下数据，就不写了">
 <submenu index="" v-if="menu.children.length>0" :menu="menu.children">
       </submenu>
       <el-menu-item index="" v-else></el-menu-item>
</template>      
</el-menu>

思想就是用一般创建类似树状数据结构的方法去创建这个menu，这样避免想第一种方式那个template在最外层进行循环。

先把root，各节点渲染出来，然后再把里面的子节点递归渲染出来

3.创建一个submenu组件

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

如归子菜单还有子菜单，就一直渲染。

这样子就大功告成！

还有第三种方式，就是手写渲染！