el-menu 递归实现多级目录

以下是使用递归实现多级目录的el-menu示例代码：

<template>
  <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" router>
    <template v-for="item in menuData">
      <template v-if="item.children">
        <el-submenu :index="item.path">
          <template slot="title">
            <i :class="item.icon"></i>
            <span slot="title">{{ item.name }}</span>
          </template>
          <el-menu-item-group>
            <template v-for="child in item.children">
              <menu-item :item="child" :key="child.path"></menu-item>
            </template>
          </el-menu-item-group>
        </el-submenu>
      </template>
      <template v-else>
        <menu-item :item="item" :key="item.path"></menu-item>
      </template>
    </template>
  </el-menu>
</template>

<script>
import MenuItem from './MenuItem.vue'

export default {
  name: 'Menu',
  components: {
    MenuItem
  },
  props: {
    menuData: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      activeIndex: ''
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      this.activeIndex = keyPath[keyPath.length - 1]
    },
    handleClose(key, keyPath) {
      this.activeIndex = keyPath[keyPath.length - 1]
    }
  }
}
</script>

在上述代码中，我们使用了递归的方式来实现多级目录。具体来说，我们在el-menu组件中使用了v-for指令来遍历menuData数组中的每一个菜单项。对于每一个菜单项，我们首先判断它是否有子菜单，如果有，我们就使用el-submenu组件来包裹它，并在其中递归调用自己，直到没有子菜单为止。如果没有子菜单，我们就使用自定义的MenuItem组件来渲染它。