脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → antd 下拉框input defaultValue

解决antd 下拉框 input [defaultValue] 的值的问题

 更新时间：2020年10月31日 09:11:15   作者：冉冉升起的富豪  
这篇文章主要介绍了解决antd 下拉框 input [defaultValue] 的值的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

项目中有下拉框跟input需要回显，所以用到defaultValue这个默认值，在后台调接口调到defaultValue这个值给select设置，但是不好使 解决方法

直接用value 先加载选中的条目再加载默认值 初始的时候选中调模是空所以就会加载默认值 这样就解决了 但是在选择下拉的时候 要给scoreFrom值

补充知识：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] 的值的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • vue刷新子组件、重置组件以及重新加载子组件项目实战记录

    vue刷新子组件、重置组件以及重新加载子组件项目实战记录

    在vue开发中出于各种目的,我们常常需要让组件重新加载渲染,这篇文章主要给大家介绍了关于vue刷新子组件、重置组件以及重新加载子组件的相关资料,需要的朋友可以参考下
    2023-12-12
  • vue+springboot+element+vue-resource实现文件上传教程

    vue+springboot+element+vue-resource实现文件上传教程

    这篇文章主要介绍了vue+springboot+element+vue-resource实现文件上传教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • 实现一个VUE响应式属性装饰器详析

    实现一个VUE响应式属性装饰器详析

    这篇文章主要介绍了实现一个VUE响应式属性装饰器详析，文章通过围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
    2022-09-09
  • Vue3为什么这么快

    Vue3为什么这么快

    这篇文章主要介绍了Vue3为什么这么快,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • vue axios封装及API统一管理的方法

    vue axios封装及API统一管理的方法

    这篇文章主要介绍了vue axios封装以及API统一管理 ,需要的朋友可以参考下
    2019-04-04
  • Vue3.2 setup语法糖及Hook函数基本使用

    Vue3.2 setup语法糖及Hook函数基本使用

    这篇文章主要为大家介绍了Vue3.2 setup语法糖及Hook函数基本使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-07-07
  • 解决vue elementUI中table里数字、字母、中文混合排序问题

    解决vue elementUI中table里数字、字母、中文混合排序问题

    这篇文章主要介绍了vue elementUI中table里数字、字母、中文混合排序问题,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-01-01
  • vue3中的对象时为proxy对象如何获取值(两种方式)

    vue3中的对象时为proxy对象如何获取值(两种方式)

    使用vue3.0时，因为底层是使用proxy进行代理的所以当我们打印一些值得时候是proxy代理之后的是Proxy<BR>对象，Proxy对象里边的[[Target]]才是真实的对象，那么如何获取这个值呢，下面下面给大家介绍两种方式，感兴趣的朋友一起看看吧
    2023-01-01
  • vue如何使用文件流进行下载(new Blob)

    vue如何使用文件流进行下载(new Blob)

    这篇文章主要介绍了vue如何使用文件流进行下载(new Blob)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • Vue-element-admin平台侧边栏收缩控制问题

    Vue-element-admin平台侧边栏收缩控制问题

    这篇文章主要介绍了Vue-element-admin平台侧边栏收缩控制问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-10-10

最新评论