yuanling-manage/src/components/RecursiveMenuItem.vue

<script setup lang="ts">
import * as ICON from '@element-plus/icons-vue'
import type { RouterType } from '@/router/route'

defineProps<{
  item: RouterType
}>()
</script>

<template>
  <el-sub-menu v-if="item.children && item.children.length > 0" :index="'/'+item.path">
    <template #title>
      <el-icon v-if="item.icon">
        <component :is="ICON[item.icon as keyof typeof ICON]" />
      </el-icon>
      <span>{{ item.name }}</span>
    </template>
    <recursive-menu-item
      v-for="child in item.children"
      :key="child.path"
      :item="child"
    />
  </el-sub-menu>
  <el-menu-item v-else :index="'/'+item.path">
    <el-icon v-if="item.icon">
      <component :is="ICON[item.icon as keyof typeof ICON]" />
    </el-icon>
    <span>{{ item.name }}</span>
  </el-menu-item>
</template>