解决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 相关文章推荐
Extjs EditorGridPanel中ComboBox列的显示问题
Jul 04 Javascript
防止xss和sql注入:JS特殊字符过滤正则
Apr 18 Javascript
js通过地址栏给action传值(中文乱码全是问号)
May 02 Javascript
javascript常见用法总结
May 22 Javascript
js实例属性和原型属性示例详解
Nov 23 Javascript
jQuery无刷新切换主题皮肤实例讲解
Oct 21 Javascript
js和jquery分别验证单选框、复选框、下拉框
Dec 17 Javascript
BootStrap入门教程(三)之响应式原理
Sep 19 Javascript
JS弹出窗口的运用与技巧大全
Nov 01 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
May 09 Javascript
vue项目打包之后背景样式丢失的解决方案
Jan 17 Javascript
vue+elementUI动态生成面包屑导航教程
Nov 04 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程序员工具
2008/05/26 PHP
PHP 防注入函数(格式化数据)
2011/08/08 PHP
排序算法之PHP版快速排序、冒泡排序
2014/04/09 PHP
仿dedecms下拉分页样式修改的thinkphp分页类实例
2014/10/30 PHP
PHP生成随机数的方法实例分析
2015/01/22 PHP
Linux系统下php获得系统分区信息的方法
2015/03/30 PHP
php微信公众平台开发(一) 配置接口
2016/12/06 PHP
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
PHP预定义超全局数组变量小结
2018/08/20 PHP
Thinkphp集成抖音SDK的实现方法
2020/04/28 PHP
WEB高性能开发之疯狂的HTML压缩
2010/06/19 Javascript
也说JavaScript中String类的replace函数
2011/09/22 Javascript
js相册效果代码(点击创建即可)
2013/04/16 Javascript
JQuery显示隐藏页面元素的方法总结
2015/04/16 Javascript
Javascript中String的常用方法实例分析
2015/06/13 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
2015/12/04 Javascript
干货分享:让你分分钟学会javascript闭包
2015/12/25 Javascript
Javascript中作用域的详细介绍
2016/10/06 Javascript
VUE脚手架的下载和配置步骤详解
2019/04/01 Javascript
解决在Vue中使用axios用form表单出现的问题
2019/10/30 Javascript
原生js生成图片验证码
2020/10/11 Javascript
一篇文章入门Python生态系统(Python新手入门指导)
2015/12/11 Python
Python拼接微信好友头像大图的实现方法
2018/08/01 Python
对python csv模块配置分隔符和引用符详解
2018/12/12 Python
pycharm中使用anaconda部署python环境的方法步骤
2018/12/19 Python
使用NumPy读取MNIST数据的实现代码示例
2019/11/20 Python
django xadmin action兼容自定义model权限教程
2020/03/30 Python
Pandas之read_csv()读取文件跳过报错行的解决
2020/04/21 Python
屈臣氏官方旗舰店:亚洲享负盛名的保健及美妆零售商
2019/03/15 全球购物
navabi英国:设计师大码女装
2019/06/25 全球购物
岗位职责风险防控
2014/02/18 职场文书
店面销售职位的职责
2014/03/09 职场文书
写求职信有哪些注意事项
2014/05/08 职场文书
2016年“9.22”世界无车日活动小结
2016/04/05 职场文书
解决Navicat for MySQL 连接 MySQL 报2005错误的问题
2021/05/29 MySQL
Python if else条件语句形式详解
2022/03/24 Python