【vue3 element-plus使用el-sub-menu折叠后图标消失问题 】

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;
}

解决后