el-menu递归写法

el-menu的递归写法可以通过在MenuList组件中使用自身来实现。具体步骤如下：

1. 首先，需要在MenuList组件中抽取出el-menu的部分代码，保留只涉及菜单的部分。
2. 然后，在MenuList组件中使用v-for循环遍历菜单项，并根据菜单项是否含有子菜单来决定使用el-submenu还是el-menu-item。
3. 如果菜单项含有子菜单，那么就递归调用MenuList组件，将子菜单项作为参数传递进去。
4. 最后，将递归调用的MenuList组件放置在el-submenu的slot中。

示例代码如下：

<template>
  <el-menu class="sidebar-el-menu" default-active="" @open="handleOpen" @close="handleClose" :collapse="isCollapse" router>
    <template v-for="item in items">
      <template v-if="item.children">
        <el-submenu :index="item.path" :key="item.path">
          <template slot="title">
            <i :class="item.meta.icon"></i>
            <span slot="title">{{ item.meta.title }}</span>
          </template>
          <menu-list :items="item.children"></menu-list><!--递归调用-->
        </el-submenu>
      </template>
      <template v-else>
        <el-menu-item :index="item.path" :key="item.path">
          <i :class="item.meta.icon"></i>
          <span slot="title">{{ item.meta.title }}</span>
        </el-menu-item>
      </template>
    </template>
  </el-menu>
</template>

通过以上的递归写法，可以实现el-menu的动态生成，并且可以处理多层嵌套的菜单结构。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [vue el-menu多级菜单递归](https://blog.csdn.net/qq_21271511/article/details/109889934)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* [vue3使用el-menu多级菜单出现点击一个全部展开的问题](https://blog.csdn.net/m0_46442118/article/details/130006060)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]