解决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在网页中实现分隔条功能的代码
Aug 09 Javascript
移动节点的jquery代码
Jan 13 Javascript
JavaScript动态设置div的样式的方法
Dec 26 Javascript
Javascript简写条件语句(推荐)
Jun 12 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
Jun 20 Javascript
node.js中grunt和gulp的区别详解
Jul 17 Javascript
vue-router实现tab标签页(单页面)详解
Oct 17 Javascript
微信小程序下拉框功能的实例代码
Nov 06 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
Feb 21 Javascript
了解javascript中let和var及const关键字的区别
May 24 Javascript
利用JS如何获取form表单数据
Dec 19 Javascript
JS实现页面数据懒加载
Feb 13 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批量上传图片的具体实现方法介绍.
2014/02/26 PHP
各情景下元素宽高的获取实现代码
2011/09/13 Javascript
如何实现移动端浏览器不显示 pc 端的广告
2015/10/15 Javascript
Angular 2应用的8个主要构造块有哪些
2016/10/17 Javascript
AngularJS实现在ng-Options加上index的解决方法
2016/11/03 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
JS匹配日期和时间的正则表达式示例
2017/05/12 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
2018/01/09 Javascript
Nodejs实现多文件夹文件同步
2018/10/17 NodeJs
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
2019/05/14 jQuery
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
这样回答继承可能面试官更满意
2019/12/10 Javascript
JS实现简单移动端鼠标拖拽
2020/07/23 Javascript
Python日期操作学习笔记
2008/10/07 Python
python实现随机密码字典生成器示例
2014/04/09 Python
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
Python如何获取Win7,Win10系统缩放大小
2020/01/10 Python
python常量折叠基础知识点讲解
2021/02/28 Python
浅析border-radius如何兼容IE
2016/04/19 HTML / CSS
经理管理专业自荐信范文
2013/12/31 职场文书
西式婚礼证婚词
2014/01/12 职场文书
美容院营销方案
2014/03/05 职场文书
五一活动标语
2014/06/30 职场文书
倡议书的写法
2014/08/30 职场文书
关于九一八事变的演讲稿2014
2014/09/17 职场文书
2014年光棍节活动策划方案(创意集锦)
2014/09/29 职场文书
停车场管理协议书范本
2014/10/08 职场文书
玩手机检讨书1000字
2014/10/20 职场文书
新郎结婚保证书
2015/02/26 职场文书
2015年毕业生自荐信范文
2015/03/24 职场文书
2015暑期社会实践通讯稿
2015/07/18 职场文书
工作会议简报
2015/07/20 职场文书
信息技术课教学反思
2016/02/23 职场文书
Vue项目中如何封装axios(统一管理http请求)
2021/05/02 Vue.js
Nginx 安装SSL证书完成HTTPS部署
2022/04/28 Servers
java中如何截取字符串最后一位
2022/07/07 Java/Android