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不能沒發循環。