玩玩菜单

<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.index">
              <template slot="title">
                {{subItem.title}}
              </template>
              <template v-for="thirdItem in subItem.subs">
                <!--如果有三级菜单-->
                <template v-if="thirdItem.subs">
                    <el-submenu :index="thirdItem.index" :key="thirdItem.index">
                      <template slot="title">
                        {{thirdItem.title}}
                      </template>
                      <template v-for="fourItem in thirdItem.subs">
                        <el-menu-item :index="fourItem.index" :key="fourItem.index">
                          <template slot="title">
                            <i :class="fourItem.icon"></i>
                            <span slot="title">{{ fourItem.title }}</span>
                          </template>
                        </el-menu-item>
                      </template>
                    </el-submenu>
                </template>
                <template v-else>
                  <el-menu-item :index="thirdItem.index" :key="thirdItem.index">
                    <router-link class="a" :to="thirdItem.index">
                      {{thirdItem.title}}
                    </router-link>
                  </el-menu-item>
                </template>
              </template>
            </el-submenu>
          </template>
          <template v-else>
            <el-menu-item :index="subItem.index" :key="subItem.id">
              <template slot="title">
                <router-link class="a" :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: '系统首页',
    subs: [
      {
        index: '/home/1',
        title: '钢材1'
      },
      {
        index: '/home/2',
        title: '化材1',
        subs: [
          {
            index: '/home/3',
            title: '钢材2'
          },
          {
            index: '/home/4',
            title: '化材2',
            subs: [
              {
                index: '/home/5',
                title: '钢材3'
              },
              {
                index: '/home/6',
                title: '化材3'
              }
            ]
          }
        ]
      }
    ]
  }
],

方法

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