vue3+element-plus的侧边菜单栏的图标的动态渲染

没有检索到标题

最新推荐文章于 2025-09-22 18:32:36 发布

原创最新推荐文章于 2025-09-22 18:32:36 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #elementui

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

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>