Vue3使用element-plus1.3.0版本的el-menu菜单组件引入动态渲染icon图标时，图标组件刚好是Menu时报错，菜单不显示的解决方法

目前在升级前端框架，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) => {
    app.component(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的后缀
        app.component(key, ElIconModules[key]);
    } else {
        app.component(key + "Icon", ElIconModules[key]);
    }
});
app.mount('#app')

然后，你存数据库的图标名称也要是你重命名的这个MenuIcon名称才行，因为for循环菜单组件那要匹配。这样就正常了。

 

---

参考文献：

1、​​[Bug Report] el-menu菜单组件引入动态渲染icon图标时，图标组件刚好是Menu时报错，菜单不显示 · Issue #5570 · element-plus/element-plus · GitHub​​