解决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 相关文章推荐
jquery json 实例代码
Dec 02 Javascript
html dom节点操作(获取/修改/添加或删除)
Jan 23 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
Jun 05 Javascript
node.js调用C++开发的模块实例
Jul 03 Javascript
js基于cookie记录来宾姓名的方法
Jul 19 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
Dec 08 Javascript
jQuery 获取select选中值及清除选中状态
Dec 13 Javascript
浅谈JavaScript find 方法不支持IE的问题
Sep 28 Javascript
js实现会跳动的日历效果(完整实例)
Oct 18 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
Apr 28 Javascript
JS添加或删除HTML dom元素的方法实例分析
Mar 05 Javascript
原生JS实现无缝轮播图片
Jun 24 Javascript
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
Memcache 在PHP中的使用技巧
2010/02/08 PHP
php自动给文章加关键词链接的函数代码
2012/11/29 PHP
javascript编程起步(第三课)
2007/02/27 Javascript
网页和浏览器兼容性问题汇总(draft1)
2009/06/01 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
2010/04/01 Javascript
javascript hashtable 修正版 下载
2010/12/30 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
2014/10/10 Javascript
Javascript中For In语句用法实例
2015/05/14 Javascript
jquery实现不包含当前项的选择器实例
2015/06/25 Javascript
js实现数组转换成json
2015/06/26 Javascript
详谈JS中实现种子随机数及作用
2016/07/19 Javascript
AngularJS辅助库browserTrigger用法示例
2016/11/03 Javascript
jsTree使用记录实例
2016/12/01 Javascript
原生js实现手风琴功能(支持横纵向调用)
2017/01/13 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
2017/01/20 Javascript
详解vue-cli开发环境跨域问题解决方案
2017/06/06 Javascript
JS运动特效之任意值添加运动的方法分析
2018/01/24 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
关于Vue项目跨平台运行问题的解决方法
2018/09/18 Javascript
微信小程序实现文字从右向左无限滚动
2020/11/18 Javascript
vue-cli3 取消eslint校验代码的解决办法
2020/01/16 Javascript
全面了解Python的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
python处理Excel xlrd的简单使用
2017/09/12 Python
结合CSS3的布局新特征谈谈常见布局方法
2016/01/22 HTML / CSS
来自世界各地的优质葡萄酒:VineShop24
2018/07/09 全球购物
jurlique茱莉蔻英国官网:澳洲天然护肤品
2018/08/03 全球购物
女士时装鞋:Chinese Laundry
2018/08/29 全球购物
美国在线面料商店:Fashion Fabrics Club
2020/01/31 全球购物
应届生法律求职信
2013/10/22 职场文书
十一酒店活动方案
2014/02/20 职场文书
洗发露广告词
2014/03/14 职场文书
酒店开业庆典主持词
2014/03/21 职场文书
安全生产标语大全
2014/10/06 职场文书
2019安全宣传标语大全
2019/08/14 职场文书
浅谈怎么给Python添加类型标注
2021/06/08 Python
python全面解析接口返回数据
2022/02/12 Python