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