解决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中常见陷阱小结
Apr 27 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
Apr 04 Javascript
jQuery-Tools-overlay 使用介绍
Jul 14 Javascript
深入理解javascript的执行顺序
Apr 04 Javascript
JavaScript数据类型之基本类型和引用类型的值
Apr 01 Javascript
浅析javascript中的事件代理
Nov 06 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
Oct 12 Javascript
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
angular项目中bootstrap-datetimepicker时间插件的使用示例
Mar 15 Javascript
vue+element的表格实现批量删除功能示例代码
Aug 17 Javascript
Node.js中package.json中库的版本号(~和^)
Apr 02 Javascript
解决vue组件中click事件失效的问题
Nov 09 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新手上路(九)
2006/10/09 PHP
PHP 简单数组排序实现代码
2009/08/05 PHP
将word转化为swf 如同百度文库般阅读实现思路及代码
2013/08/09 PHP
php获取新浪微博数据API实例
2013/11/12 PHP
php限制ip地址范围的方法
2015/03/31 PHP
phalcon框架使用指南
2016/02/23 PHP
jq选项卡鼠标延迟的插件实例
2013/05/13 Javascript
jquery div拖动效果示例代码
2013/12/08 Javascript
jQuery判断复选框是否勾选的原理及示例
2014/05/21 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
JavaScript实现DOM对象选择器
2016/09/24 Javascript
canvas轨迹回放功能实现
2017/12/20 Javascript
动态Axios的配置步骤详解
2018/01/12 Javascript
小程序外卖订单界面的示例代码
2019/12/30 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
2020/10/26 Javascript
[01:34]DAC2018主赛事第四日五佳镜头 Gh巨牙海民助Miracle-死里逃生
2018/04/07 DOTA
Python文件和目录操作详解
2015/02/08 Python
黑科技 Python脚本帮你找出微信上删除你好友的人
2016/01/07 Python
python爬虫入门教程--HTML文本的解析库BeautifulSoup(四)
2017/05/25 Python
浅谈python内置变量-reversed(seq)
2017/06/21 Python
Tensorflow 自带可视化Tensorboard使用方法(附项目代码)
2018/02/10 Python
对pandas中apply函数的用法详解
2018/04/10 Python
详解Python网络框架Django和Scrapy安装指南
2019/04/01 Python
python 比较字典value的最大值的几种方法
2020/04/17 Python
使用keras框架cnn+ctc_loss识别不定长字符图片操作
2020/06/29 Python
美国领先的个性化礼品商城:Personalization Mall
2019/07/27 全球购物
Wedgwood英国官方网站:英式精致骨瓷餐具、礼品与生活精品,源于1759年
2019/09/02 全球购物
怎么可以提高数据库查询数据的速度
2014/06/28 面试题
物流管理应届生求职信
2013/11/07 职场文书
校园报刊亭的创业计划书
2014/01/02 职场文书
大二自我鉴定
2014/01/31 职场文书
金融与证券专业求职信
2014/06/22 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
房产公证书样本
2015/01/23 职场文书
2015学校图书管理员工作总结
2015/05/11 职场文书
Pyhton模块和包相关知识总结
2021/05/12 Python