bug-Ant中a-select的placeholder不生效(绑定默认值为undefined)

1.问题

Ant中使用a-select下拉框时,placeholder设置输入框显示默认值提示,vue2+ant

null与undefined在js中明确的区别:

  • **null:**一个值被定义,定义为"空值"
  • **undefined:**根本不存在定义

2.解决

2.1 a-select使用v-model绑定值

问题代码

html 复制代码
<a-form-model-item>
    <a-select  v-model="ScoreType" placeholder="请选择"  @select="Change">
	</a-select>
</a-form-model-item>
javascript 复制代码
 data(){
     return{
	    ScoreType: null,
     }
   }

v-model绑定的默认值为null,绑定了placeholder,并未显示默认提示,null值默认为空,顶替了placeholder提示。

更改v-model绑定值为undefined

javascript 复制代码
 data(){
     return{
	    ScoreType: undefined,
     }
   }
2.2 a-select中使用 :valueAPI(三元判断值为null设定为undefined)
html 复制代码
<a-form-model-item>
    <a-select  :valse="ScoreType ? ScoreType : undefined" placeholder="请选择"  @select="Change">
	</a-select>
</a-form-model-item>
javascript 复制代码
 data(){
     return{
	    ScoreType: undefined,
     }
   }

3.总结

在Vue2使用AntDesign的a-select组件时,若要显示默认提示,需注意v-model的初始值。当绑定值设为undefined,placeholder才会显示。使用AntDesign的a-select组件时value属性结合三元运算符处理。

相关推荐
I still …4 小时前
面向OS bug的TypeState分析
bug
欢脱的小猴子1 天前
VUE3加载cesium,导入czml的星座后页面卡死BUG 修复
前端·vue.js·bug
boonya3 天前
国内外常用的免费BUG管理工具选型
bug
10岁的博客3 天前
Bug排查日记:高效记录与解决之道
bug
彭刷子3 天前
【Bug】Nexus无法正常启动的五种解决方法
bug·nexus
黑客飓风3 天前
从基础功能到自主决策, Agent 开发进阶路怎么走?
面试·log4j·bug
mahuifa3 天前
C++(Qt)软件调试---bug排查记录(36)
c++·bug·软件调试
Kyln.Wu3 天前
【python实用小脚本-205】[HR揭秘]手工党逐行查Bug的终结者|Python版代码质量“CT机”加速器(建议收藏)
开发语言·python·bug
2501_930104044 天前
Bug 排查日记:打造高效问题定位与解决的技术秘籍
bug