VUE3 图标消失
有子菜单的图标折叠后消失
代码如下
<el-menu
router
:default-active="this.$route.path"
class="el-menu-vertical-demo"
background-color="#333744"
text-color="#fff"
active-text-color="#409BFF"
:unique-opened="true"
:collapse-transition="false"
:collapse="isCollapse">
<!--使用v-if语句进行判断有无children菜单,确定一级菜单是否需要下拉功能-->
<template v-for="item in arrType">
<el-sub-menu
text-color="#fff"
:index="1"
:key="item.key"
v-if="subtitleIsExist(item)">
<!--一级菜单在submenu中为下拉状态-->
<template #title>
<component :is="item.icon" style="width: 20px;height: 20px;margin-right: 5px"></component>
<span>{{item.title}}</span>
</template>
<!--二级菜单再次进行v-if判断是否显示二级菜单-->
<template v-for="item2 in item.children" :key="item2.key">
<el-menu-item
:index="item2.path"
>
<component :is="item2.icon" style="width: 20px;height: 20px;margin-right: 5px"></component>
<span>{{item2.title}}</span>
</el-menu-item>
</template>
</el-sub-menu>
<!--一级菜单使用v-else在不在submenu中为非下拉状态-->
<el-menu-item :index="item.path" v-else>
<component :is="item.icon" style="width: 20px;height: 20px;margin-right: 5px"></component>
<template #title>
<span>{{item.title}}</span>
</template>
</el-menu-item>
</template>
</el-menu>
解决办法
更改el-sub-menu的display为grid
.el-sub-menu{
display: grid;
}
解决后