解决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 相关文章推荐
学习ExtJS form布局
Oct 08 Javascript
JQuery UI的拖拽功能实现方法小结
Mar 14 Javascript
js动态改变select选择变更option的index值示例
Jul 10 Javascript
javascript伸缩菜单栏实现代码分享
Nov 12 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
Jun 08 Javascript
JavaScript_object基础入门(必看篇)
Jun 13 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
Aug 05 Javascript
快速解决js开发下拉框中blur与click冲突
Oct 10 Javascript
Bootstrap企业网站实战项目4
Oct 14 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
May 13 Javascript
详解js静态检查工具eslint配置文件
Nov 23 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
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实现获取FLV文件的时间
2015/02/10 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
AutoSave/自动存储功能实现
2007/03/24 Javascript
js 字符串操作函数
2009/07/25 Javascript
解析jquery获取父窗口的元素
2013/06/26 Javascript
JavaScript 语言基础知识点总结(思维导图)
2013/11/10 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
2014/01/08 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
2014/07/31 Javascript
详解javascript遍历方式
2015/11/11 Javascript
Knockoutjs 学习系列(二)花式捆绑
2016/06/07 Javascript
bootstrap laydate日期组件使用详解
2017/01/04 Javascript
微信小程序 图片上传实例详解
2017/05/05 Javascript
Angular.js自动化测试之protractor详解
2017/07/07 Javascript
Vuex的初探与实战小结
2018/11/26 Javascript
JavaScript代码调试方法实例小结
2019/01/05 Javascript
微信小程序实现购物页面左右联动
2019/02/15 Javascript
layui点击数据表格添加或删除一行的例子
2019/09/12 Javascript
在vue中阻止浏览器后退的实例
2019/11/06 Javascript
redux处理异步action解决方案
2020/03/22 Javascript
Python编程实现使用线性回归预测数据
2017/12/07 Python
python 自动去除空行的实例
2018/07/24 Python
Django 对IP访问频率进行限制的例子
2019/08/30 Python
Django使用消息提示简单的弹出个对话框实例
2019/11/15 Python
python 检查数据中是否有缺失值,删除缺失值的方式
2019/12/02 Python
Python如何实现小程序 无限求和平均
2020/02/18 Python
彪马法国官网:PUMA法国
2019/12/15 全球购物
英国在线滑雪板和冲浪商店:The Board Basement
2020/01/11 全球购物
事业单位个人应聘自荐信
2013/09/21 职场文书
简历里的自我评价
2014/01/31 职场文书
法人代表授权委托书
2014/04/08 职场文书
保护母亲河倡议书
2014/04/14 职场文书
阳光体育活动实施方案
2014/05/25 职场文书
模具设计与制造专业自荐书
2014/07/01 职场文书
教师远程研修感悟
2015/11/18 职场文书
2016国庆节67周年寄语
2015/12/07 职场文书
《唯一的听众》教学反思
2016/02/18 职场文书