<template>
  <el-submenu :index="nav.name">
    <template v-slot:title>
      <i :class="nav.icon" v-if="nav.icon"></i>
      <span>{{nav.meta.title}}</span>
    </template>

    <template v-for="item in nav.children">
      <nav-sub-menu :nav="item" v-if="item.children && item.children.length" :key="item.name" />
      <el-menu-item :index="item.name" :key="item.name" v-else-if="!item.children">
        <i :class="item.icon" v-if="item.icon"></i>
        <span>{{item.meta.title}}</span>
      </el-menu-item>
    </template>

  </el-submenu>
</template>

<script>
export default {
  name: 'nav-sub-menu',
  props: ['nav']
}
</script>