安装插件

cnpm install @element-plus/icons

main.js引入

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import { store, key } from './store/index'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as Icons from '@element-plus/icons'
const app = createApp(App)
app.use(store, key)
app.use(router)
app.use(ElementPlus)
app.mount('#app')
// 注册全局组件
Object.keys(Icons).forEach(key => {
  app.component(key, Icons[key as keyof typeof Icons])
})

页面使用

父组件传的数据格式

注:element ui3不能再使用  icon: "el-icon-s-custom",这种格式了

//菜单数据
let menuList = reactive([
  {
    path: '/dashboard',
    component: "Layout",
    meta: {
      title: "首页",
      icon: "HomeFilled",
      roles: ["sys:manage"]
    },
    children: []
  },
  {
    path: "/system",
    component: "Layout",
    alwaysShow: true,
    name: "system",
    meta: {
      title: "系统管理",
      icon: "Menu",
      roles: ["sys:manage"],
      parentId: 0,
    },
    children: [
      {
        path: "/department",
        component: "/system/department/department",
        alwaysShow: false,
        name: "department",
        meta: {
          title: "机构管理",
          icon: "SetUp",
          roles: ["sys:dept"],
          parentId: 17,
        },
      },
      {
        path: "/userList",
        component: "/system/User/UserList",
        alwaysShow: false,
        name: "userList",
        meta: {
          title: "用户管理",
          icon: "UserFilled",
          roles: ["sys:user"],
          parentId: 17,
        },
      },
      {
        path: "/roleList",
        component: "/system/Role/RoleList",
        alwaysShow: false,
        name: "roleList",
        meta: {
          title: "角色管理",
          icon: "Setting",
          roles: ["sys:role"],
          parentId: 17,
        },
      },
      {
        path: "/menuList",
        component: "/system/Menu/MenuList",
        alwaysShow: false,
        name: "menuList",
        meta: {
          title: "权限管理",
          icon: "Tickets",
          roles: ["sys:menu"],
          parentId: 17,
        },
      },
    ],
  },
  {
    path: "/goods",
    component: "Layout",
    alwaysShow: true,
    name: "goods",
    meta: {
      title: "商品管理",
      icon: "Shop",
      roles: ["sys:goods"],
      parentId: 0,
    },
    children: [
      {
        path: "/goodCategory",
        component: "/goods/goodsCategory/goodsCategoryList",
        alwaysShow: false,
        name: "goodCategory",
        meta: {
          title: "商品分类",
          icon: "Van",
          roles: ["sys:goodsCategory"],
          parentId: 34,
        },
      },
    ],
  },
  {
    path: "/systenConfig",
    component: "Layout",
    alwaysShow: true,
    name: "systenConfig",
    meta: {
      title: "系统工具",
      icon: "Setting",
      roles: ["sys:systenConfig"],
      parentId: 0,
    },
    children: [
      {
        path: "/document",
        component: "/system/config/systemDocument",
        alwaysShow: false,
        name: "http://42.193.158.170:8089/swagger-ui/index.html",
        meta: {
          title: "接口文档",
          icon: "Tickets",
          roles: ["sys:document"],
          parentId: 42,
        },
      },
    ],
  },
]);

当前为子组件:

<template>
  <template v-for="menu in menuList" :key="menu.path">
    <!-- 有子级 -->
    <el-sub-menu v-if="menu.children && menu.children.length > 0" :index="menu.path">
      <template #title>
        <component :is="menu.meta.icon" style="width: 16px;height: 16px;"></component>
        <span>{{ menu.meta.title }}</span>
      </template>
      <!-- 如果有三级菜单可以递归 -->
      <menu-item :menuList="menu.children"></menu-item>
    </el-sub-menu>
    <el-menu-item v-else :index="menu.path">
 <!-- 使用icon动态加载-->
      <component :is="menu.meta.icon" style="width: 16px;height: 16px;"></component>
      <template #title>{{ menu.meta.title }}</template>
    </el-menu-item>
  </template>

</template>
<script setup  lang='ts'>
// 接收父组件传入的数据
defineProps(['menuList'])
</script>
<style lang='scss' scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>

页面效果