位置: IT常识 - 正文

antd中的form表单中的wrapperCol和labelCol问题(antd form table)

编辑:rootadmin
antd中的form表单中的wrapperCol和labelCol问题

推荐整理分享antd中的form表单中的wrapperCol和labelCol问题(antd form table),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:antd formlist,antd form表单,antd4 form表单填值,antd中form表单如何获取值,antd form.create,antd中form表单如何获取值,antd中form表单如何获取值,antd中form表单如何获取值,内容如对您有帮助,希望把文章链接给更多的朋友!

        之前在学这块时候比较模糊 有点不熟 以至于在后来的开发过程中看别人的代码中的xs sm等 以及{span:8}也表示困惑,

        但也不敢问大佬(怕因为太简单而被嘲讽),只能自己去百度去了解,总算是有些眉目,到现在觉得可能有些小伙伴和我当初一样比较困惑,希望这个能对和我一样模糊的小伙伴有帮助,也方便自己随时查看

labelCol:表示当前label在整行的占比,就是下图红色框框部分

wrapperCol:表示当前输入框在整行的占比 就是下图黄色框框部分

antd中的form表单中的wrapperCol和labelCol问题(antd form table)

        1.首先就是对xs sm等的解释 ,这相当于响应式布局一样 当分辨率小于多少就应用该对象,大部分情况下只需要使用xs和sm即可  ,特殊需要再加上其他分辨率,相当于移动端和PC端。

注意!!!总共是24份  span后面数字是几就是几份  不存在约分 6:18 不等于 1:3  

而且!!labelCol和wrapperCol是成套使用的,在相同分辨率下两者的内容是对应的

举个例子

