解决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的Function详细
Nov 14 Javascript
ext读取两种结构的xml的代码
Nov 05 Javascript
javascript 二维数组的实现与应用
Mar 16 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
Apr 18 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
Jan 08 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
May 05 Javascript
jQuery插件uploadify实现ajax效果的图片上传
Jun 18 Javascript
javascript 中的继承实例详解
May 05 Javascript
使用 Node.js 对文本内容分词和关键词抽取
May 27 Javascript
vue+elementUI组件table实现前端分页功能
Nov 15 Javascript
在Vue中使用Select选择器拼接label的操作
Oct 22 Javascript
JavaScript对象访问器Getter及Setter原理解析
Dec 08 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生成二维码的两种方法(带logo图像)
2014/03/14 PHP
JavaScript语法着色引擎(demo及打包文件下载)
2007/06/13 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
2014/01/11 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
2015/05/09 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
2015/06/19 Javascript
详解JavaScript ES6中的Generator
2015/07/28 Javascript
JS实现1000以内被3或5整除的数字之和
2016/02/18 Javascript
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
纯js实现手风琴效果代码
2020/04/17 Javascript
BootStrap Tooltip插件源码解析
2016/12/27 Javascript
JS中如何实现点击a标签返回页面顶部的问题
2017/01/19 Javascript
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
vue.js选中动态绑定的radio的指定项
2017/06/02 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
2017/07/17 jQuery
小程序实现自定义导航栏适配完美版
2019/04/02 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
2019/11/14 Javascript
JS中多层次排序算法的实现代码
2021/01/06 Javascript
netbeans7安装python插件的方法图解
2013/12/24 Python
讲解Python中的标识运算符
2015/05/14 Python
Win10下Python3.7.3安装教程图解
2019/07/08 Python
Python实现语音识别和语音合成功能
2019/09/20 Python
Python列表切片常用操作实例解析
2019/12/16 Python
Django如何使用redis作为缓存
2020/05/21 Python
python基于爬虫+django,打造个性化API接口
2021/01/21 Python
CSS3实现3D翻书效果
2016/06/20 HTML / CSS
营业员个人总结的自我评价
2013/10/25 职场文书
信息与计算科学专业推荐信
2014/02/23 职场文书
乡镇纠风工作实施方案
2014/03/22 职场文书
经贸专业毕业生求职信
2014/03/23 职场文书
联谊会主持词
2014/03/26 职场文书
中文专业求职信
2014/06/20 职场文书
学习教师敬业奉献模范事迹材料思想汇报
2014/09/19 职场文书
生产设备维护保养制度
2015/08/06 职场文书
工作感想范文
2015/08/07 职场文书
mysql数据插入覆盖和时间戳的问题及解决
2022/03/25 MySQL