解决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里使用Dom操作Xml
Sep 20 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
Mar 06 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
Dec 14 Javascript
javascript实用方法总结
Feb 06 Javascript
bootstrap警告框使用方法解析
Jan 13 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
Nov 20 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
May 01 Javascript
bootstrap table实现横向合并与纵向合并
Jul 18 Javascript
js实现上传图片并显示图片名称
Dec 18 Javascript
javascript中的相等操作符(==与===区别)
Dec 21 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
Feb 12 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
Jul 22 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模拟SQL Server的两个日期处理函数
2006/10/09 PHP
PHP的ASP防火墙
2006/10/09 PHP
使用Linux五年积累的一些经验技巧
2013/06/20 PHP
php中用socket模拟http中post或者get提交数据的示例代码
2013/08/08 PHP
ThinkPHP后台首页index使用frameset时的注意事项分析
2014/08/22 PHP
Laravel日志用法详解
2016/10/09 PHP
详解php curl带有csrf-token验证模拟提交方法
2018/04/18 PHP
javascript数组使用调用方法汇总
2007/12/08 Javascript
checkbox 复选框不能为空
2009/07/11 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
2014/01/02 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
2014/05/05 Javascript
JavaScript及jquey实现多个数组的合并操作
2014/09/06 Javascript
Lab.js初次使用笔记
2015/02/28 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
2015/11/06 Javascript
java必学必会之static关键字
2015/12/03 Javascript
Node.js的基本知识简单汇总
2016/09/19 Javascript
Vue+abp微信扫码登录的实现代码示例
2020/01/06 Javascript
[01:11]steam端dota2实名认证操作流程视频
2021/03/11 DOTA
Python爬虫代理IP池实现方法
2017/01/05 Python
python导入csv文件出现SyntaxError问题分析
2017/12/15 Python
Python正则表达式指南 推荐
2018/10/09 Python
python使用for...else跳出双层嵌套循环的方法实例
2020/05/17 Python
python获取系统内存占用信息的实例方法
2020/07/17 Python
python实现图片,视频人脸识别(opencv版)
2020/11/18 Python
Python爬虫中Selenium实现文件上传
2020/12/04 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
Sephora丝芙兰马来西亚官方网站:国际化妆品购物
2018/03/15 全球购物
中间件的定义
2016/08/09 面试题
数控专业个人求职信范例
2013/11/29 职场文书
英语商务邀请函范文
2014/01/16 职场文书
手工社团活动方案
2014/02/17 职场文书
十八届三中全会报告学习材料
2014/02/17 职场文书
餐饮周年庆活动方案
2014/08/14 职场文书
浅谈Golang 嵌套 interface 的赋值问题
2021/04/29 Golang
golang 实现并发求和
2021/05/08 Golang
CSS的class与id常用的命名规则
2021/05/18 HTML / CSS