1.問(wèn)題描述

菜單icon由后端提供，直接用的字符串返回，前端使用遍歷顯示，發(fā)現(xiàn)icon不會(huì)顯示

  {'id': 8, path:'/userManagement', 'authName': "用戶管理", icon: 'User', rights:['view']},

<el-menu-item :index="menu.path" v-for="menu in menuList" :key="menu.id">
            <el-icon v-if="menu.icon">
              <component :is="menu.icon"/>
            </el-icon>
            {{menu.authName}}
          </el-menu-item>

import {  DataAnalysis, Promotion, DocumentCopy,Management,Files, User, Stamp} from '@element-plus/icons-vue'

2.問(wèn)題出現(xiàn)原因

后端提供的是字符串，那么在<component :is="menu.icon"/>處讀取到的也是字符串，而<component>組件中要求是一個(gè)能渲染的組件，類似如下結(jié)構(gòu)：

3.嘗試解決一

想當(dāng)然的，如果后端直接返回組件形式是不是就可以了。

嘗試通過(guò)shallowRef(User)形式模擬后端返回的數(shù)據(jù)，發(fā)現(xiàn)還是顯示不出來(lái)

import { shallowRef } from 'vue'
import { User} from '@element-plus/icons-vue'

    {'id': 8, path:'/userManagement', 'authName': "用戶管理", icon: shallowRef(User), rights:['view']},

數(shù)據(jù)結(jié)構(gòu)如下：

使用<component?:is="menu.icon._value"/>也不行

4.解決——使用組件映射文件

?其實(shí)<component>里面只是要一個(gè)組件而已，后臺(tái)返回的是字符串，將字符串對(duì)應(yīng)到響應(yīng)的Icon組件即可。

于是寫(xiě)一個(gè)映射文件：將后端返回的字符串key和前端icon組件進(jìn)行映射即可文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-672520.html

import {  DataAnalysis, Promotion, DocumentCopy,Management,Files, User, Stamp} from '@element-plus/icons-vue'

export const iconMapping = {
  "dataAnalysis": DataAnalysis,
  "promotion": Promotion,
  "documentCopy": DocumentCopy,
  "management": Management,
  "files": Files,
  "user": User,
  "stamp": Stamp,
}

const menuList = Object.freeze([
    {'id': 1, path:'/uploadSpec','authName': "上傳spec", icon: 'dataAnalysis', children:[], rights:['view','add','edit','delete']},
    {'id': 2, path:'/showSpec', 'authName': "Spec預(yù)覽", icon: 'dataAnalysis',children:[], rights:['view','add','edit','delete']},
    {'id': 3, path:'/generateTxt', 'authName': "生成測(cè)試數(shù)據(jù)", icon: 'dataAnalysis',children:[], rights:['view','add','edit','delete']},
    {'id': 4, path:'/generateCronjob', 'authName': "生成轉(zhuǎn)碼程序", icon: 'promotion',children:[], rights:['view','add','edit','delete']},
    {'id': 5, path:'/pdfCompare', 'authName': "PDF文檔對(duì)比", icon: 'documentCopy',children:[], rights:['view','add','edit','delete']},
    {'id': 6, path:'/resourceUpdate', 'authName': "資源更新管理", icon: 'management',children:[], rights:['view','add','edit','delete']},
    {'id': 7, path:'/generateTestCase', 'authName': "自動(dòng)生成ST/SIT案例", icon: 'files',children:[], rights:['view','add','edit','delete']},
    {'id': 8, path:'/userManagement', 'authName': "用戶管理", icon:'user', rights:['view']},
    {'id': 9, path:'/roleManagement', 'authName': "角色管理", icon: 'stamp', rights:['view']},
]);

          <el-menu-item :index="menu.path" v-for="menu in menuList" :key="menu.id">
            <el-icon v-if="menu.icon">
              <component :is="iconMapping[menu.icon]"/>
            </el-icon>
            {{menu.authName}}
          </el-menu-item>

...
import { iconMapping } from "@/components/mapping/menuIconMapping"

到了這里，關(guān)于vue3使用Elementplus 動(dòng)態(tài)顯示菜單icon不生效的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！