ElementUI NavMenu递归嵌套

工作中遇到的一个问题，动态获取的导航需要进行递归嵌套展示，于是封装了一个组件：

组件NavMenu

<template>
  <div class="navmenu">
    <template v-for="navMenu in navMenus">
      <!-- 最后一级菜单 -->
      <el-menu-item v-if="navMenu.children.length == 0" :key="navMenu.id" :data="navMenu" :index="navMenu.href || navMenu.id">
        <i class="viconfont" :class="navMenu.icon"></i>
        <span slot="title">{{navMenu.name}}</span>
      </el-menu-item>

      <!-- 此菜单下还有子菜单 -->
      <el-submenu v-if="navMenu.children.length > 0" :key="navMenu.id" :data="navMenu" :index="navMenu.href || navMenu.id">
        <template slot="title">
          <i class="viconfont" :class="navMenu.icon"></i>
          <span>{{navMenu.name}}</span>
        </template>
        <!-- 递归 -->
        <navmenu :navMenus="navMenu.children"></navmenu>
      </el-submenu>
    </template>
  </div>
</template>

<script>
export default {
  name: 'Navmenu',
  props: ['navMenus'],
  data() {
    return {}
  },
  methods: {
  }
}
</script>

使用demo.vue

<template>
  <div>
    <el-menu :default-active="$route.path" unique-opened router>
      <navmenu :navMenus="menuData"></navmenu>
    </el-menu>
  </div>
</template>

<script>
  import Navmenu from "@/components/navmenu";

  export default {
    data() {
      return {
        menuData: [{
          icon: "",
          href: "/a",
          name: "菜单一",
          id:"1",
          isShow: "1",
          children: []
        },{
          icon: "",
          href: "/b",
          name: "菜单二",
          id:"2",
          isShow: "1",
          children: []
        },{
          icon: "",
          href: "/c",
          name: "菜单三",
          id:"3",
          isShow: "1",
          children: []
        }]
      }
    },
    components: {
      Navmenu: Navmenu
    },
    methods: {

    },
    mounted() {

    }
  }
</script>

<style lang="less" scoped>
</style>