快捷導(dǎo)航

element?el-select下拉框選擇失效解決辦法

更新時(shí)間：2023年08月23日 09:38:25 作者：愛(ài)寫(xiě)代碼的派大星

el-select即選擇器用于從若干個(gè)候選項(xiàng)中選擇其中一個(gè)(或者多個(gè)),在傳統(tǒng)網(wǎng)頁(yè)開(kāi)發(fā)中選擇器經(jīng)常被稱(chēng)作下拉框、下拉列表是最常用的表單元素之一,這篇文章主要給大家介紹了關(guān)于element?el-select下拉框選擇失效解決辦法,需要的朋友可以參考下

如圖：

當(dāng)我已經(jīng)選擇啟用狀態(tài)的時(shí)候，然后點(diǎn)擊停用狀態(tài)沒(méi)反應(yīng)。

原因：

是因?yàn)樵谂渲帽韱蔚倪^(guò)程中，重復(fù)使用了這個(gè)字段。

如：

this.form.status = row.data.status

<el-form-item label="狀態(tài)" prop="status">
   <el-select v-model="form.status">
     <el-option
     :label="label"
     >
     </el-option>     
   </el-select>
</el-form-item>

就是在表單中重復(fù)使用了status這個(gè)字段，然后導(dǎo)致選擇失效。

解決辦法：

在el-select加入@change事件，進(jìn)行強(qiáng)制渲染，這樣就可以完成下拉框的選擇。

<el-form-item label="狀態(tài)" prop="status">
   <el-select v-model="form.status" @change="change">
     <el-option
     :label="label"
     >
     </el-option>     
   </el-select>
</el-form-item>

     change(){ 
    //強(qiáng)制渲染
    this.$forceUpdate()
}

附：關(guān)于el-select無(wú)法選中問(wèn)題

場(chǎng)景：在el-dialog彈框中寫(xiě)el-select選中，發(fā)現(xiàn)無(wú)法選中，查詢(xún)到一下解決辦法，以做記錄

解決：1、查看el-select屬性v-model的值是否在data中定義

2、數(shù)據(jù)嵌套太多層，vue不能實(shí)時(shí)監(jiān)測(cè)到數(shù)據(jù)更新，所以強(qiáng)制刷新

總結(jié)

到此這篇關(guān)于element el-select下拉框選擇失效解決辦法的文章就介紹到這了,更多相關(guān)el-select下拉框選擇失效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue實(shí)現(xiàn)錨點(diǎn)定位功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)錨點(diǎn)定位功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-06-06
vue.js實(shí)現(xiàn)簡(jiǎn)單計(jì)時(shí)器功能
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)簡(jiǎn)單計(jì)時(shí)器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
Vue實(shí)現(xiàn)自定義組件改變組件背景色(示例代碼)
要實(shí)現(xiàn) Vue 自定義組件改變組件背景色,你可以通過(guò) props 將背景色作為組件的一個(gè)屬性傳遞給組件,在組件內(nèi)部監(jiān)聽(tīng)這個(gè)屬性的變化,并將其應(yīng)用到組件的樣式中,下面通過(guò)示例代碼介紹Vue如何實(shí)現(xiàn)自定義組件改變組件背景色,感興趣的朋友一起看看吧
2024-03-03
關(guān)于vue表單提交防雙/多擊的例子
今天小編就為大家分享一篇關(guān)于vue表單提交防雙/多擊的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-10-10
vue引入高德地圖并繪制點(diǎn)線(xiàn)面的方法
這篇文章主要介紹了vue引入高德地圖并繪制點(diǎn)線(xiàn)面的實(shí)例代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧
2024-03-03
Vue之監(jiān)聽(tīng)方法案例詳解
這篇文章主要介紹了Vue之監(jiān)聽(tīng)方法案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
2021-07-07
vue 使用v-if切換輸入框時(shí)導(dǎo)致輸入框的數(shù)據(jù)內(nèi)容沒(méi)有清空的問(wèn)題解決(兩種解決方法)
這篇文章主要介紹了vue 使用v-if切換輸入框時(shí)導(dǎo)致輸入框的數(shù)據(jù)內(nèi)容沒(méi)有清空的問(wèn)題解決，本文給大家分享兩種解決方法,需要的朋友可以參考下
2023-05-05
Vue中v-for的數(shù)據(jù)分組實(shí)例
下面小編就為大家分享一篇Vue中v-for的數(shù)據(jù)分組實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
vue3 Class 與 Style 綁定操作方法
數(shù)據(jù)綁定的一個(gè)常見(jiàn)需求場(chǎng)景是操縱元素的 CSS class 列表和內(nèi)聯(lián)樣式,因?yàn)?nbsp;class 和 style 都是 attribute,我們可以和其他 attribute 一樣使用 v-bind 將它們和動(dòng)態(tài)的字符串綁定,這篇文章主要介紹了vue3 Class 與 Style 綁定操作方法,需要的朋友可以參考下
2024-05-05
vue中typescript裝飾器的使用方法超實(shí)用教程
這篇文章主要介紹了vue中使用typescript裝飾器的使用方法超實(shí)用教程,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-06-06