快捷導(dǎo)航

vue elementUI下拉框值無(wú)法選中問(wèn)題及解決方案

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

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

vue elementUI下拉框值無(wú)法選中問(wèn)題

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

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

<el-form-item label="游戲">
    <el-select v-model="form.gamesId" filterable placeholder="請(qǐng)選擇" @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 // 點(diǎn)擊修改后請(qǐng)求接口，將值賦給下拉框綁定的變量 這樣會(huì)有視圖更新不及時(shí)的問(wèn)題

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

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

<el-form-item label="標(biāo)簽" prop="label">
    <el-select v-model="form.label" multiple collapse-tags placeholder="請(qǐng)選擇">
         <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

擴(kuò)展：

解決element-ui的下拉框有值，點(diǎn)擊后卻無(wú)法選中的問(wèn)題

出現(xiàn)原因

因?yàn)橄吕斜淼臄?shù)據(jù)是根據(jù)輸入框的值的變化時(shí)行實(shí)時(shí)調(diào)用接口來(lái)更新而非不變的，頻繁的更新，可能造成點(diǎn)擊下拉列表中的某項(xiàng)后，select所綁定的value值無(wú)法進(jìn)行及時(shí)的更新，尤其是所綁定的值是對(duì)象時(shí)（vue不能檢測(cè)對(duì)象屬性的變化），更加會(huì)造成無(wú)法選中的問(wèn)題。

解決方法

無(wú)法及時(shí)更新，那么用change事件監(jiān)聽(tīng)值的變化，調(diào)用this.$forceUpdate()手動(dòng)強(qiáng)制更新，重新渲染。

代碼如下

<el-select v-model="value" placeholder="請(qǐng)選擇"  @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()
  },