element-plus使用el-menu菜单组件遇到的问题

1、序言

目前使用的版本时：element-plus2.7.4。在开发过程中动态的递归路由时，遇到有嵌套菜单时，折叠菜单会出问题。废话不多说，直接上代码。

2、问题复现

2.1错误代码

<div class="">
        <div class="" v-if="prop.item.children && prop.item.children.length > 0">
            <el-sub-menu :index="(prop.item.path as string)" >
                <template #title>
                    <el-icon class="iconFontSize">
                        <component :is="prop.item.meta?.icon"></component>
                    </el-icon>
                    <span>{{ prop.item.meta?.title }}</span>
                </template>
                <sidebarMenuItem v-for="child in item.children" :item="child"></sidebarMenuItem>
            </el-sub-menu>
        </div>
        <div class="" v-else>
            <el-menu-item :index="prop.item.path" @click="toPath" >
                <el-icon class="iconFontSize">
                    <component :is="prop.item.meta?.icon"></component>
                </el-icon>
                <template #title>{{ prop.item.meta?.title }}</template>
            </el-menu-item>
        </div>
    </div>

2.2运行结果

3、代码修复

<template>
    <el-sub-menu :index="(prop.item.path as string)" v-if="prop.item.children && prop.item.children.length > 0">
        <template #title>
            <el-icon class="iconFontSize">
                <component :is="prop.item.meta?.icon"></component>
            </el-icon>
            <span>{{ prop.item.meta?.title }}</span>
        </template>
        <sidebarMenuItem v-for="child in item.children" :item="child"></sidebarMenuItem>
    </el-sub-menu>
    <el-menu-item :index="prop.item.path" @click="toPath" v-else>
        <el-icon class="iconFontSize">
            <component :is="prop.item.meta?.icon"></component>
        </el-icon>
        <template #title>{{ prop.item.meta?.title }}</template>
    </el-menu-item>
</template>

4、说明

从上面修复的代码中可以看到，将外面包裹的div去掉就好了。