Vue項目中element-ui下拉框無法選中的解決方法

這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)Vue項目中element-ui下拉框無法選中的解決方法，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

問題描述：

在使用Vue框架和element-ui開發(fā)時，下拉框遇見一個問題，在函數(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)這個問題好像是因為下拉框數(shù)據(jù)是循環(huán)掉別的接口得來的，因為數(shù)據(jù)層次太多，render函數(shù)沒有自動更新，需手動強(qiáng)制刷新所以我直接強(qiáng)制刷新了值，而forceUpdate就是重新render。

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

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

小結(jié)：

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

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

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

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

下拉框代碼如下：

<el-form-item prop="czfaIds" label="處置方案">
 <el-select v-model="form.czfaIds" multiple  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是一個數(shù)組，選中后的值也是一個數(shù)組。但是在后端存儲的時候是轉(zhuǎn)換成字符串存到數(shù)據(jù)庫中的，所以在編輯界面從后端獲取的返回值是一個字符串，首選要把這個字符串轉(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值，而且沒有將選擇的選項選中。

如下圖：

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

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

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

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

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

代碼如下：

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

   // 將字符串轉(zhuǎn)換成數(shù)組，此時是字符串?dāng)?shù)組
   var arrStringCzfaIds = row.czfaIds.split(',')
   // 將字符串?dāng)?shù)組的每一項轉(zhuǎn)換成Number，生成一個新的數(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
  },

上述就是小編為大家分享的Vue項目中element-ui下拉框無法選中的解決方法了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道。