vue elementUI下拉框值無法選中問題及解決方案

更新時間：2024年03月20日 10:48:17 作者：一名技術極客

大家在寫系統(tǒng)的時候,會有這樣的需求：點擊修改后把需要修改的數據放入表單,其中會有下拉單選框、下拉多選框,展示下拉框單選框內的數據只需要將所選id賦值給下拉框綁定的值就可以了,下面給大家分享vue elementUI下拉框值無法選中問題,感興趣的朋友一起看看吧

vue elementUI下拉框值無法選中問題

大家在寫系統(tǒng)的時候，會有這樣的需求：點擊修改后把需要修改的數據放入表單，其中會有下拉單選框、下拉多選框。

展示下拉框單選框內的數據只需要將所選id賦值給下拉框綁定的值就可以了。在修改的時候，大家會發(fā)現下拉框選擇不了，出現這問題的原因就是視圖更新不夠及時，在下拉框綁定一個change事件，寫入this.$forceUpdate()就不會出現問題了

<el-form-item label="游戲">
    <el-select v-model="form.gamesId" filterable placeholder="請選擇" @change="changeGame">
        <el-option v-for="item in gameList" :key="item.id" :label="item.name" :value="item.id"></el-option>
    </el-select>
</el-form-item>

this.form.gamesId = res.data.gamesId // 點擊修改后請求接口，將值賦給下拉框綁定的變量 這樣會有視圖更新不及時的問題

changeGame(id){
    this.$forceUpdate() //在下拉框上綁定change事件 更新視圖 這樣就不會有視圖更新的問題
},

多選框。多選框不像單選框只要直接賦值進去就可已，還需要做進一步處理

<el-form-item label="標簽" prop="label">
    <el-select v-model="form.label" multiple collapse-tags placeholder="請選擇">
         <el-option v-for="item in labels" :key="item.id" :label="item.name" :value="item.name">
        </el-option>
    </el-select>
</el-form-item>

// this.form.label：下拉框綁定值 this.labels：下拉框內所有數據
let arr=[]
this.form.label.forEach(val=>{
    this.labels.forEach(item=>{
        if(val==item.id){
            arr.push(item.name);
        }
    })
})
this.form.label=arr

擴展：

解決element-ui的下拉框有值，點擊后卻無法選中的問題

出現原因

因為下拉列表的數據是根據輸入框的值的變化時行實時調用接口來更新而非不變的，頻繁的更新，可能造成點擊下拉列表中的某項后，select所綁定的value值無法進行及時的更新，尤其是所綁定的值是對象時（vue不能檢測對象屬性的變化），更加會造成無法選中的問題。

解決方法

無法及時更新，那么用change事件監(jiān)聽值的變化，調用this.$forceUpdate()手動強制更新，重新渲染。

代碼如下

<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>
change(){
      this.$forceUpdate()
  },