問題描述：

在使用Vue框架和element-ui開發時，下拉框遇見一個問題，在函式中改變了頁面中的某個值，在函式中檢視是修改成功了，但在頁面中沒有及時重新整理改變後的值，也就是下拉框值無法選中。（踩坑踩得莫名其妙）

程式碼段：

<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>

解決方法：

出現這個問題好像是因為下拉框資料是迴圈掉別的介面得來的，因為資料層次太多，render函式沒有自動更新，需手動強制重新整理所以我直接強制重新整理了值，而forceUpdate就是重新render。

寫一個方法，在select的change事件中呼叫此方法，運用 this.$forceUpdate()強制重新整理，頁面正常選值。

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

小結：

同理，forceUpdate()這個方法也適用一些很深的元件 state 已經改變了的時候，可以在該元件上面呼叫，解決頁面v-for中修改item屬性值後頁面頁面值不改變的問題。

補充知識：解決element ui select多選下拉框，在編輯表單記錄時沒有回顯資料，預設選中的問題

前端使用vue，專案中使用的是element ui元件，在使用select下拉框多選時，新增記錄時select多選下拉框正常使用，沒問題。但是在編輯記錄時，編輯介面也為select下拉框賦值了，卻沒有顯示資料。

先放一個select多選下拉框編輯時正確的載入資料的顯示效果圖：

下拉框程式碼如下：

<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>

下拉框中的資料來源czfas是一個數組，選中後的值也是一個數組。但是在後端儲存的時候是轉換成字串存到資料庫中的，所以在編輯介面從後端獲取的返回值是一個字串，首選要把這個字串轉換成陣列，繫結到select 的v-model屬性上。

程式碼如下：

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

   // 將字串轉換成陣列，繫結到select控制元件的v-model屬性上
   this.form.czfaIds = row.czfaIds.split(',')

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

但是發現還是有問題，顯示的是選中的方案的id值，而且沒有將選擇的選項選中。

如下圖：

分析：select選擇器對資料的顯示，是匹配到select下拉框資料來源中對應的value值時則會顯示相應的label；若是沒有匹配到，則顯示的是該value。

顯然，這裡是因為沒有匹配到下拉框中的value值，直接顯示的這個欄位的值。

在瀏覽器控制檯中輸出資料來源的資料：

在瀏覽器控制檯輸出返回的字串轉換成陣列後的值：

發現select下拉框中的id 和 v-mode裡邊繫結的id的資料型別不一致，雖然資料的值是一樣的，但是一個是字串，一個是整型數值。將後端返回的字串在轉換成陣列時，轉換成整形陣列，下拉框即可正確顯示。

程式碼如下：

  // 編輯
  queryEditRow(index,row)

   // 將字串轉換成陣列，此時是字串陣列
   var arrStringCzfaIds = row.czfaIds.split(',')
   // 將字串陣列的每一項轉換成Number，生成一個新的陣列
   var arrIntCzfaIds = []
   for (var arrInt in arrStringCzfaIds) {
    arrIntCzfaIds.push(parseInt(arrStringCzfaIds[arrInt]))
   }
   // 將新的Number陣列，繫結到select空間的v-model上
   this.form.czfaIds = arrIntCzfaIds

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

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

以上這篇解決element-ui的下拉框有值卻無法選中的情況就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。