const formItemLayout = { //这是label的占比份数,span表示份 labelCol: { xs: { span: 24 }, //这个就是当前分辨率小于576px时候运用的比例 sm: { span: 8 } //这个就是当前分辨率大于576px时候运用的比例 }, //这个是输入框的占比份数 wrapperCol: { xs: { span: 24 }, //这个就是当前分辨率小于576px时候运用的比例 sm: { span: 16 } //这个就是当前分辨率大于576px时候运用的比例 }};

        除了span 还有offset  他就是偏移量  是当前组件相对一行的头所偏移的距离,也就是如果当offset为4,那么整体就往右偏移了四份,代码例子代码例子

        除了前两个span和offset属性外 还有一个 gutter,他就是row元素的间隙,比如gutter是20 则代表在他们中间的间隙为20,也就是绿色箭头所指的区域

const formItemLayout = { labelCol: { sm: { span: 6 ,offset:4 } //偏移4份 }, wrapperCol: { sm: { span: 12 } //相较于前个例子 span变为了12份,因为总份数是24份 }};

最后,希望能帮助到对这块和我曾经一样比较模糊的小伙伴

本文链接地址:https://www.jiuchutong.com/zhishi/298800.html 转载请保留说明!

上一篇:图像处理及深度学习开源数据集大全(四万字呕心沥血整理)(图像深度算法)

下一篇:我在字节的这两年(字节在互联网什么地位)

  • 惠普cq511笔记本以太网卡型号(惠普cq511电源)(惠普cq511配置)

    惠普cq511笔记本以太网卡型号(惠普cq511电源)(惠普cq511配置)

  • 微信健康码可以更新吗(微信健康码可以用吗)

    微信健康码可以更新吗(微信健康码可以用吗)

  • 荣耀x10充电指示灯在哪里(荣耀x10充电指示灯怎么开启)

    荣耀x10充电指示灯在哪里(荣耀x10充电指示灯怎么开启)

  • 腾讯直播和微信直播有什么区别吗(腾讯直播和微信直播有什么区别)

    腾讯直播和微信直播有什么区别吗(腾讯直播和微信直播有什么区别)

  • win10错误代码0xc000000e(win10错误代码0xc0000001进不了安全模式)

    win10错误代码0xc000000e(win10错误代码0xc0000001进不了安全模式)

  • 抖音小程序怎么申请的(抖音小程序怎么添加到桌面)

    抖音小程序怎么申请的(抖音小程序怎么添加到桌面)

  • 为什么电脑qq接收不了文件(为什么电脑QQ接受文件很慢)

    为什么电脑qq接收不了文件(为什么电脑QQ接受文件很慢)

  • 英特尔i9比i7强多少(英特尔i9和i7哪个好)

    英特尔i9比i7强多少(英特尔i9和i7哪个好)

  • 微信可以人工快速注销吗(微信可以人工快速解封吗)

    微信可以人工快速注销吗(微信可以人工快速解封吗)

  • 淘宝怎么删除自己的评论(淘宝怎么删除自己评价的照片)

    淘宝怎么删除自己的评论(淘宝怎么删除自己评价的照片)

  • 淘宝退货上门取件和自己寄有什么区别(淘宝退货上门取件可以改地址吗)

    淘宝退货上门取件和自己寄有什么区别(淘宝退货上门取件可以改地址吗)

  • 小米手机有变声器吗(小米手机有变声器功能吗)

    小米手机有变声器吗(小米手机有变声器功能吗)

  • 手机实名认证不是本人怎么改(手机实名认证不了怎么办)

    手机实名认证不是本人怎么改(手机实名认证不了怎么办)

  • 苹果手机怎么强行关机快捷键(苹果手机怎么强制关机)

    苹果手机怎么强行关机快捷键(苹果手机怎么强制关机)

  • qq视频录屏有提示吗(qq视频时录屏会被发现嘛)

    qq视频录屏有提示吗(qq视频时录屏会被发现嘛)

  • iphonex手机屏幕尺寸(iphonex手机屏幕失灵怎么强制关机)

    iphonex手机屏幕尺寸(iphonex手机屏幕失灵怎么强制关机)

  • 左右蓝牙耳机怎么配对(左右蓝牙耳机怎么两个一起播放)

    左右蓝牙耳机怎么配对(左右蓝牙耳机怎么两个一起播放)

  • 苹果手机怎么进入云相册(苹果手机怎么进入dfu模式)

    苹果手机怎么进入云相册(苹果手机怎么进入dfu模式)

  • 华为荣耀20屏幕(华为荣耀20屏幕分辨率)

    华为荣耀20屏幕(华为荣耀20屏幕分辨率)

  • 华为gt2运动款和时尚款区别(华为GT2运动款和雅致)

    华为gt2运动款和时尚款区别(华为GT2运动款和雅致)

  • 快手如何复制别人头像(快手如何复制别人名字2022)

    快手如何复制别人头像(快手如何复制别人名字2022)

  • 抖音视频为何无法保存(抖音视频为何无法保存至相册)

    抖音视频为何无法保存(抖音视频为何无法保存至相册)

  • win7开机进入dos系统(win7开机进入dos界面)

    win7开机进入dos系统(win7开机进入dos界面)

  • transformers包介绍——nlp界最顶级的包——可以不用 但不能不知道——python包推荐系列(transformerss)

    transformers包介绍——nlp界最顶级的包——可以不用 但不能不知道——python包推荐系列(transformerss)

  • 当月认证了进项票没用完下个月还可以用吗
  • 冲回多计提费用
  • 金融企业往来支出属于什么科目
  • 小规模纳税人零申报逾期未申报
  • 应收账款的期末余额在借方表示什么意思
  • 以转账方式收到货款会计分录
  • 工程款和借款能一起诉讼吗
  • 为什么营业成本比营业收入大的时候没有计提减值准备呢
  • 银行承兑质押金的会计分录
  • 出口退税业务提醒信息包括哪些
  • 捐赠利得会计分录
  • 未使用的固定资产提不提折旧
  • 进货发票未到怎么做账
  • 投资公司收到的发票
  • 增值税电子发票怎么作废
  • 发票最大限额999元,超过了怎么办
  • 外管证开具后如何缴税?
  • 增普票付款要不要从公户走?
  • 电子承兑到期收款怎么做账务
  • 所得税补缴自查需要缴纳什么
  • 管理费用月末结账
  • 公司租土地建厂房应该怎么做账呢?
  • 盘点固定资产
  • 电脑检测不到税控盘原因
  • 补缴公积金账务处理
  • linux minor
  • win11多任务怎么用
  • win10任务栏向上的箭头不见了
  • 鸿蒙系统智慧场所在哪
  • 腾讯电脑管家中蓝牙在哪
  • 开机进入睡眠模式按哪个键解除
  • 增值税一般纳税人申报流程
  • 开了红字发票销售方怎么账务处理?
  • 购买电子承兑差额怎么算
  • 大白菜一键装机教程
  • 百度有钱花借钱会上征信吗
  • pos机刷卡怎么做账务处理
  • 装修费预付款会计分录
  • 用php做一个表格
  • 工会举办的比赛有哪些
  • php-xml
  • 芒通,法国 (© Flavio Foglietta/Getty Images)
  • 自产自销农产品发票如何开具
  • css浮动怎么弄
  • 织梦使用手册
  • 房产税的定义是什么
  • 劳动报酬所得收入额大于4000
  • 应收账款和应付账款可以对冲吗
  • 外贸出口增值税附表二填哪项
  • 无形资产是什么?
  • 税金及附加需不需要计提
  • 购买商品商家赠送怎么做分录
  • 补发以前年度工资的账务处理
  • 企业接受供应单位提供劳务而发生的应付账款
  • 跨年成本少结转如何调整
  • 支付给外包公司的工资和保险费
  • 专利申请费用能走工会会费吗
  • 对外投资信息忘记填了
  • 小企业会计准则主要按照什么计量
  • 厂房拆了建住宅可以么
  • MySQL数据库索引设计
  • windows tasks文件夹
  • win10预览版选哪个
  • xp系统如何删除用户
  • qq2440启动linux后插入u盘出现usb 1-1: device descriptor read/64, error -110,usb 1
  • win10周年版
  • 360修复win7
  • Win7系统打开文件夹没有自动排列选项
  • 彻底理解样本方差为何除以n-1
  • unity3D游戏开发
  • javascript entries
  • 使用jquery实现的项目
  • ssh执行远程命令 参数
  • 全面解析A型天秤座男
  • unity loom插件
  • jquery3.3.1
  • 汽车购置税与消费税
  • 网上办税服务厅
  • 文件印发的格式怎么设置
  • 怎样才能做好企业总经理?谈谈你的看法
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设