vue3+element-plus的侧边菜单栏的图标的动态渲染_vue3+elementplus 动态渲染左侧菜单加载的图标-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_45858045/article/details/133011112

本文介绍了如何在ElementPlus框架中使用Vue全局注册NavMenu导航菜单的图标，包括安装ElementPlusIconsVue，以及在组件模板中通过数组动态显示不同图标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Element-Ui组件 NavMenu 导航菜单图标的具体使用

在这里插入图片描述

首先要安装依赖

npm install @element-plus/icons-vue

//如果你已经全局安装element-plus的话就不需要安装这个了，直接按照下面的步骤走就行了

在main.js中全局导入

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

通过循环注册icon

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

在组件内部使用，首先定义图标的数组

// 菜单图标
const icons = reactive([
  'User',
  'SwitchFilled',
  'Document',
  'MessageBox',
  'Location',
  'Shop',
  'Orange',
  'Suitcase',
  'VideoPlay'
])

在模板内进行使用

    <el-sub-menu index="1" v-for="(item, index) in menuList" :keys="item.id">
              <template #title>
                <el-icon>
                  <component :is="icons[index]"></component>
                </el-icon>
                <span>{{ item.authName }}</span>
              </template>
              <el-menu-item :index="itemChild.id" v-for="(itemChild, indexChild) in item.children" :keys="itemChild.id">
                <el-icon>
                  <Location />
                </el-icon>
                <span> {{ itemChild.authName }}</span>
              </el-menu-item>


            </el-sub-menu>

<el-icon>
                  <component :is="icons[index]"></component>
                </el-icon>