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組件即可。文章來(lái)源:http://www.zghlxwxcb.cn/news/detail-672520.html
于是寫(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)!