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

相关推荐
陌路物是人非3 小时前
记一个 @Resource BUG
java·开发语言·bug
冬奇Lab12 小时前
稳定性性能系列之四——异常日志机制与进程冻结:问题排查的黑匣子
android·性能优化·车载系统·bug
_OP_CHEN12 小时前
【测试理论与实践】(三)测试BUG篇:从 BUG 本质到实战博弈,带你吃透软件测试的核心逻辑
运维·测试开发·产品运营·bug·压力测试·测试
-拟墨画扇-2 天前
Git | Bug分支操作
git·gitee·github·bug·gitcode
小凡子空白在线学习2 天前
Bug目录
bug
jiedaodezhuti4 天前
秒级定位线上Bug的一些命令
bug
l1t5 天前
修改一个触发PostgreSQL 17.2 bug的SQL
sql·postgresql·bug
包小黑6 天前
【Linux】bug登记好习惯:发现bug,用命令行截取对应日志
linux·bug
癫狂的兔子7 天前
【BUG】【Python】逆序取值为空
bug
癫狂的兔子7 天前
【BUG】【Python】精确度问题
python·bug