element-ui之解決select無法回顯的問題
更新時間：2023年04月05日 17:10:04 作者：前端小問題
這篇文章主要介紹了element-ui之解決select無法回顯的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
element-ui解決select無法回顯
問題描述
給的是value的值，沒有正常顯示lable中的值，是因為當select中只賦值了value沒有賦值lable的值時，系統(tǒng)會默認將value和lable共用。
我們在綁定數(shù)值時value=“1” 是綁定的字符串，所以下面重新將value 賦值為2，同時lable也默認成2，就顯示了2.
方法：使用**：value=“1”**就可以回顯。
<el-select v-model="moreForm.isVip" placeholder="獎勵會員" style="width:100%">
<el-option label="普通會員" value="0"></el-option>
<el-option label="vip" value="1"></el-option>
<el-option label="vvip" value="2"></el-option>
</el-select>
getUserInfor(row) {
this.moreForm.isVip = row.isVip;
},解決方法
<el-select v-model="moreForm.isVip" placeholder="獎勵會員" style="width:100%">
<el-option label="普通會員" :value="0"></el-option>
<el-option label="vip" :value="1"></el-option>
<el-option label="vvip" :value="2"></el-option>
</el-select>
element-ui多個select回顯成功，但是選中無反應
在使用el-select 組件出現(xiàn)一個小問題，對成功回顯后的數(shù)據(jù)，再次進行添加，選框中沒有更新，但是提交表單，實際數(shù)據(jù)是更新的。懷疑可能是視圖層沒有更新，組件化框架類似問題。
原因 下拉框數(shù)據(jù)是循環(huán)別的接口得來的，因為數(shù)據(jù)層次太多，render函數(shù)沒有自動更新，需手動強制刷新
解決方案
添加 @change="$forceUpdate()" 強制更新視圖
<el-select v-model="form.roleIds" multiple placeholder="請選擇" @change="$forceUpdate()"> ? ? ? ? ? ? ? ? <el-option ? ? ? ? ? ? ? ? ? v-for="item in roleOptions" ? ? ? ? ? ? ? ? ? :key="item.id" ? ? ? ? ? ? ? ? ? :label="item.roleName" ? ? ? ? ? ? ? ? ? :value="item.id" ? ? ? ? ? ? ? ? ? :disabled="item.status == 1" ? ? ? ? ? ? ? ? ></el-option> ? ? ? ? ? ? ? </el-select>?
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
vue使用自定義指令實現(xiàn)按鈕權(quán)限展示功能
這篇文章主要介紹了vue中使用自定義指令實現(xiàn)按鈕權(quán)限展示功能，本文結(jié)合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-04-04
本文主要介紹了Vue中接收二進制文件流實現(xiàn)pdf預覽的方法，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12
利用 vue-cli 搭建的項目大都是單頁面應用項目，對于簡單的項目，單頁面就能滿足要求。這篇文章主要介紹了vue.js多頁面開發(fā)環(huán)境搭建 ,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了Vue實現(xiàn)JSON字符串格式化編輯器組件,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
vue在線預覽word、excel、pdf、txt、圖片的方法實例
最近工作中遇到了一個需要在線預覽文件的需求,所以這篇文章主要給大家介紹了vue在線預覽word、excel、pdf、txt、圖片的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue接入ts基本方法，關(guān)于ts，也出了很久，下面我們就來簡單學習了下ts并且在原有項目上接入基本ts語法，也算是一個初級嘗試，簡單梳理下基礎的接入配置和已經(jīng)遇到的問題，供需要的小伙伴們參考2022-01-01
vue-router 按需加載 component: () => import() 報錯的解決
這篇文章主要介紹了vue-router 按需加載 component: () => import() 報錯的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了vue-cli3 取消eslint校驗代碼的解決辦法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-01-01
項目中后臺返回的時間有多種形式,時間戳、ISO標準時間格式等，我們需要轉(zhuǎn)化展示成能看的懂得時間格式,下面這篇文章主要給大家介紹了關(guān)于vue時間格式總結(jié)以及轉(zhuǎn)換方法的相關(guān)資料,需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細介紹了vue實現(xiàn)前端列表多條件篩選，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10