element-ui之select無(wú)法回顯問(wèn)題如何解決

這篇文章主要講解了“element-ui之select無(wú)法回顯問(wèn)題如何解決”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“element-ui之select無(wú)法回顯問(wèn)題如何解決”吧！

element-ui解決select無(wú)法回顯

問(wèn)題描述

給的是value的值，沒(méi)有正常顯示lable中的值，是因?yàn)楫?dāng)select中只賦值了value沒(méi)有賦值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ì)員" >
            <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ì)員" >
            <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回顯成功，但是選中無(wú)反應(yīng)

在使用el-select 組件出現(xiàn)一個(gè)小問(wèn)題，對(duì)成功回顯后的數(shù)據(jù)，再次進(jìn)行添加，選框中沒(méi)有更新，但是提交表單，實(shí)際數(shù)據(jù)是更新的。懷疑可能是視圖層沒(méi)有更新，組件化框架類似問(wèn)題。

原因 下拉框數(shù)據(jù)是循環(huán)別的接口得來(lái)的，因?yàn)閿?shù)據(jù)層次太多，render函數(shù)沒(méi)有自動(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>

感謝各位的閱讀，以上就是“element-ui之select無(wú)法回顯問(wèn)題如何解決”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)element-ui之select無(wú)法回顯問(wèn)題如何解決這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！