玩玩菜单

<el-menu
  :default-active="this.$route.path"
  class="el-menu-demo"
  mode="horizontal"
  @select="handleSelect"
  background-color="#fff"
  text-color="#333">
  <template v-for="item in menus">
    <!--如果有子菜单-->
    <template v-if="item.subs">
      <el-submenu :index="item.index" :key="item.index">
        <template slot="title">
          <i :class="item.icon"></i>
          <span slot="title">{{ item.title }}</span>
        </template>
        <template v-for="subItem in item.subs">
          <template v-if="subItem.subs">
            <!--如果有子菜单-->
            <el-submenu :index="subItem.index" :key="subItem.id">
              <template slot="title">{{subItem.title}}</template>
              <template v-for="thirdItem in subItem.subs">
                <el-menu-item :index="thirdItem.index" :key="thirdItem.index">
                  <router-link :to="thirdItem.index">
                    {{thirdItem.title}}
                  </router-link>
                </el-menu-item>
              </template>
            </el-submenu>
          </template>
          <template v-else>
            <el-menu-item :index="subItem.index" :key="subItem.id">
              <template slot="title">
                <router-link :to="subItem.index">
                  {{subItem.title}}
                </router-link>
              </template>
            </el-menu-item>
          </template>
        </template>
      </el-submenu>
    </template>
    <template v-else>
      <el-menu-item :index="item.index" :key="item.index">
        <template slot="title">
          <i :class="item.icon"></i>
          <span slot="title">{{ item.title }}</span>
        </template>
      </el-menu-item>
    </template>
  </template>
</el-menu>

数据部分

menus: [
          {
            icon: 'el-icon-menu',
            index: 'index',
            title: '系统首页'
          },
          {
            icon: 'el-icon-star-on',
            index: '2',
            title: 'xx',
            subs: [
              {
                index: '/home/oneList',
                title: 'xx列表',
                subs: [
                  {
                    index: '/home/twoList',
                    title: 'xx详情'
                  }
                ]
              },
              {
                index: '/home/threeList',
                title: 'xx列表'
              }
            ]
          }
        ]

方法

 handleSelect (key, keyPath) {
        console.log(key, keyPath)
      }