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

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

首先要安装依赖

npm install @element-plus/icons-vue
1

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

在main.js中全局导入

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

通过循环注册icon

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

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

// 菜单图标
const icons = reactive([
  'User',
  'SwitchFilled',
  'Document',
  'MessageBox',
  'Location',
  'Shop',
  'Orange',
  'Suitcase',
  'VideoPlay'
])
1
2
3
4
5
6
7
8
9
10
11
12

在模板内进行使用

    <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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