国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

vue3使用Elementplus 動(dòng)態(tài)顯示菜單icon不生效

這篇具有很好參考價(jià)值的文章主要介紹了vue3使用Elementplus 動(dòng)態(tài)顯示菜單icon不生效。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方,請(qǐng)大家不吝賜教,您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

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):

vue3使用Elementplus 動(dòng)態(tài)顯示菜單icon不生效,Vue,前端,vue.js,vue動(dòng)態(tài)icon顯示

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)如下:

vue3使用Elementplus 動(dòng)態(tài)顯示菜單icon不生效,Vue,前端,vue.js,vue動(dòng)態(tài)icon顯示

使用<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)!

本文來(lái)自互聯(lián)網(wǎng)用戶投稿,該文觀點(diǎn)僅代表作者本人,不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載,請(qǐng)注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符,請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋,一經(jīng)查實(shí),立即刪除!

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

  • 用vue3+elementplus做的一個(gè)滾動(dòng)菜單欄的組件

    用vue3+elementplus做的一個(gè)滾動(dòng)菜單欄的組件

    在elementplus中看到了滾動(dòng)條綁定了slider,但是這個(gè)感覺(jué)很不實(shí)用,在底部,而且橫向滾動(dòng),最常見(jiàn)的應(yīng)該是那種固定在左上角的帶著菜單的滾動(dòng)條,于是我就想要不做一個(gè)小demo,方便以后使用 樣式如下:(背景是我父組件的背景色 首先不能用橫著的滾動(dòng)條,一開(kāi)始我是想用

    2024年02月12日
    瀏覽(23)
  • 【vue3+vite】使用vite-plugin-svg-icons插件顯示本地svg圖標(biāo)

    使用vite-plugin-svg-icons插件顯示本地svg圖標(biāo) 1.安裝vite-plugin-svg-icons插件 2.使用vite-plugin-svg-icons插件 2.1 在項(xiàng)目根目錄查找vite.config.js,進(jìn)行配置 2.2 vite-plugin-svg-icons插件引入在main.js中 2.3 svg圖標(biāo)放入對(duì)應(yīng)路徑~~~~~圖標(biāo)路徑與iconDirs設(shè)置得路徑一致 項(xiàng)目中使用示例: //menu.icon是路徑里面

    2024年02月12日
    瀏覽(44)
  • Vue3+elementplus動(dòng)態(tài)表格table實(shí)現(xiàn)

    Vue3+elementplus動(dòng)態(tài)表格table實(shí)現(xiàn)

    描述 :使用el-table的時(shí)候,根據(jù)需求,能夠?qū)崿F(xiàn)由字段個(gè)數(shù)動(dòng)態(tài)增加表格列,表格行數(shù)固定為3行。 實(shí)現(xiàn)效果 : 實(shí)現(xiàn)代碼 : 總結(jié) :如果需要控制行數(shù),并且動(dòng)態(tài)加載列數(shù),故需要兩個(gè)變量進(jìn)行設(shè)置,這里采用的就是這個(gè)思想,能夠?qū)崿F(xiàn)需求效果。

    2024年03月15日
    瀏覽(16)
  • vue3 + TS + elementplus + pinia實(shí)現(xiàn)后臺(tái)管理系統(tǒng)左側(cè)菜單聯(lián)動(dòng)實(shí)現(xiàn) tab根據(jù)路由切換聯(lián)動(dòng)內(nèi)容

    vue3 + TS + elementplus + pinia實(shí)現(xiàn)后臺(tái)管理系統(tǒng)左側(cè)菜單聯(lián)動(dòng)實(shí)現(xiàn) tab根據(jù)路由切換聯(lián)動(dòng)內(nèi)容

    效果圖: ?home.vue頁(yè)面代碼 left.vue頁(yè)面代碼 tab.vue頁(yè)面代碼 pinia里面的代碼 安裝 使用插件 ?在main.ts中注冊(cè) 路由代碼 我把代碼放git上了,有需要的自行拉取 https://gitee.com/Flechazo7/vue3.git

    2024年02月09日
    瀏覽(28)
  • Vue3在點(diǎn)擊菜單切換路由時(shí),將ElementPlus UI庫(kù)中el-main組件的內(nèi)容滾動(dòng)恢復(fù)到頂部

    Vue3在點(diǎn)擊菜單切換路由時(shí),將ElementPlus UI庫(kù)中el-main組件的內(nèi)容滾動(dòng)恢復(fù)到頂部

    功能:Vue3在點(diǎn)擊菜單切換路由時(shí),將頁(yè)面el-main的內(nèi)容滾動(dòng)到頂部,布局如下,使用UI組件庫(kù)為ElementPlus ?在網(wǎng)上搜很多都是在route.js中的router.beforeEach中使用window.scrollTop(0,0) 或?window.scrollTo(0,0) 滾動(dòng),但是我使用無(wú)效,于是使用操作dom的方法,如下 可以使用 watch 函數(shù)來(lái)? 監(jiān)聽(tīng)

    2024年01月18日
    瀏覽(36)
  • 【VUE】ElementPlus之動(dòng)態(tài)主題色調(diào)切換(Vue3 + Element Plus+Scss + Pinia)

    【VUE】ElementPlus之動(dòng)態(tài)主題色調(diào)切換(Vue3 + Element Plus+Scss + Pinia)

    關(guān)于ElementPlus的基礎(chǔ)主題色自定義可以參閱《【VUE】ElementPlus之自定義主題樣式和命名空間》 有了上面基礎(chǔ)的了解,我們知道 ElementPlus 的主題色調(diào)是基于 CSS3變量 特性進(jìn)行全局控制的, 那么接下來(lái)我們也基于 CSS3變量 來(lái)實(shí)現(xiàn)主題色調(diào)的 動(dòng)態(tài)切換 效果; 主要控制的色調(diào)類型有

    2024年02月08日
    瀏覽(22)
  • Vue3學(xué)習(xí)(16) - 左側(cè)顯示分類菜單

    Vue3學(xué)習(xí)(16) - 左側(cè)顯示分類菜單

    和大家不太一樣,我覺(jué)得今年的自己更加relax,沒(méi)有親戚要走,沒(méi)有朋友相聚,也沒(méi)有很好的哥們要去敘舊,更沒(méi)有無(wú)知的相親,甚至可以這么說(shuō)沒(méi)有那些閑得慌的鄰居。 也可以說(shuō)是從今天開(kāi)始,算是可以進(jìn)入自己的小世界,做自己想做的事,看看書(shū),學(xué)習(xí)一下。 生活的精髓

    2024年02月19日
    瀏覽(21)
  • vue3 element-plus動(dòng)態(tài)菜單及動(dòng)態(tài)圖標(biāo)

    引入element-plus 注冊(cè)圖標(biāo)組件 動(dòng)態(tài)引入圖標(biāo)代碼 完整代碼 路由如下

    2024年01月18日
    瀏覽(50)
  • vue3實(shí)現(xiàn)動(dòng)態(tài)菜單和動(dòng)態(tài)路由和刷新后白屏處理

    vue3實(shí)現(xiàn)動(dòng)態(tài)菜單和動(dòng)態(tài)路由和刷新后白屏處理

    項(xiàng)目中,當(dāng)每一個(gè)角色得到的界面不一致的時(shí)候,我們就不能使用靜態(tài)菜單了,而是要從后端得到動(dòng)態(tài)的菜單數(shù)據(jù),然后動(dòng)態(tài)的將菜單數(shù)據(jù)展示在界面上。 除了在界面展示,也還要將界面的路由動(dòng)態(tài)添加,在路由動(dòng)態(tài)添加之后,你可能會(huì)出現(xiàn)刷新界面,界面變白的情況,頁(yè)面

    2024年02月06日
    瀏覽(19)
  • Django+vue3權(quán)限菜單rabc設(shè)計(jì)和動(dòng)態(tài)路由

    Django+vue3權(quán)限菜單rabc設(shè)計(jì)和動(dòng)態(tài)路由

    本次是基于Django和vue實(shí)現(xiàn) github源碼:nineaiyu/xadmin-server: xadmin-基于Django+vue3的rbac權(quán)限管理系統(tǒng) (github.com) 服務(wù)器設(shè)計(jì)及部分代碼? 權(quán)限控制的話,可以基于Django的permission進(jìn)行控制,并通過(guò)訪問(wèn)api的URL操作 核心代碼如下 因此,需要對(duì)menu表進(jìn)行設(shè)計(jì),由于涉及到了前端vue路由,

    2024年02月12日
    瀏覽(35)

覺(jué)得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請(qǐng)作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包