当前位置: 首页 > news >正文

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绑定值

问题代码

<a-form-model-item>
    <a-select  v-model="ScoreType" placeholder="请选择"  @select="Change">
	</a-select>
</a-form-model-item>
 data(){
     return{
	    ScoreType: null,
     }
   }

v-model绑定的默认值为null,绑定了placeholder,并未显示默认提示,null值默认为空,顶替了placeholder提示。

更改v-model绑定值为undefined

 data(){
     return{
	    ScoreType: undefined,
     }
   }
2.2 a-select中使用 :valueAPI(三元判断值为null设定为undefined)
<a-form-model-item>
    <a-select  :valse="ScoreType ? ScoreType : undefined" placeholder="请选择"  @select="Change">
	</a-select>
</a-form-model-item>
 data(){
     return{
	    ScoreType: undefined,
     }
   }

3.总结

        在Vue2使用AntDesign的a-select组件时,若要显示默认提示,需注意v-model的初始值。当绑定值设为undefined,placeholder才会显示。使用AntDesign的a-select组件时value属性结合三元运算符处理。

相关文章:

  • 代理IP与反爬技术的博弈
  • 代码优化——基于element-plus封装组件:表单封装
  • 02C#基本结构篇(D4_注释-访问修饰符-标识符-关键字-运算符-流程控制语句)
  • OpenEuler24.x下ZABBIX6/7实战1:zabbix7.2.4安装及zabbix-agent安装
  • 软考 数据通信基础——信道
  • SpringBoot 如何调用 WebService 接口
  • 微服务Sentinel组件:服务保护详解
  • 【Java---数据结构】二叉树(Tree)
  • TypeScript变量声明详解:与JavaScript的对比与工程化价值
  • ESFJ 代表什么?
  • 基于ragflow中deepdoc对pdf文档的rag系统
  • 火绒终端安全管理系统V2.0--纵深防御体系(分层防御)之内容拦截层
  • Pytorch 转向TFConv过程中的卷积转换
  • 系统架构设计师-第6章 系统配置与性能评价
  • 自然语言处理文本分析:从词袋模型到认知智能的进化之旅
  • Manus 演示案例:谷歌公司运营模拟器游戏体验
  • Java函数式接口四部曲之Consumer
  • 自动化测试脚本语言选择
  • 聊聊Redis
  • 超过 37000 台 VMwareESXi 服务器可能受到持续攻击威胁
  • “复旦源”一源六馆焕新启幕,设立文化发展基金首期1亿元
  • 美国贸易政策|特朗普模式:你想做交易吗?
  • 卿晨璟靓等用服刑经历“引流”,专家:将犯罪问题娱乐化会消解刑罚严肃性
  • “80后”萍乡市安源区区长邱伟,拟任县(区)委书记
  • 流失79载,国宝文物“子弹库帛书”(二、三卷)回归祖国
  • 本周看啥|《歌手》今晚全开麦直播,谁能斩获第一名?