Vue3使用ElementPlus实现菜单的无限递归

菜单组件childrenmenu.vue

<template>
    <template v-if=" item.children && item.children?.length > 0" >
        <el-sub-menu   :index="item.meunid">
            <template #title>
                <component v-if="item.meunicon != undefined && item.meunicon != null" class="icons" :is="item.meunicon" />
                <span style="width: 100%; text-align: center;">{{ item.meunname }}</span>
            </template>
            <childrenmenu v-for="childItem in item.children" :key="childItem.meunid" :item="childItem" />
        </el-sub-menu>
    </template>
    <template v-else>
        <el-menu-item :index="item.meunpath" :key="item.meunid">
            <component v-if="item.meunicon != undefined && item.meunicon != null" class="icons" :is="item.meunicon" />
            <span style="width: 100%; text-align: center;">{{ item.meunname }}</span>
        </el-menu-item>
    </template>
</template>
<script setup lang="ts">

const props=defineProps(['item'])
</script>
<style lang="scss" scoped>
svg {
    // width: 50%;
    height: 100%;
}
</style>

父组件中使用实例：