<template>
  <div>
    <!--叶子级菜单-->
    <template v-if="item.navInfoList && item.navInfoList.length === 0">
      <el-menu-item :key="item.navId" :index="item.navUrl">
        {{item.navTitle}}
      </el-menu-item>
    </template>
    <!--父级菜单-->
    <el-submenu v-else :index="item.navUrl" style="text-align: left">
<!--      <span slot="title" style="font-size: 17px;">-->
<!--        <i :class="item.iconCls"></i>-->
        {{item.navTitle}}
<!--      </span>-->
      <template v-for="child in item.navInfoList">
        <navigation-item v-if="child.navInfoList && child.navInfoList.length>0" :key="child.navId" :item="child"/>
        <el-menu-item v-else :key="child.navId" :index="child.navUrl">
<!--          <i :class="child.icon"></i>-->
          {{child.navTitle}}
        </el-menu-item>
      </template>
    </el-submenu>

  </div>


</template>

<script>
export default {
  name: "ElNav",
  props: {
    item: {
      type: Object,
      required: true
    }
  }

}
</script>

<style scoped>

</style>
