月度归档： 2025 年 5 月

在前端业务开发中，难免会遇到生成菜单栏的需求，如果菜单层级只有2层，那还好说。如果菜单层级超过3层，则应该考虑优化为递归组件。以下是代码实现：

官方文档参考

<!-- 父组件中 -->
<el-menu
    class="h-full"
    background-color="#fff"
    :default-active="formData.materialCategory"
  @select="selectCategory"
 >
    <DropdownItem v-for="item in menuTree" :key="item.id" :item="item" />
</el-menu>

<!-- DropdownItem.vue 子组件 -->
<template>
  <el-sub-menu v-if="item?.children?.length" :index="item.id + ''">
    <template #title>
      <span>{{ item.label }}</span>
    </template>
    <!-- DropdownItem应该和vue文件名保持一致，具体参阅官方文档 -->
    <DropdownItem v-for="child in item.children" :key="child.id" :item="child" />
  </el-sub-menu>
  <el-menu-item v-else :index="item.id + ''">
    {{ item.label }}
  </el-menu-item>
</template>
<script setup>
defineProps({
  item: {
    type: Object,
    default: () => ({})
  }
});
</script>