vue2 el-menu 三级菜单循环

在Vue2中，`el-menu`组件来自Element UI库，用于创建导航菜单。如果你想实现三级菜单的循环遍历，你可以通过数组数据结构和模板的v-for指令来完成。这里是一个简单的例子：

首先，在你的Vue组件的数据里，假设有一个`menuItems`数组，每个菜单项都有一个`children`属性表示二级菜单，如果二级菜单还有更多内容则可以继续添加`children`数组：

data() {
  return {
    menuItems: [
      { label: '一级菜单', children: [{ label: '二级菜单1' }, { label: '二级菜单2' }] },
      { label: '另一级菜单', children: [{ label: '子菜单1' }, { label: '子菜单2', children: [{ label: '三级菜单' }] }] },
      // 其他菜单项...
    ]
  }
}

然后在模板部分，你可以使用v-for嵌套来渲染三级菜单：

<template>
  <el-menu default-active="0" class="el-menu-demo">
    <el-submenu v-for="(item, index) in menuItems" :index="index">
      <template slot="title">{{ item.label }}</template>
      <el-menu-item v-for="(subItem, subIndex) in item.children" :key="subIndex">
        {{ subItem.label }}
      </el-menu-item>
      <!-- 如果三级菜单需要，可以再套一层v-for -->
      <el-submenu v-if="subItem.children.length > 0" v-for="(thirdItem, thirdIndex) in subItem.children" :index="`${index}-${subIndex}`">
        <template slot="title">{{ thirdItem.label }}</template>
        <el-menu-item>{{ thirdItem.label }}</el-menu-item>
      </el-submenu>
    </el-submenu>
  </el-menu>
</template>

这样就实现了三级菜单的循环遍历。请注意，为了区分不同层级的菜单，你在`el-submenu`上添加了`index`属性，并在三级菜单中使用了动态的`index`值。