element-ui导航菜单

<div id="nav">
        <el-menu
          default-active="1"
          class="el-menu-vertical-demo"
          @select="handSelect"
          background-color="rgba(59, 90, 136, 0.5)"
          text-color="#fff"
        >
       
          <template v-for="(menu, idx) in navList">
            <!-- 判断一级菜单是否有节点 -->
            <template v-if="!menu.children">
              <el-menu-item
                :index="menu.path"
                :data-index="idx + ''"
                :data-route="menu.path"
                :key="idx"
                :route="menu.path"
              >
                <span slot="title">{{ menu.name }}</span>
              </el-menu-item>
            </template>
            <!-- 一级菜单有节点 -->
            <template v-else>
              <el-submenu :index="idx + ''" :key="idx">
                <template slot="title">
                  <i :title="menu.name"> </i>
                  <span slot="title">{{ menu.name }}</span>
                </template>

                <template v-for="(submenu, subidx) in menu.children">
                  <!-- 判断二级菜单是否有节点 -->
                  <template v-if="!submenu.children">
                    <el-menu-item
                      :key="subidx"
                      :index="submenu.path"
                      :route="submenu.path"
                    >
                      <span slot="title"> {{ submenu.name }} </span>
                    </el-menu-item>
                  </template>
                  <!-- 二级菜单有节点 -->
                  <template v-else>
                    <el-submenu :key="subidx" :index="submenu.path">
                      <template slot="title">
                        <!-- 二级菜单 -->
                        <span slot="title"> {{ submenu.name }}</span>
                      </template>
                      <!-- 三级菜单 -->
                      <el-menu-item
                        class="threeSubMenu"
                        v-for="(thirdmenu, thirdidx) in submenu.children"
                        :key="thirdidx"
                        :index="thirdmenu.path"
                      >
                        <span slot="title">{{ thirdmenu.name }}</span>
                      </el-menu-item>
                    </el-submenu>
                  </template>
                </template>
              </el-submenu>
            </template>
          </template>
        </el-menu>
      </div>
<script>
    var app = new Vue({
      el: "#app",
      data: {
        src: "windplacemain.html",
        defaultActive: "windplacemain",
        navList: [
          {
            name: "风电运行总览",
            path: "windplacemain",
          },
          {
            name: "光伏电站运行总览",
            path: "pvscreen",
          },
          {
            name: "电站实时监测",
            children: [
              {
                name: "光伏电站可视化监测",
                path: "pvscan",
              },
              {
                name: "主线图",
                path: "mainline",
              },
              {
                name: "升压站监测",
                path: "uppressmonitor",
              },
              {
                name: "箱变监测",
                path: "boxchangescan",
              },
              {
                name: "逆变器监测",
                path: "nibianqi",
              },
              {
                name: "支路监测",
                path: "branchscan",
              },
            ],
          },
        }）
</script>