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