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

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

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

如圖：

當我已經選擇啟用狀態(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()
}

附：關于el-select無法選中問題

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

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

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

總結

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

您可能感興趣的文章:

用vscode開發(fā)vue應用的方法步驟
這篇文章主要介紹了用vscode開發(fā)vue應用的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-05-05
Antd的Table組件嵌套Table以及選擇框聯(lián)動操作
這篇文章主要介紹了Antd的Table組件嵌套Table以及選擇框聯(lián)動操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
超詳細的vue組件間通信總結
作為一個vue初學者不得不了解的就是組件間的數(shù)據通信(暫且不談vuex),通信方式根據組件之間的關系有不同之處,這篇文章主要給大家介紹了關于vue組件間通信的相關資料,需要的朋友可以參考下
2021-07-07
仿照Element-ui實現(xiàn)一個簡易的$message方法
這篇文章主要介紹了仿照Element-ui實現(xiàn)一個簡易的$message方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-09-09
vue.js使用v-pre與v-html輸出HTML操作示例
這篇文章主要介紹了vue.js使用v-pre與v-html輸出HTML操作,結合實例形式分析了vue.js基于v-pre與v-html屬性輸出HTML的具體操作技巧,需要的朋友可以參考下
2018-07-07
Vue的MVVM實現(xiàn)方法
本篇文章主要主要介紹了Vue的MVVM實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08
Vue3中解決組件間css層級問題的最佳實踐
<Teleport> 是 Vue 3 中引入的一個內置組件,用于將組件的內容渲染到 DOM 中的指定位置,而不受組件層級結構的限制,本文給大家介紹了Vue3使用Teleport解決組件間css層級問題的最佳實踐,需要的朋友可以參考下
2025-02-02
vue?history模式刷新404原因及解決方法
vue路由的URL有兩種模式,一種是?hash,一種是history,下面這篇文章主要給大家介紹了關于vue?history模式刷新404原因及解決方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-09-09
十個有用的自定義Vue鉤子函數(shù)總結
這篇文章主要為大家介紹了十個Vue.js中有用的自定義鉤子，讓我們的代碼更加好看。文中的示例代碼講解詳細，感興趣的小伙伴可以了解一下
2022-04-04
Vue中的Props(不可變狀態(tài))
這篇文章主要介紹了Vue中的Props(不可變狀態(tài)),本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-09-09