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

相关推荐
我星期八休息2 天前
软件测试—从认识到BUG
考研·安全·bug
hulihutu443 天前
拒绝延期、bug、货不对板:2026 管理系统定制开发落地保障手册
github·bug·鸿蒙系统·数据库管理员
Rain5093 天前
谁动了我的 URL?——记一次微前端“灵异 Bug“的排查实录
前端·vue.js·人工智能·前端框架·bug·ai编程
百变梦仔3 天前
Codex 处理接口异常类 bug 时,我会让调试 Skill 先接住错误信息
bug
深念Y5 天前
fnOS-k3s-ResolvConf权限700-Bug分析
内核·bug·nas·k3s·fnos·魔改内核
不正经学生5 天前
C语言预处理详解:编译器真正动手之前的那些事
c语言·开发语言·算法·面试·bug
Capricorn19886 天前
Bug排障实录:Software 3.0 遭遇文献幻觉?知芽 Notebook Skill 底层架构解析
人工智能·笔记·架构·bug·论文笔记
项目管理与代码6 天前
Bug跟踪管理系统对比:从提报效率、流转体验与数据分析能力三个维度评估
bug·项目管理·bug跟踪
福大大架构师每日一题8 天前
RAGFlow v0.27.1 发布:新增 Azure DevOps、You.com 搜索,修复海量 Bug,性能大幅提升!
bug·azure·devops
树码小子8 天前
测试(6) - bug篇(上)
软件测试·bug