elements-plus版本更新后图标无法正常显示
使用的是element-plus的组件库更新到最新版本后左侧icon图标无法显示，只能显示一个，改如何修改代码（除了回退版本）
<template>
<div class="sidebar">
<el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#324157"
text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router>
<template v-for="item in items">
<template v-if="item.subs">
<el-submenu :index="item.index" :key="item.index">
<template #title>
<i :class="item.icon">i>
<span>{{ item.title }}span>
template>
<template v-for="subItem in item.subs">
<el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
<template #title>{{ subItem.title }}template>
<el-menu-item v-for="(threeItem, i) in subItem.subs" :key="i" :index="threeItem.index">
{{ threeItem.title }}el-menu-item>
el-submenu>
<el-menu-item v-else :index="subItem.index" :key="subItem.index">{{ subItem.title }}
el-menu-item>
template>
el-submenu>
template>
<template v-else>
<el-menu-item :index="item.index" :key="item.index">
<i :class="item.icon">i>
<template #title>{{ item.title }}template>
el-menu-item>
template>
template>
el-menu>
div>
template>
<script>
import { computed, watch } from "vue";
import { useStore } from "vuex";
import { useRoute } from "vue-router";
export default {
setup() {
const items = [
{
icon: "el-icon-lx-home",
index: "/dashboard",
title: "系统首页",
},
{
icon: "el-icon-lx-calendar",
index: "3",
title: "基础设置",
subs: [
{
index: "/form",
title: "类型管理",
},
{
index: "/upload",
title: "房间管理",
},
{
index: "/editor",
title: "用户管理",
// subs: [
// {
// index: "",
// title: "富文本编辑器",
// },
// ],
},
],
},
{
icon: "el-icon-lx-home",
// index: "/table",
index: "4",
title: "业务管理",
subs: [
{
index: "/Scheduled",
title: "预订管理",
},
// {
// index: "/checkout",
// title: "房间状态",
// },
{
index: "/comments",
title: "评论管理",
// subs: [
// {
// index: "",
// title: "富文本编辑器",
// },
// ],
},
],
},
// {
// icon: "el-icon-lx-emoji",
// index: "/icon",
// title: "自定义图标",
// },
// {
// icon: "el-icon-pie-chart",
// index: "/charts",
// title: "schart图表",
// },
// {
// icon: "el-icon-lx-global",
// index: "/i18n",
// title: "国际化功能",
// },
// {
// icon: "el-icon-lx-warn",
// index: "7",
// title: "错误处理",
// subs: [
// {
// index: "/permission",
// title: "权限测试",
// },
// {
// index: "/404",
// title: "404页面",
// },
// ],
// },
// {
// icon: "el-icon-lx-redpacket_fill",
// index: "/donate",
// title: "支持作者",
// },
];
const route = useRoute();
const onRoutes = computed(() => {
return route.path;
});
const store = useStore();
const collapse = computed(() => store.state.collapse);
return {
items,
onRoutes,
collapse,
};
},
};
script>
<style scoped>
.sidebar {
display: block;
position: absolute;
left: 0;
top: 70px;
bottom: 0;
overflow-y: scroll;
}
.sidebar::-webkit-scrollbar {
width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse) {
width: 250px;
}
.sidebar > ul {
height: 100%;
}
style>
elementPlus使用icon图标不显示解决方法
借鉴下
https://blog.csdn.net/weixin_44220078/article/details/124054538
看看不是引用的有其他字体，可能是字体冲突了。
看起来您正在使用数组中的icon字段items来指定要在菜单中显示的图标的类名。似乎只显示一个图标，因为该icon字段正在被数组中的后续项覆盖。
要解决此问题，您可以尝试将icon每个项目中的字段更改为唯一的类名。例如，您可以更改icon: "el-icon-lx-home"为icon: "sidebar-icon-home"，然后将相应的 CSS 类添加到您的样式中以指定所需的图标。
或者，您可以尝试使用不同的方法来指定菜单中的图标。例如，您可以使用组件的iconpropel-menu-item来指定要为每个菜单项显示的图标。
您还需要更新items数组以包含icon每个菜单项的prop
你不显示的原因是：原因应该是更新了element-plus
你可参考这个实例【vue3+element-plus时，icon图标不显示的解决办法】，链接：https://blog.csdn.net/weixin_39550080/article/details/125014991
【实例与你的题意非常类似，有详细的步骤分析和解决详情】
你使用element plus 中@elementplus/icons版本，你看这个是否符合https://blog.csdn.net/qq_41443611/article/details/121427703