解决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 相关文章推荐
Javascript 实现TreeView CheckBox全选效果
Jan 11 Javascript
javascript 当前日期转化为中文的实现代码
May 13 Javascript
基于jquery的跟随屏幕滚动代码
Jul 24 Javascript
JS OffsetParent属性深入解析
Jan 13 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
Jan 28 Javascript
45个JavaScript编程注意事项、技巧大全
Feb 11 Javascript
JavaScript正则表达式匹配 div  style标签
Mar 15 Javascript
微信小程序实现轮播图效果
Sep 07 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
Aug 30 Javascript
webpack4打包vue前端多页面项目
Sep 17 Javascript
VUE 自定义组件模板的方法详解
Aug 30 Javascript
JavaScript实现模态对话框实例
Jan 13 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
推荐几部必看的DC动画电影
2020/03/03 欧美动漫
递归列出所有文件和目录
2006/10/09 PHP
php实现转换html格式为文本格式的方法
2016/05/16 PHP
php自定义函数实现统计中文字符串长度的方法小结
2017/04/15 PHP
php获取数据库结果集方法(推荐)
2017/06/01 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
JavaScript 异步调用框架 (Part 3 - 代码实现)
2009/08/04 Javascript
javascript弹出页面回传值的方法
2015/01/28 Javascript
javascript适合移动端的日期时间拾取器
2015/11/10 Javascript
node.js cookie-parser之parser.js
2016/06/06 Javascript
JavaScript中Array的实用操作技巧分享
2016/09/11 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
Vue页面骨架屏注入方法
2018/05/13 Javascript
jquery中为什么能用$操作
2019/06/18 jQuery
layui动态绑定事件的方法
2019/09/20 Javascript
layui table复选框禁止某几条勾选的实例
2019/09/20 Javascript
vue + el-form 实现的多层循环表单验证
2020/11/25 Vue.js
vue实现购物车的小练习
2020/12/21 Vue.js
python3下使用cv2.imwrite存储带有中文路径图片的方法
2018/05/10 Python
Python之lambda匿名函数及map和filter的用法
2019/03/05 Python
python pandas时序处理相关功能详解
2019/07/03 Python
python协程gevent案例 爬取斗鱼图片过程解析
2019/08/27 Python
wxpython绘制圆角窗体
2019/11/18 Python
Pytorch 中retain_graph的用法详解
2020/01/07 Python
Python 识别12306图片验证码物品的实现示例
2020/01/20 Python
python使用梯度下降算法实现一个多线性回归
2020/03/24 Python
深入了解Python 方法之类方法 &amp; 静态方法
2020/08/17 Python
纯CSS3实现圆角效果(含IE兼容解决方法)
2014/05/07 HTML / CSS
CSS3 transition 实现通知消息轮播条
2020/10/14 HTML / CSS
玉兰油美国官网:OLAY美国
2018/10/25 全球购物
C语言面试题
2013/05/19 面试题
大学自我鉴定
2013/12/20 职场文书
大学生求职自我评价
2014/01/16 职场文书
领导班子“四风问题”“整改方案
2014/10/02 职场文书
电子商务实训报告总结
2014/11/05 职场文书
2014离婚协议书范文(3篇)
2014/11/29 职场文书