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

相关推荐
ABILI .1 天前
FineReport网络报表bug
bug·finereport·帆软
小陶来咯1 天前
机器人坐下后拍触摸板站起行动指令无效 — Bug 分析
机器人·bug
萤萤七悬2 天前
【AI精彩BUG汇总】一、yolo图像训练截图蓝色变橙色
人工智能·yolo·bug
小雨青年2 天前
Git Bisect 实战:用二分法快速找到引入 Bug 的提交
git·bug
淘矿人2 天前
Claude辅助DevOps实践
java·大数据·运维·人工智能·算法·bug·devops
哥本哈士奇3 天前
LangChain Deepagent 版本0.6.1中间件一个bug
中间件·langchain·bug
java修仙传3 天前
Java 实习日记:断面状态筛选 Bug 修复与对比案例日期过滤优化
java·bug·实习
CeshirenTester3 天前
当其他人回复您的帖子时是否接收实时通知? “线上Bug排查3小时,CTO当场发火”:一套让测试人“硬气”起来的质量保障体系
bug
139的世界真奇妙4 天前
生产问题排查记录
golang·bug·学习方法
oioihoii4 天前
我的第一次移动端 AI 办公:在地铁上把 Bug 修了
人工智能·bug