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

更新時間：2023年08月23日 09:38:25 作者：愛寫代碼的派大星

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

如圖：

當我已經(jīng)選擇啟用狀態(tài)的時候，然后點擊停用狀態(tài)沒反應。

原因：

是因為在配置表單的過程中，重復使用了這個字段。

如：

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>

就是在表單中重復使用了status這個字段，然后導致選擇失效。

解決辦法：

在el-select加入@change事件，進行強制渲染，這樣就可以完成下拉框的選擇。

<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(){ 
    //強制渲染
    this.$forceUpdate()
}

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

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

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

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

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

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