解决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 相关文章推荐
新闻内页-JS分页
Jun 07 Javascript
jquery获取焦点和失去焦点事件代码
Apr 21 Javascript
JavaScript制作windows经典扫雷小游戏
Mar 31 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
Jun 20 Javascript
几种tab切换详解
Feb 03 Javascript
js实现二级导航功能
Mar 03 Javascript
js实现图片放大并跟随鼠标移动特效
Jan 18 Javascript
微信小程序获取用户信息并保存登录状态详解
May 10 Javascript
el-select数据过多懒加载的解决(loadmore)
May 29 Javascript
JavaScript获取当前url路径过程解析
Dec 27 Javascript
原理深度解析Vue的响应式更新比React快
Apr 04 Javascript
在Vue中使用Echarts实例图的方法实例
Oct 10 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的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
深入Apache与Nginx的优缺点比较详解
2013/06/17 PHP
php集成套件服务器xampp安装使用教程(适合第一次玩PHP的新手)
2015/06/03 PHP
PHP实现的QQ空间g_tk加密算法
2015/07/09 PHP
PHP房贷计算器实例代码,等额本息,等额本金
2017/04/01 PHP
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
2010/01/15 Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
2012/12/17 Javascript
javascript中的原型链深入理解
2014/02/24 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
2014/10/17 Javascript
javascript Slip.js实现整屏滑动的手机网页
2015/11/25 Javascript
JS实现的仿淘宝交易倒计时效果
2015/11/27 Javascript
mvc中form表单提交的三种方式(推荐)
2016/08/10 Javascript
three.js实现围绕某物体旋转
2017/01/25 Javascript
解决vue处理axios post请求传参的问题
2018/03/05 Javascript
Vue 使用中的小技巧
2018/04/26 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
2018/09/04 Javascript
Angular ElementRef简介及其使用
2018/10/01 Javascript
浅析Python中的join()方法的使用
2015/05/19 Python
Python使用matplotlib绘制动画的方法
2015/05/20 Python
Python探索之Metaclass初步了解
2017/10/28 Python
python 文件转成16进制数组的实例
2018/07/09 Python
树莓派实现移动拍照
2019/06/22 Python
如何使用python切换hosts文件
2020/04/29 Python
Python中免验证跳转到内容页的实例代码
2020/10/23 Python
如何使用Python进行PDF图片识别OCR
2021/01/22 Python
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
Theflamel意大利:女士奢华服装、鞋子和配件
2020/01/11 全球购物
C++:局部变量能否和全局变量重名
2014/03/03 面试题
Java面试题:Java类的Main方法如果是Private将会怎么样
2016/08/18 面试题
资产经营总监岗位职责
2013/12/04 职场文书
元宵节晚会主持人串词
2014/03/25 职场文书
2015年小学辅导员工作总结
2015/05/27 职场文书
军事博物馆观后感
2015/06/05 职场文书
公司行政管理制度范本
2015/08/05 职场文书
三八节祝酒词
2015/08/11 职场文书
导游词之沈阳植物园
2019/11/30 职场文书