解决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 Ajax 全解析
Feb 08 Javascript
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
Oct 26 Javascript
js 如何实现对数据库的增删改查
Nov 23 Javascript
JS编程小常识很有用
Nov 26 Javascript
js实现点小图看大图效果的思路及示例代码
Oct 28 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
Jan 19 Javascript
Bootstrap CDN和本地化环境搭建
Oct 26 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
Dec 12 Javascript
Vue2.0点击切换类名改变样式的方法
Aug 22 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
Nov 19 Javascript
详解webpack-dev-middleware 源码解读
Mar 23 Javascript
解决vue+router路由跳转不起作用的一项原因
Jul 19 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
php实现将数组转换为XML的方法
2015/03/09 PHP
Zend Framework教程之视图组件Zend_View用法详解
2016/03/05 PHP
php中的异常和错误浅析
2017/05/03 PHP
CI框架(CodeIgniter)公共模型类定义与用法示例
2017/08/10 PHP
PHP实现的回溯算法示例
2017/08/15 PHP
关于php unset对json_encode的影响详解
2018/11/14 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
js 链式延迟执行DOME
2012/01/04 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
2015/09/17 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
2016/02/14 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
2016/06/24 Javascript
JavaScript登录记住密码操作(超简单代码)
2017/03/22 Javascript
laydate日历控件使用方法详解
2017/11/20 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
2019/01/29 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
2019/06/03 Javascript
JavaScript实现拖拽效果
2020/03/16 Javascript
[01:37]DOTA2超级联赛专访ChuaN 传奇般的电竞之路
2013/06/19 DOTA
Python两个整数相除得到浮点数值的方法
2015/03/18 Python
django+js+ajax实现刷新页面的方法
2017/05/22 Python
python读写LMDB文件的方法
2018/07/02 Python
python实现可变变量名方法详解
2019/07/01 Python
python3爬取torrent种子链接实例
2020/01/16 Python
浅谈pandas.cut与pandas.qcut的使用方法及区别
2020/03/03 Python
Python利用Xpath选择器爬取京东网商品信息
2020/06/01 Python
python 元组的使用方法
2020/06/09 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
什么是Assembly(程序集)
2014/09/14 面试题
好的自荐信包括什么内容
2013/11/07 职场文书
法人委托书的范本格式
2014/09/11 职场文书
2015年电信员工工作总结
2015/05/26 职场文书
退休教师欢送会致辞
2015/07/31 职场文书
经典爱情感言
2015/08/03 职场文书
中学生运动会广播稿
2015/08/19 职场文书
小学英语听课心得体会
2016/01/14 职场文书
Spring Data JPA使用JPQL与原生SQL进行查询的操作
2021/06/15 Java/Android