一般这个情况发生在使用v-for渲染动态菜单栏时,使用div标签包裹el-menu-item或者el-sub-menu,而且文字不消失是有二级菜单的父项才会出现。
<el-menu>标签本身希望里面嵌套的是<el-menu-item>,<el-submenu>,<el-menu-item-group>其中之一。
解决方法很简单,因为Vue3模板支持多个根节点,不用像Vue2一样,所有的内容嵌套在div中,代码如下:
<template>
<el-menu-item :index="props.path" v-if="!props.children">
<el-icon v-if="props.icon">
<component :is="props.icon"></component>
</el-icon>
<template #title>
<span>{
{ props.name }}</span>
</template>
</el-menu-item>
<el-sub-menu :index="props.path" v-if="props.children">
<template #title>
<el-icon>
<component :is="props.icon"></component>
</el-icon>
<span>{
{ props.name }}</span>
</template>
<menuItem v-for="item in props.children" :name="item.meta!.title" :path="item.path" :icon="item.meta!.icon"
:children="item.children">
</menuItem>
</el-sub-menu>
</template>
<script lang='ts' setup>
interface Props {
name: any,
path: string,
icon: any,
children?: any
}
const props = defineProps<Props>()
</script>
直接拿el-menu-item, el-sub-menu当做根节点,就可以解决折叠侧边菜单栏后文字不隐藏的问题。