element-plus使用el-menu，菜单折叠后悬浮菜单不出现以及图标不显示的可能原因

问题分析:在vue3项目中做侧边栏菜单时el-menu正常使用，icon根据路由的meta信息导入，但是折叠后就是不显示。

正常显示：未折叠前：

折叠后：

但是我们实现中遇到的可能是：

我们在代码中实现请查看：

<template>
  <el-scrollbar height="100vh">
    <el-menu
      :default-active="defaultActive"
      :background-color="menuBgColor"
      :default-openeds="defaultOpened"
      :unique-opened="uniqueOpenedFlag"
      class="el-menu-vertical"
      :class="{ 'is-black': isBlack }"
      :collapse="isCollapse"
      :text-color="textColor"
      :active-text-color="activeTextColor"
      router
      :mode="mode"
    >
      <Logo v-if="isLogo" />
      <template v-for="item in routes">
        <template v-if="!item.hidden">
          <MenuItem :item="{ ...item, isBlack }" :key="item.path" />
        </template>
      </template>
    </el-menu>
  </el-scrollbar>
</template>

MenuItem代码：主要查看里面的icon

<template>
  <el-menu-item :key="item.path" :index="item.children ? item.children[0].path : item.path"
    v-if="!item.meta || !item.children">
    <component class="menu-icon" v-if="item.children ? item.children[0].meta.icon : item.meta.icon" theme="outline"
      size="14" strokeWidth="3" :is="item.children ? item.children[0].meta.icon : item.meta.icon" />
    <template #title>
      <span class="title">
        {{ item.children ? item.children[0].meta.title : item.meta.title }}
      </span>
    </template>
  </el-menu-item>
  <el-sub-menu :class="{ 'is-black': isBlack }" :index="item.path" v-else>
    <template #title>
      <component v-if="item.meta.icon" class="menu-icon" theme="outline" size="14" strokeWidth="3"
        :is="item.meta.icon" />
      <span class="title">{{ item.meta.title }}</span>
    </template>
    <template v-for="(option, index) in item.children">
      <menu-item v-if="option.children && option.hidden" :key="option.path" :item="option" />
      <el-menu-item v-else-if="!option.hidden" :index="option.path" :key="index">
        <component class="menu-icon" v-if="option.meta.icon" theme="outline" size="14" strokeWidth="3"
          :is="option.meta.icon" />
        <span class="title">
          {{ option.meta.title }}
        </span>
      </el-menu-item>
    </template>
  </el-sub-menu>
</template>

<script>
  export default {
    name: 'MenuItem',
  };
</script>

<script setup>
  import { computed } from 'vue';
  import { useStore } from 'vuex';

  import { themeConfig } from '@/config/theme';
  const { themeOptions } = themeConfig;

  const whiteColors = ['#fff', '#ffffff', '#FFF', '#FFF', 'rgb(255, 255, 255)'];

  defineProps({
    item: {
      type: Object,
      default: () => {
        return {};
      },
    },
  });

  const store = useStore();

  const theme = computed(() => {
    return store.getters['setting/theme'];
  });

  const menuBgColor = computed(() => {
    return themeOptions[theme.value].menuBgColor;
  });

  const isBlack = computed(() => {
    return whiteColors.indexOf(menuBgColor.value) === -1;
  });
</script>

里面有使用到el-menu-item和el-sub-menu两种。仔细观察我们会发现当使用是el-menu-item时，component的为icon的组件没有包含在#title里面。但是使用el-sub-menu时，component是要包裹在#title内的，这个可以去官网查看,例如：截图所示：

el-sub-menu中，加上el-icon标签后：

总结：el-menu-item中icon不要写在title内，el-sub-menu内，不用el-icon标签包裹，icon能在展开情况下显示，但在折叠后就不会显示的问题，加上el-icon标签，就能正常显示。