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>

如歸子菜單還有子菜單，就一直渲染。

這樣子就大功告成！

還有第三種方式，就是手寫渲染！