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

相关推荐
chao_78914 小时前
针对“仅某个地区出现Bug”的原因分析与解决方案
测试用例·bug
帅帅哥的兜兜14 小时前
Bug问题
bug
养意14 小时前
git提交代码和解决冲突修复bug
git·bug
东方不败之鸭梨的测试笔记1 天前
20250605车充安服务器受木马攻击导致服务不可用
bug
Htht1111 天前
【Qt】之【Get√】【Bug】通过值捕获(或 const 引用捕获)传进 lambda,会默认复制成 const
数据库·bug
前端发现1 天前
如何用 pnpm patch 给 element-plus 打补丁修复线上 bug(以 2.4.4 修复 PR#15197 为例)
bug
可乐鸡翅好好吃2 天前
通过BUG(prvIdleTask、pxTasksWaitingTerminatio不断跳转问题)了解空闲函数(prvIdleTask)和TCB
c语言·stm32·单片机·嵌入式硬件·bug·keil
神膘护体小月半2 天前
bug 记录 - 使用 el-dialog 的 before-close 的坑
前端·javascript·bug
顽强d石头3 天前
bug:undefined is not iterable (cannot read property Symbol(Symbol.iterator))
前端·bug
阿松のblog3 天前
opencv使用经典bug
人工智能·opencv·bug