Element NavMenu 无限级菜单

{"data":[
    {
       "id": 1,
        "path": "/home",
        "menuName": "商业数据统计",
        "component": "Home",
        "childMenu":[{
          "id": 2,
          "path": "/commercial/dataAccount/Day",
          "menuName": "日统计1",
          "component": "DataAccountDay"
        },
        {
          "id": 3,
          "path": "/commercial/dataAccount/Month",
          "menuName": "月统计1",
          "component": "DataAccountMonth"
        }]
      },
      {
        "id": 4,
        "path": "/home",
        "menuName": "商业报表中心",
        "component": "Home",
        "childMenu":[{
          "id": 5,
          "path": "/commercial/baobiao/Day",
          "menuName": "日报表1",
          "component": "BaobiaoDay"
        },
        {
          "id": 6,
          "path": "/commercial/baobiao/Month",
          "menuName": "月报表1",
          "component": "BaobiaoMonth"
        }]
      } 
    ]}

<template>
  <div>
    <el-container :style="{height: containerHeight, border: '1px solid #eee'}" id="con">
      <el-header style="background:#3c8dbc;">
        header
      </el-header>

      <el-container>
        <el-aside width="230px">
          <el-menu
            router
            :default-active="routePath"           
            unique-opened
            background-color="#1f3146"
            text-color="#32acca"
            active-text-color="#ffd04b"
          >
            <NavMenu :navMenus="menuData"></NavMenu>
          </el-menu>
        </el-aside>
        <el-container>
          <el-main>
            <router-view></router-view>
          </el-main>
          <el-footer>
            footer
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import NavMenu from "@/components/NavMenu.vue";
export default {
  data() {
    return {
      containerHeight: "",     
      menuData: [],
      routePath:"",
      currentModuleChinese:"",
      user: window.sessionStorage.getItem("user")
    };
  },
  created() {
    this.$axios.get("/mock/menudata + ".json").then(res => {-      
      this.menuData = res.data.data;     
    }); 
  },
  components: { NavMenu },
  // watch:{
  //  $route(){
  //    console.log(this.$route.path)
  //    this.routePath = this.$route.path
  //  }
  // },
  mounted() { 
    console.log("mounted")   
    this.containerHeight = window.innerHeight + "px";
    console.log($)
    $(window).resize(function() {
      console.log("hi")
      $("#con").height($(window).height()-2);
    });
  }
};
</script>

<style>
.el-header {
  background-color: #377fa9;
  color: #fff;
  height: 50px !important;
  line-height: 50px !important;
}

.el-header .left img {
  width: 120px;
  vertical-align: middle;
}
.el-header .left span {
  font-size: 20px;
  color: #edf8ff;
  margin-left: 15px;
}
.el-header .right {
  float: right;
}
.el-header .right a {
  color: #fff;
}
.el-aside {
  /* color: #32acca !important; */
  background: #1f3146 !important;
}
.el-menu {
  border-right: none !important;
  /* background: #1f3146 !important; */
}
.el-footer {
  background: gray;
  height: 40px !important;
  line-height: 40px !important;
}
.el-footer {
  border-top: 1px solid #ccc;
  background: #f8fafd;
  padding: 10px;
  margin-left: 0;
}
.el-footer img {
  vertical-align: middle;
  width: 65px;
  margin-right: 10px;
}
</style>

<template>
  <div>
    <template v-for="(item,index) in navMenus">
      <!-- 含有子菜单 -->
      <el-submenu v-if="item.childMenu && item.childMenu.length>0" :key="index" :index="index+''">
        <template slot="title">
          <i class="el-icon-setting"></i>
          <!-- <img :src="item.info.picUrl" alt=""> -->
          <span>{{item.menuName}}</span>
        </template>
        <NavMenu :navMenus="item.childMenu"></NavMenu>
      </el-submenu>
      <!-- 最后一级 -->
      <el-menu-item v-else :key="index" :index="item.path">{{item.menuName}}</el-menu-item>
    </template>
  </div>
</template>