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

相关推荐
gxn_mmf8 小时前
典籍知识问答重新生成和消息修改Bug修改
前端·bug
千里马学框架1 天前
重学安卓14/15自由窗口freeform企业实战bug-学员作业
android·framework·bug·systrace·安卓framework开发·安卓窗口系统·自由窗口
Bear on Toilet2 天前
Bug日记——实现“日期类”
开发语言·c++·bug
Direction_Wind2 天前
flinksql bug : Max aggregate function does not support type: CHAR
bug
mg6683 天前
Python Bug 修复案例分析:多线程数据竞争引发的bug 两种修复方法
bug
黎猫大侠4 天前
一次Android Fragment内存泄露的bug解决记录|Fragment not attach to an Activity
android·bug
七七小报4 天前
uniapp-商城-48-后台 分类数据添加修改弹窗bug
uni-app·bug
windwind20004 天前
发行基础:本地化BUG导致审核失败
游戏·青少年编程·编辑器·bug·创业创新·玩游戏
Htht1114 天前
【Qt】之【Bug】点击按钮(ui->pushButton)触发非本类设置的槽函数
qt·ui·bug
gxn_mmf5 天前
典籍知识问答模块AI问答功能feedbackBug修改+添加对话名称修改功能
前端·后端·bug