element 中 el-menu 组件的无限极循环

1.components中创建组件进行封装

<template>
    <div>
        <template v-for="value in menuData">
            <el-submenu v-if="value.childList.length > '0'" :index="value.menu.name">
                <template slot="title">
                    <i class="el-icon-s-tools" />
                    <span slot="title">{{ value.menu.name }}</span>
                </template>
                <MenuTree :menu-data="value.childList" />
            </el-submenu>
            <el-menu-item v-else :index="value.menu.path">
                <span slot="title">{{ value.menu.name }}</span>
            </el-menu-item>
        </template>
    </div>
</template>
<script>
export default {
    name: 'MenuTree',
    props: ['menuData']

}
</script>
<style lang="scss" >
.el-submenu__title i {
    color: #fff;
}

.el-menu--collapse {
    width: 54px;
}
</style>

在所需要的文件中引入

import menuTree from './components/menu.vue'

3.使用

<template>
  <div id="app">

    <el-menu router class="el-menu-vertical-demo" :collapse="false" background-color="#4A5A74"
      active-text-color="#ffd04b" text-color="#fff" :unique-opened="true" :default-active="this.$route.path"
      @select="handleSelect">
      <menuTree :menu-data="list" />
    </el-menu>
    <router-view />
  </div>
</template>