Element plus 表单中下拉框的空值问题解决
更新时间：2024年11月08日 10:03:51 作者：Bjnsfxs
有时候会碰到查询条件需要用下拉框来区分的时候,比如需要区分全部 | 启用 | 停用三个状态,这时一般会给全部的value值设置为'',但是这样会导致下拉框无法选中对应的全部选项,本文就来介绍一下这个问题解决,感兴趣的可以了解一下
问题：在表单中，有时候会碰到查询条件需要用下拉框来区分的时候，比如需要区分全部 | 启用 | 停用三个状态，这时一般会给全部的value值设置为''，但是这样会导致下拉框无法选中对应的全部选项。
注：这里已经正确的配置了querFormData对应的值为''，但是仍然无法正确的显示默认值为全部
解决：在el-select上有个属性empty-values，值是一个数组，用来表明哪些值是空值，即被认为是没选中状态的值，默认是['', null, undefined]，我们可以自行配置为[ null, undefined]，这样空值会被选中为全部
此外，element plus提供了Config Provider 来提供全局的配置选项，让你的配置能够在全局都能够被访问到。
在组件的外层套一个Config Provider，也可以实现该效果。但请注意，这个组件会让其包裹的所有组件都应用这个选项，要根据业务需求来进行取舍。
更多信息可以参照Element Plus官方文档的Config Provider。
到此这篇关于Element plus 表单中下拉框的空值问题解决的文章就介绍到这了,更多相关Element plus下拉框空值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue2 v-model/v-text 中使用过滤器的方法示例
这篇文章主要介绍了vue2 v-model/v-text 中使用过滤器的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
今天小编就为大家分享一篇VUE.js实现动态设置输入框disabled属性，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
vue大文件分片上传之simple-uploader.js的使用
本文主要介绍了vue大文件分片上传之simple-uploader.js的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
这篇文章主要介绍了antd vue 如何调整checkbox默认样式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
前端vue项目如何使用Decimal.js做加减乘除求余运算
decimal.js是使用的二进制来计算的,可以更好地实现格化式数学运算,对数字进行高精度处理,使用decimal类型处理数据可以保证数据计算更为精确,这篇文章主要给大家介绍了关于前端vue项目如何使用Decimal.js做加减乘除求余运算的相关资料,需要的朋友可以参考下2024-05-05
本文将结合实例代码，介绍Vue批量更新dom的实现步骤，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧2021-07-07
探通过本篇文章给大家探讨不同场景下组件间的数据“交流”的Vue实现方法，感兴趣的朋友一起看看吧2017-08-08
这篇文章主要介绍了Vue结合原生js实现自定义组件自动生成示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-01-01
下面小编就为大家分享一篇在vue中实现图片和文件上传的示例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
本文主要介绍了Vue使用lodash进行防抖节流的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
最新评论