解决antd 下拉框 input [defaultValue] 的值的问题


Posted in Javascript onOctober 31, 2020

项目中有下拉框跟input需要回显,所以用到defaultValue这个默认值,在后台调接口调到defaultValue这个值给select设置,但是不好使 解决方法

解决antd 下拉框 input [defaultValue] 的值的问题

直接用value 先加载选中的条目再加载默认值 初始的时候选中调模是空所以就会加载默认值 这样就解决了 但是在选择下拉的时候 要给scoreFrom值

解决antd 下拉框 input [defaultValue] 的值的问题

补充知识:antd Form组件行并列显示 Form表单属性为inline时,表单组件宽度问题

formLayout 不起作用

Form标签 layout属性设置为'inline' 时 下拉组件宽度没有自适应:

// 方法1:用Row + Col 定义自己需要的宽度,把layout属性设置为'horizontal',
 const formLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
     }
 ---------------------------------------------------------    
 <Form layout="horizontal" {...formLayout }>
  <Row>
  <Col span={6}>
   <Form.Item label="xxx">
   <Select>
    ....
   </Select>
   </Form.Item>
  </Col>
  <Col span={6}>
   <Form.Item label="xxx">
    <Select>
    ....
    </Select>
   </Form.Item>
  </Col>
      </Row>
 </Form>
 
 //方法2 给 Form.Item 手动设置宽度
 <Form layout="inline" {...formLayout }>
   <Form.Item label="xxx" style={{width:'25%'}}> //百分比
   <Select>
    ....
   </Select>
   </Form.Item>
   <Form.Item label="xxx" style={{width:'200px'}}>// 固定宽度
    <Select>
    ....
    </Select>
   </Form.Item>
 </Form>

以上这篇解决antd 下拉框 input [defaultValue] 的值的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
Mar 04 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
Jul 04 Javascript
分享一个自己写的简单的javascript分页组件
Feb 15 Javascript
前端设计师们最常用的JS代码汇总
Sep 25 Javascript
Ajax和Comet技术总结
Feb 19 Javascript
jQuery实现一个简单的轮播图
Feb 19 Javascript
详解vue表单验证组件 v-verify-plugin
Apr 19 Javascript
基于原生js运动方式关键点的总结(推荐)
Oct 01 Javascript
关于Vue单页面骨架屏实践记录
Dec 13 Javascript
详解Vue路由自动注入实践
Apr 17 Javascript
es6数组的flat(),flatMap()函数用法实例分析
Apr 18 Javascript
vue使用echarts实现折线图
Mar 21 Vue.js
Vue使用CDN引用项目组件,减少项目体积的步骤
Oct 30 #Javascript
vue+swiper实现左右滑动的测试题功能
Oct 30 #Javascript
利用vue3+ts实现管理后台(增删改查)
Oct 30 #Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
Oct 30 #Javascript
解决vue侦听器watch,调用this时出现undefined的问题
Oct 30 #Javascript
vue2.0 watch里面的 deep和immediate用法说明
Oct 30 #Javascript
JavaScript实现轮播图效果
Oct 30 #Javascript
You might like
php数组总结篇(一)
2008/09/30 PHP
PHP用SAX解析XML的实现代码与问题分析
2011/08/22 PHP
浅析is_writable的php实现
2013/06/18 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
yii框架redis结合php实现秒杀效果(实例代码)
2017/10/26 PHP
PHP让网站移动访问更加友好方法
2019/02/14 PHP
基于JQuery的类似新浪微博展示信息效果的代码
2012/07/23 Javascript
JS+JSP checkBox 全选具体实现
2014/01/02 Javascript
深入解析JavaScript的闭包机制
2015/10/20 Javascript
jQuery实现图片预加载效果
2015/11/27 Javascript
详解JavaScript基于面向对象之继承实例
2015/12/16 Javascript
js如何改变文章的字体大小
2016/01/08 Javascript
js删除Array数组中指定元素的两种方法
2016/08/03 Javascript
vue axios用法教程详解
2017/07/23 Javascript
EasyUI实现下拉框多选功能
2017/11/07 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
react koa rematch 如何打造一套服务端渲染架子
2019/06/26 Javascript
koa2+vue实现登陆及登录状态判断
2019/08/15 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
2019/09/26 Javascript
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
[48:02]Ti4循环赛第三日 VG vs Liquid和NEWBEE vs DK
2014/07/12 DOTA
[02:51]DOTA2 2015国际邀请赛中国区预选赛第一日战报
2015/05/27 DOTA
Python实现的批量下载RFC文档
2015/03/10 Python
Python实现截屏的函数
2015/07/26 Python
Python中规范定义命名空间的一些建议
2016/06/04 Python
在Python 中实现图片加框和加字的方法
2019/01/26 Python
使用python3批量下载rbsp数据的示例代码
2019/12/20 Python
pytorch动态网络以及权重共享实例
2020/01/06 Python
Python操作word文档插入图片和表格的实例演示
2020/10/25 Python
python两种获取剪贴板内容的方法
2020/11/06 Python
会计实习生工作总结的自我评价
2013/10/07 职场文书
信息技术毕业生自荐信范文
2014/03/13 职场文书
导游个人求职信范文
2014/03/23 职场文书
单位综合评价意见
2015/06/05 职场文书
2016年寒假社会实践活动心得体会
2015/10/09 职场文书
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL