目前在升级前端框架，UI组件element-plus升级到了目前最新的1.3.0beta8版本，图标也换成了官方提供的SvgIcon图标，官方提供了组件导入的方式使用图标。而我的图标是全局导入的，默认使用官方的命名。在菜单栏使用图标，并且是动态渲染的，刚好用到图标组件名称是Menu时，点击带有这个图标名称的菜单，就出问题了，导致其他菜单不显示。
下面是在main.js中全局引入图标的方法：
import {createApp} from 'vue'import App from './App.vue'import ElementPlus from 'element-plus';import zhCn from 'element-plus/es/locale/lang/zh-cn';//ElementPlus 组件内部默认使用英语，使用中文语言import 'element-plus/dist/index.css';import * as ElIconModules from '@element-plus/icons';//导入所有element icon图标const app = createApp(App);app.use(ElementPlus, {locale: zhCn,//使用中文语言})// 全局注册element-plus icon图标组件Object.keys(ElIconModules).forEach((key) => {ponent(key, ElIconModules[key]);});app.mount('#app')
最后使用排出法才确定是个图标组件的名称导致的bug，后面就换了一个图标组件。然后，也向官方提交了这个bug，官方开发成员建议换个名称，在main.js里这样导入，单独命名：
import { Menu as MenuIcon } from '@element-plus/icons-vue'
最后，我只直接换了一个其他icon组件，然后我提交了issues，建议他们重新改下命名方式。链接：[Bug Report] el-menu菜单组件引入动态渲染icon图标时，图标组件刚好是Menu时报错，菜单不显示 · Issue #5570 · element-plus/element-plus · GitHub
如果你目前一定要动态渲染使用Menu这个icon图标的话，全局导入时重起一个其他别名也可以，修改后的main.js代码如下：
import {createApp} from 'vue'import App from './App.vue'import ElementPlus from 'element-plus';import zhCn from 'element-plus/es/locale/lang/zh-cn';//ElementPlus 组件内部默认使用英语，使用中文语言import 'element-plus/dist/index.css';import * as ElIconModules from '@element-plus/icons';//导入所有element icon图标const app = createApp(App);app.use(ElementPlus, {locale: zhCn,//使用中文语言})// 全局注册element-plus icon图标组件Object.keys(ElIconModules).forEach((key) => {//循环遍历组件名称if ("Menu" !== key) {//如果不是图标组件不是Menu，就跳过，否则加上ICon的后缀ponent(key, ElIconModules[key]);} else {ponent(key + "Icon", ElIconModules[key]);}});app.mount('#app')
然后，你存数据库的图标名称也要是你重命名的这个MenuIcon名称才行，因为for循环菜单组件那要匹配。这样就正常了。
参考文献：
1、[Bug Report] el-menu菜单组件引入动态渲染icon图标时，图标组件刚好是Menu时报错，菜单不显示 · Issue #5570 · element-plus/element-plus · GitHub
Vue3使用element-plus1.3.0版本的el-menu菜单组件引入动态渲染icon图标时 图标组件刚好是Menu时报错 菜单不显示的解决方法
