快捷導(dǎo)航

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

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

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

如圖：

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

原因：

是因?yàn)樵谂渲帽韱蔚倪^程中，重復(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無法選中問題

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

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

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

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

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