<template>
  <div class="nav" stype="height:50px">
    <!--TabNav-->
    <el-tabs :value="currTab" @tab-click="handleTabClick" class="square-tab" v-if="menuArr">
      <el-tab-pane v-if="!menuArr.menuArr1" v-for="item in menuArr" :name="item.name" :key="item.name" class="tab-menu1">
        <span slot="label" style="font-size: 18px">{{item.label}}</span>
      </el-tab-pane>
      <el-tab-pane v-if="menuArr.menuArr1" v-for="item in menuArr.menuArr1" :label="item.label" :name="item.name" :key="item.name"></el-tab-pane>
<!--      <el-tab-pane v-if="menuArr.menuArr1" name="name"  class="tab-menu1" label="|">|</el-tab-pane>-->
      <el-tab-pane v-if="menuArr.menuArr1" v-for="item in menuArr.menuArr2" :label="item.label" :name="item.name" :key="item.name"></el-tab-pane>
      <el-tab-pane v-if="menuArr.menuArr1" v-for="item in menuArr.menuArr3" :label="item.label" :name="item.name" :key="item.name"></el-tab-pane>
    </el-tabs>
    <div>
    </div>
  </div>
</template>


<script>
  export default {
    name: 'MidTab',
    props: ['menuArr']
  }

</script>


<style>

</style>
