<template>
    <div>
      <template v-for="(item) in dataList">
        <el-submenu :index="item.value" v-if="item.children.length" :key="item.name">
          <template slot="title">
            <i :class=" item.icon"></i>
            <span>{{ item.name }}</span>
          </template>
          <navItem :dataList="item.children"></navItem>
        </el-submenu>
        <template v-else>
          <el-menu-item :index="item.value" :key="item.name">
            <i :class=" item.icon"></i>
            <span slot="title">{{ item.name }}</span>
          </el-menu-item>
        </template>
      </template>
    </div>
  </template>
  
  <script>
  export default {
    name: 'NavItem',
    props: {
      dataList: { //导航列表
        type: Array,
        default: () => []
      },
      openKey: { //当前状态为展开的导航key
        type: String,
        default: ''
      },
      clickKey:{  //当前激活导航的key
        type:String,
        default:''
      }
    },
    data() {
      return {
  
      }
    },
  }
  </script>
  <style scoped lang="scss">
  </style>
  