当前位置: 首页 > 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属性结合三元运算符处理。

http://www.dtcms.com/a/61158.html

相关文章:

  • 代理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 服务器可能受到持续攻击威胁
  • 2.深度学习与大模型-矩阵
  • V8引擎中的垃圾回收机制如何工作?
  • 从能耗监测到碳资产管理:智慧校园能源管理平台的迭代升级与实践启示
  • std::ranges::views::take, take_while,std::ranges::take_view,take_while_view
  • SVT-AV1源码分析build_intra_predictors函数
  • 开源安全测试工具 | 网络安全工具列表
  • 蓝桥与力扣刷题(441 排列硬币)
  • 【Hadoop】
  • sublime text 中添加copilot
  • 【spring】配置类和整合Junit