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

相关推荐
凌晨一点的秃头猪11 小时前
Python 常见 bug 总结和异常处理
开发语言·python·bug
TTGGGFF2 天前
报错解决:IEEE latex模版中thanks不显示 隶属关系 / 邮箱不显示
bug
李趣趣2 天前
数据库字段类型bit容易被忽视的bug
c#·bug
kitsch0x973 天前
论文学习_One Bug, Hundreds Behind: LLMs for Large-Scale Bug Discovery
学习·bug
Brianna Home5 天前
从零到一:用Godot打造2D游戏《丛林探险》
算法·游戏·性能优化·游戏引擎·bug·godot·动画
AI云原生6 天前
云原生系列Bug修复:Docker镜像无法启动的终极解决方案与排查思路
运维·服务器·python·docker·云原生·容器·bug
东巴图7 天前
分解如何利用c++修复小程序的BUG
开发语言·c++·bug
workflower9 天前
Fundamentals of Architectural Styles and patterns
开发语言·算法·django·bug·结对编程
lvchaoq10 天前
记录小程序真机bug,而模拟器无法复现
小程序·bug