vue如何解決el-select下拉框顯示ID不顯示label問題
更新時間：2023年06月08日 16:18:51 作者：G-old
這篇文章主要介紹了vue如何解決el-select下拉框顯示ID不顯示label問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
解決el-select下拉框顯示ID不顯示label
問題
Form中用el-select顯示訂單狀態(tài)：
<el-select v-model="dataForm.orderStatus"> ? ? ? <el-option label="待支付" value="0"></el-option> ? ? ? <el-option label="已支付" value="1"></el-option> ? ? ? <el-option label="已確認(rèn)" value="2"></el-option> ? ? ? <el-option label="已取消" value="3"></el-option> </el-select>
界面顯示value，不顯示label
最終解決方法
在option的value屬性前加冒號“：”
<el-select v-model="dataForm.orderStatus"> ? ? ? <el-option label="待支付" :value="0"></el-option> ? ? ? <el-option label="已支付" :value="1"></el-option> ? ? ? <el-option label="已確認(rèn)" :value="2"></el-option> ? ? ? <el-option label="已取消" :value="3"></el-option> ? </el-select>
完美解決
修改組件el-select默認(rèn)展示id不展示label
項目中有修改組件，點擊獲取到表單的數(shù)據(jù)，但是有一個下拉框展示的是id而不是name
看了半天代碼，雙向綁定和傳值都沒問題，查了半天資料最后發(fā)現(xiàn)是后端傳給我的id字段和前端的id類型不同，一個是字符串一個是number，返回的數(shù)字和el-option選框里的value值類型對應(yīng)不上
解決辦法
將v-for遍歷的數(shù)組中id字段都改成number類型
修改前：
修改后：
修改后頁面正常顯示：
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue之a(chǎn)-table中實現(xiàn)清空選中的數(shù)據(jù)
今天小編就為大家分享一篇vue之a(chǎn)-table中實現(xiàn)清空選中的數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue-Cli配置代理轉(zhuǎn)發(fā)解決跨域問題的方法
本文主要介紹了Vue-Cli配置代理轉(zhuǎn)發(fā)解決跨域問題的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
element-ui表格數(shù)據(jù)轉(zhuǎn)換的示例代碼
這篇文章主要介紹了element-ui表格數(shù)據(jù)轉(zhuǎn)換的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
vue-router清除url地址欄路由參數(shù)的操作代碼
這篇文章主要介紹了vue-router清除url地址欄路由參數(shù),本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2015-11-11
文章介紹了四種在Vue中實現(xiàn)復(fù)制文本到剪貼板的方法：1.使用navigator.clipboard.writeText（需要在安全域下使用）；2.使用即將廢棄的execCommand方法；3.通過引入vue-clipboard2庫；4.使用clipboard.js庫,推薦使用第一種或第三種方法2025-10-10
Vue3?封裝?Element?Plus?Menu?無限級菜單組件功能的詳細(xì)代碼
本文分別使用?SFC（模板方式）和?tsx?方式對?Element?Plus?*el-menu*?組件進(jìn)行二次封裝，實現(xiàn)配置化的菜單，有了配置化的菜單，后續(xù)便可以根據(jù)路由動態(tài)渲染菜單，對Vue3?無限級菜單組件相關(guān)知識感興趣的朋友一起看看吧2022-09-09
Vue transition實現(xiàn)點贊動畫效果的示例
點贊動畫是網(wǎng)頁評論中常見的功能，本文將介紹如何用vue實現(xiàn)這一效果。點贊時愛心縮小變大，變大時略微大一點再變正常，取消點贊時愛心無動畫，同時數(shù)字滾動，+1 時向上滾動，-1 時向下滾動2021-05-05
平時寫vue的時候知道 props 有很多種用法，今天我們來看看vue內(nèi)部是怎么處理 props 中那么多的用法的。非常具有實用價值，需要的朋友可以參考下2019-01-01
這篇文章介紹了Vue.js中v-for指令的用法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-03-03
使用Vue3和Pinia實現(xiàn)網(wǎng)頁刷新功能
在現(xiàn)代 Web 開發(fā)中,保持用戶界面的動態(tài)性和響應(yīng)性至關(guān)重要,當(dāng)用戶觸發(fā)某些操作時,例如點擊按鈕或者完成表單提交,我們往往需要刷新頁面的一部分來展示最新的數(shù)據(jù),本文將介紹如何使用 Vue 3 和 Pinia 來實現(xiàn)這一功能,需要的朋友可以參考下2024-08-08