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

相关推荐
自学也学好编程9 分钟前
【BUG】nvm无法安装低版本Node.js:The system cannot find the file specified解决方案
node.js·bug
WBingJ2 天前
记录一次薛定谔bug
python·opencv·bug
普宁彭于晏3 天前
uni-app switch(开关选择器) BUG
uni-app·bug
!chen5 天前
Oracle 19.20未知BUG导致oraagent进程内存泄漏
数据库·oracle·bug
SAP龙哥7 天前
SAP在未启用负库存的情况下,库存却出现了负数-补充S4 1709 BUG
运维·bug
lxmyzzs7 天前
【已解决】YOLO11模型转wts时报错:PytorchStreamReader failed reading zip archive
人工智能·python·深度学习·神经网络·目标检测·计算机视觉·bug
JHCan3337 天前
一个没有手动加分号引发的bug
前端·javascript·bug
lxmyzzs7 天前
【已解决】Jetson Orin NX apt更换国内源
嵌入式硬件·计算机视觉·bug
JAVA学习通8 天前
【测试开发】---Bug篇
bug
兰琛8 天前
android 小bug :文件冲突的问题
android·学习·bug