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

相关推荐
shanks6610 小时前
【Bug】causal_conv1d库的安装
bug
晓风伴月10 小时前
Trae AI 辅助修复uniapp 微信小程序的Bug
uni-app·bug·trae
loop lee10 小时前
【BUG】类文件具有错误的版本 61.0, 应为 52.0,请删除该文件或确保该文件位于正确的类路径子目录中。
bug
kunkun1013 天前
关于软件测试中的bug
python·bug·压力测试
用键盘当武器的秋刀鱼4 天前
springboot-bug
java·spring boot·bug
星辰&与海4 天前
报错 watcgdog: BUG; soft lockup -CPU#0 stuck for 26s! [swapper/0:1]
bug
无人等人5 天前
CyberRT(apollo) 定时器模块简述及bug分析
bug
fengdongnan5 天前
bug小记
bug
天才测试猿5 天前
解决Selenium元素拖拽不生效Bug
linux·自动化测试·软件测试·python·selenium·测试工具·bug