快捷導(dǎo)航

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

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

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

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

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

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

<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="標(biāo)簽" 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：下拉框內(nèi)所有數(shù)據(jù)
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的下拉框有值，點擊后卻無法選中的問題

出現(xiàn)原因

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

解決方法

無法及時更新，那么用change事件監(jiān)聽值的變化，調(diào)用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()
  },