解决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 ready()的几种实现方法小结
Jun 18 Javascript
Jquery刷新页面背景图片随机变换的实现方法
Mar 15 Javascript
jQuery setTimeout()函数使用方法
Apr 07 Javascript
javascript计时器事件使用详解
Jan 07 Javascript
jquery实现的Accordion折叠面板效果代码
Sep 02 Javascript
jQuery模仿单选按钮选中效果
Jun 24 Javascript
JavaScript装饰器函数(Decorator)实例详解
Mar 30 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
Aug 12 Javascript
浅谈JS中的反柯里化( uncurrying)
Aug 17 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
Jan 08 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
Nov 18 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 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 目录与文件处理-郑阿奇(续)
2011/07/04 PHP
不支持fsockopen但支持culr环境下下ucenter与modoer通讯问题
2011/08/12 PHP
php实现多张图片上传加水印技巧
2013/04/18 PHP
分享一个超好用的php header下载函数
2014/01/31 PHP
PHP的Yii框架中YiiBase入口类的扩展写法示例
2016/03/17 PHP
PHP常见的6个错误提示及解决方法
2016/07/07 PHP
PHP切割整数工具类似微信红包金额分配的思路详解
2019/09/18 PHP
使用Modello编写JavaScript类
2006/12/22 Javascript
读jQuery之一(对象的组成)
2011/06/11 Javascript
JavaScript简介
2015/02/15 Javascript
基于jquery实现左右按钮点击的图片切换效果
2021/01/27 Javascript
关于JavaScript限制字数的输入框的那些事
2016/08/14 Javascript
快速入门Vue
2016/12/19 Javascript
vue.js实现请求数据的方法示例
2017/02/07 Javascript
基于vue的换肤功能的示例代码
2017/10/10 Javascript
微信小程序发送短信验证码完整实例
2019/01/07 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
2019/04/10 Javascript
Vue Element UI + OSS实现上传文件功能
2019/07/31 Javascript
在vue中使用jsx语法的使用方法
2019/09/30 Javascript
Nodejs环境实现socket通信过程解析
2020/07/03 NodeJs
详解vue之自行实现派发与广播(dispatch与broadcast)
2021/01/19 Vue.js
[46:40]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
用实例详解Python中的Django框架中prefetch_related()函数对数据库查询的优化
2015/04/01 Python
unittest+coverage单元测试代码覆盖操作实例详解
2018/04/04 Python
使用Python对微信好友进行数据分析
2018/06/27 Python
Python爬虫爬取煎蛋网图片代码实例
2019/12/16 Python
利用 PyCharm 实现本地代码和远端的实时同步功能
2020/03/23 Python
python属于跨平台语言码
2020/06/09 Python
在Mac中配置Python虚拟环境过程解析
2020/06/22 Python
CSS实现聊天气泡效果
2020/04/26 HTML / CSS
戴森英国官网:Dyson英国
2019/05/07 全球购物
AJAX应用和传统Web应用有什么不同
2013/08/24 面试题
卫校毕业生自我鉴定
2014/09/28 职场文书
工作后的感想
2015/08/07 职场文书
如何在CocosCreator里画个炫酷的雷达图
2021/04/16 Javascript
Python中os模块的简单使用及重命名操作
2021/04/17 Python