Element?plus?表單中下拉框的空值問題解決
問題:在表單中,有時候會碰到查詢條件需要用下拉框來區(qū)分的時候,比如需要區(qū)分全部 | 啟用 | 停用
三個狀態(tài),這時一般會給全部的value值設(shè)置為''
,但是這樣會導(dǎo)致下拉框無法選中對應(yīng)的全部
選項。
注:這里已經(jīng)正確的配置了querFormData對應(yīng)的值為''
,但是仍然無法正確的顯示默認值為全部
解決:在el-select上有個屬性empty-values
,值是一個數(shù)組,用來表明哪些值是空值,即被認為是沒選中狀態(tài)的值,默認是['', null, undefined]
,我們可以自行配置為[ null, undefined]
,這樣空值會被選中為全部
此外,element plus提供了Config Provider
來提供全局的配置選項,讓你的配置能夠在全局都能夠被訪問到。
在組件的外層套一個Config Provider
,也可以實現(xiàn)該效果。但請注意,這個組件會讓其包裹的所有組件都應(yīng)用這個選項,要根據(jù)業(yè)務(wù)需求來進行取舍。
更多信息可以參照Element Plus官方文檔的Config Provider。
到此這篇關(guān)于Element plus 表單中下拉框的空值問題解決的文章就介紹到這了,更多相關(guān)Element plus下拉框空值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue3中的ref為何要用.value進行值的調(diào)用呢
這篇文章主要介紹了Vue3中的ref為何要用.value進行值的調(diào)用,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09詳解Jest結(jié)合Vue-test-utils使用的初步實踐
這篇文章主要介紹了詳解Jest結(jié)合Vue-test-utils使用的初步實踐,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06Vue axios與Go Frame后端框架的Options請求跨域問題詳解
這篇文章主要介紹了Vue axios與Go Frame后端框架的Options請求跨域問題詳解,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03vue+vue-meta-info動態(tài)設(shè)置meta標(biāo)簽教程
這篇文章主要介紹了vue+vue-meta-info動態(tài)設(shè)置meta標(biāo)簽教程,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04vue3使用vuedraggable和grid實現(xiàn)自定義拖拽布局方式
這篇文章主要介紹了vue3使用vuedraggable和grid實現(xiàn)自定義拖拽布局方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06daisyUI解決TailwindCSS堆砌class問題詳解
這篇文章主要為大家介紹了daisyUI解決TailwindCSS堆砌class問題詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-07-07