element-ui实现无限级动态菜单

菜单组件：

<el-menu
      class="el-menu-demo"
      :default-active="activeMenu"
      background-color="#324157"
      text-color="#bfcbd9"
      @select="handleSelect"
    >
    <menu-tree :menus="menus" />
</el-menu>

树组件 MenuTree ：

<template>
  <div>
    <div v-for="menu in menus" :key="menu.id">
      <el-submenu
        v-if="menu.children && menu.children.length"
        :index="menu.url || menu.name || activeMenu"
      >
        <template slot="title"><i v-if="menu.icon" :class="menu.icon"></i>{{menu.name}}</template>

        <menu-tree :menus="menu.children" />
      </el-submenu>

      <nuxt-link v-else :to="menu.url" exact>
        <el-menu-item :index="menu.url || menu.name">
          <i v-if="menu.icon" :class="menu.icon"></i>{{menu.name}}
        </el-menu-item>
      </nuxt-link>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import Component from 'class-component'
  import MenuTree from '@/components/MenuTree'

  @Component({
    components: {
      MenuTree
    },
    props: {
      menus: {
        type: Array,
        default: () => []
      }
    }
  })
  export default class menuTree extends Vue {
  }
</script>