問題描述：

在使用Vue框架和element-ui開發(fā)時(shí)，下拉框遇見一個(gè)問題，在函數(shù)中改變了頁面中的某個(gè)值，在函數(shù)中查看是修改成功了，但在頁面中沒有及時(shí)刷新改變后的值，也就是下拉框值無法選中。（踩坑踩得莫名其妙）

代碼段：

<el-select v-model="value" placeholder="請選擇" @change="change()">
   <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>

解決方法：

出現(xiàn)這個(gè)問題好像是因?yàn)橄吕驍?shù)據(jù)是循環(huán)掉別的接口得來的，因?yàn)閿?shù)據(jù)層次太多，render函數(shù)沒有自動(dòng)更新，需手動(dòng)強(qiáng)制刷新所以我直接強(qiáng)制刷新了值，而forceUpdate就是重新render。

寫一個(gè)方法，在select的change事件中調(diào)用此方法，運(yùn)用 this.$forceUpdate()強(qiáng)制刷新，頁面正常選值。

 change(){
   this.$forceUpdate()
 },

小結(jié)：

同理，forceUpdate()這個(gè)方法也適用一些很深的組件 state 已經(jīng)改變了的時(shí)候，可以在該組件上面調(diào)用，解決頁面v-for中修改item屬性值后頁面頁面值不改變的問題。

補(bǔ)充知識：解決element ui select多選下拉框，在編輯表單記錄時(shí)沒有回顯數(shù)據(jù)，默認(rèn)選中的問題

前端使用vue，項(xiàng)目中使用的是element ui組件，在使用select下拉框多選時(shí)，新增記錄時(shí)select多選下拉框正常使用，沒問題。但是在編輯記錄時(shí)，編輯界面也為select下拉框賦值了，卻沒有顯示數(shù)據(jù)。

先放一個(gè)select多選下拉框編輯時(shí)正確的加載數(shù)據(jù)的顯示效果圖：

下拉框代碼如下：

<el-form-item prop="czfaIds" label="處置方案">
 <el-select v-model="form.czfaIds" multiple style="width:80%;" placeholder="請選擇" clearable :disabled="showControl">
   <el-option
       v-for="item in czfas" 
       :key="item.value"
       :label="item.wsdFamc" 
       :value="item.id" 
    />
  </el-select>
</el-form-item>

下拉框中的數(shù)據(jù)源czfas是一個(gè)數(shù)組，選中后的值也是一個(gè)數(shù)組。但是在后端存儲(chǔ)的時(shí)候是轉(zhuǎn)換成字符串存到數(shù)據(jù)庫中的，所以在編輯界面從后端獲取的返回值是一個(gè)字符串，首選要把這個(gè)字符串轉(zhuǎn)換成數(shù)組，綁定到select 的v-model屬性上。

代碼如下：

  // 編輯
  queryEditRow(index, row) {
   this.titleInfo = '編輯'
   this.dialogVisible = true
   this.form = Object.assign({}, row)

   // 將字符串轉(zhuǎn)換成數(shù)組，綁定到select控件的v-model屬性上
   this.form.czfaIds = row.czfaIds.split(',')

   this.showbtn = true
   this.showControl = false
  },

但是發(fā)現(xiàn)還是有問題，顯示的是選中的方案的id值，而且沒有將選擇的選項(xiàng)選中。

如下圖：

分析：select選擇器對數(shù)據(jù)的顯示，是匹配到select下拉框數(shù)據(jù)源中對應(yīng)的value值時(shí)則會(huì)顯示相應(yīng)的label；若是沒有匹配到，則顯示的是該value。

顯然，這里是因?yàn)闆]有匹配到下拉框中的value值，直接顯示的這個(gè)字段的值。

在瀏覽器控制臺中輸出數(shù)據(jù)源的數(shù)據(jù)：

在瀏覽器控制臺輸出返回的字符串轉(zhuǎn)換成數(shù)組后的值：

發(fā)現(xiàn)select下拉框中的id 和 v-mode里邊綁定的id的數(shù)據(jù)類型不一致，雖然數(shù)據(jù)的值是一樣的，但是一個(gè)是字符串，一個(gè)是整型數(shù)值。將后端返回的字符串在轉(zhuǎn)換成數(shù)組時(shí)，轉(zhuǎn)換成整形數(shù)組，下拉框即可正確顯示。

代碼如下：

  // 編輯
  queryEditRow(index, row) {
   this.titleInfo = '編輯'
   this.dialogVisible = true
   this.form = Object.assign({}, row)

   // 將字符串轉(zhuǎn)換成數(shù)組，此時(shí)是字符串?dāng)?shù)組
   var arrStringCzfaIds = row.czfaIds.split(',')
   // 將字符串?dāng)?shù)組的每一項(xiàng)轉(zhuǎn)換成Number，生成一個(gè)新的數(shù)組
   var arrIntCzfaIds = []
   for (var arrInt in arrStringCzfaIds) {
    arrIntCzfaIds.push(parseInt(arrStringCzfaIds[arrInt]))
   }
   // 將新的Number數(shù)組，綁定到select空間的v-model上
   this.form.czfaIds = arrIntCzfaIds

   this.showbtn = true
   this.showControl = false
  },

此時(shí)，顯示的效果就是本文開頭的效果了。

以上這篇解決element-ui的下拉框有值卻無法選中的情況就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評論