使用Element-Plus菜单组件，折叠时出现子选项图标显示不出？

前言

在项目中，用了element-plus的菜单组件时，使用Nuxt3 的nuxt-icon组件，页面一直显示不出图标。

发现问题

• el-sub-menu中使用它自己的el-icon组件图标是可以正常显示的。
• 但是el-sub-menu中使用nuxt-icon组件，图标却显示不出来。

找到原因

查看控制台发现，el-icon组件是被i标签包裹的，而nuxt-icon是被一个span标签包裹，element-plus 菜单组件在垂直菜单折叠时，el-sub-menu的默认行为是隐藏其标题中的文本部分，会给el-sub-menu 的title插槽用span包裹起来，并且给它设置了不可见样式。

解决方案

所以手动把nuxt-icon用其他标签（如：i）包裹，这样就可以显示图标了。

 <el-sub-menu
      v-if="item.children && item.children.length > 0"
      :index="item.path"
    > 
      <template #title>
        <!-- <el-icon><icon-menu /></el-icon> -->
        <i><nuxt-icon :name="item.meta.icon"></nuxt-icon></i>
        <span>{{ item.meta.title }}</span>
      </template>
      <EpMenu :routeList="item.children" />
    </el-sub-menu>