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属性结合三元运算符处理。

相关推荐
ALGO阿狗10 天前
SimpleDateFormat(“YYYY-MM-dd“)格式化时间出现了bug?
bug
爱学习的小可爱卢11 天前
JavaSE基础-Java异常体系:Bug定位终极指南
java·bug·javase
GeekyGuru11 天前
代码诊疗室——疑难Bug破解战
bug
嵌入式×边缘AI:打怪升级日志14 天前
9.2.3 UART 驱动严重 Bug(保姆级讲解)
bug
qq_242188633216 天前
代码诊疗室——疑难Bug破解战
bug
Moshow郑锴18 天前
Java SpringBoot 疑难 Bug 排查思路解析:从“语法正确”到“行为相符”
java·spring boot·bug
人间花海18 天前
BUG终结者:挑战你的调试极限
bug
2401_8582861118 天前
OS54.【Linux】System V 共享内存(3) “共享内存+管道“修bug记录
linux·运维·服务器·算法·bug
Kurbaneli19 天前
代码诊疗室——疑难Bug破解战
bug
Mr -老鬼21 天前
从 0 到 1 落地:Rust + Salvo 实现用户系统与 Bug 管理系统
开发语言·rust·bug