位置: 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 转载请保留说明!

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

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

  • 魅族18x是线性马达吗(魅族18是什么线性马达)

    魅族18x是线性马达吗(魅族18是什么线性马达)

  • 苹果手机怎么刷门禁卡(苹果手机怎么刷新内存清理)

    苹果手机怎么刷门禁卡(苹果手机怎么刷新内存清理)

  • 抖音私信发的视频咋样保存(抖音私信发的视频怎么保存)

    抖音私信发的视频咋样保存(抖音私信发的视频怎么保存)

  • 小程序服务的基础(小程序服务内容)

    小程序服务的基础(小程序服务内容)

  • 苹果短信怎么切换蓝色(苹果短信怎么切换副号)

    苹果短信怎么切换蓝色(苹果短信怎么切换副号)

  • 一台电脑可以挂几个快手号(一台电脑可以挂几个拼多多店铺)

    一台电脑可以挂几个快手号(一台电脑可以挂几个拼多多店铺)

  • 小米mix2s支持qc4快充吗

    小米mix2s支持qc4快充吗

  • 固态硬盘装在主机哪里(固态硬盘装在主板下方)

    固态硬盘装在主机哪里(固态硬盘装在主板下方)

  • nova6什么时候上市(nova6啥时候上市的)

    nova6什么时候上市(nova6啥时候上市的)

  • word中的脚注是指(word中的脚注是指标注内容页脚)

    word中的脚注是指(word中的脚注是指标注内容页脚)

  • 手机网盘怎么用(手机网盘怎么用二维码登陆)

    手机网盘怎么用(手机网盘怎么用二维码登陆)

  • ipad自动扣费怎么取消(ipad自动扣款,不知买了什么)

    ipad自动扣费怎么取消(ipad自动扣款,不知买了什么)

  • 怎么增加qq预设账号(qq怎么预设时间发送消息)

    怎么增加qq预设账号(qq怎么预设时间发送消息)

  • 语言处理程序的发展经历了哪三个阶段(语言处理程序的发展经历了哪三个发展阶段)

    语言处理程序的发展经历了哪三个阶段(语言处理程序的发展经历了哪三个发展阶段)

  • 11pro怎么设置电池百分比(苹果11pro如何设置电量)

    11pro怎么设置电池百分比(苹果11pro如何设置电量)

  • wps里怎么查找内容(wps怎么查找内容全部导出)

    wps里怎么查找内容(wps怎么查找内容全部导出)

  • 仅自己可见的说说怎么公开(仅自己可见的说说转发后别人可以看见吗)

    仅自己可见的说说怎么公开(仅自己可见的说说转发后别人可以看见吗)

  • 主板内存卡槽坏了表现(主板内存卡槽坏了自我修复)

    主板内存卡槽坏了表现(主板内存卡槽坏了自我修复)

  • 华为flaal20是什么手机(华为fla al20是什么手机)

    华为flaal20是什么手机(华为fla al20是什么手机)

  • 美团删除的订单怎么恢复(美团删除的订单可以恢复吗)

    美团删除的订单怎么恢复(美团删除的订单可以恢复吗)

  • 抖音里的时光倒流在哪个功能里面(抖音里的时光倒流怎么拍的)

    抖音里的时光倒流在哪个功能里面(抖音里的时光倒流怎么拍的)

  • 苹果官网在哪里打开(苹果官网在哪里查)

    苹果官网在哪里打开(苹果官网在哪里查)

  • 智能手机电池能换吗(智能手机电池能用几个小时)

    智能手机电池能换吗(智能手机电池能用几个小时)

  • 筹建期的收入要交企业所得税吗
  • 一般纳税人条件要求2020
  • 行政职工福利费包括哪些内容呢
  • 合伙企业每年费用
  • 金蝶kis标准版自定义报表功能
  • 成立日期是注册日期吗
  • 社保代理公司的合作协议
  • 工伤职工应享有的待遇及救济途径
  • 超市费用能否税前扣减?
  • 一般纳税人增值税优惠政策
  • 购进免税农产品怎么计算进项税额
  • 工程交税必须在工程地点交吗
  • 取得增值税专用发票是否可以抵扣
  • 航空公司按照一次性收费
  • 自然人股东转让股权如何避税
  • 外方获得的利润怎么算
  • 公司的车卖了
  • 汽车行业销售折让
  • 固定资产清理会计处理例题
  • 空白发票怎么用
  • 逾期交房违约金怎么算
  • 转让投资性房地产收到售价款
  • 会计中坏账准备的借贷方向
  • 财产清查的方法和财产清查结果的会计处理
  • 出口货物做内销处理
  • 稳增长促转型
  • 土地拍卖资金交到哪里
  • mac本host文件
  • php常用函数
  • 如何修复错误 OC3 INVT CHF100a
  • PHP:curl_multi_remove_handle()的用法_cURL函数
  • vue中如何使用weboffice
  • 装win7提示失败怎么办
  • 开发商延期交房违法吗
  • 初级职称到中级职称需要上继续教育课吗
  • 免收印花税
  • 平行结转分步法的特点
  • 研发企业税率是多少
  • 上市公司收购其他股票
  • 残疾人就业保障金会计分录怎么做
  • 数据库用户名称
  • 总资产报酬率的公式
  • 财务人员如何爱岗敬业
  • 汇兑记载事项及内容
  • 工程结算与工程施工的差额在哪填列
  • 异地房产税如何收
  • 其他应付款结转收入的条件
  • 发行债券支付的发行费用计入哪里
  • 劳务费是否属于工资
  • 按最低标准买社保30年退休后每个月领多少钱
  • 资产负债表中的应交税费包括什么
  • 转账时转错账号怎么办
  • 饭店的会计做账怎么做
  • 挂靠企业电费如何处理?
  • 会计账簿按用途分类分为
  • 息税前利润变动百分比计算公式
  • mysql求两个字段的和
  • 目前用到的两个字符
  • mongo 安装
  • 做ghost备份
  • 桌面开始菜单跑到右边去了怎么办
  • win8.1怎么设置自动关机
  • 光纤拨号方式
  • linux wc命令详解
  • win10预览版好吗
  • 怎么设置永久禁止下载拼多多
  • win10启动提示
  • android 相对布局居中
  • unity着色器在哪
  • 用wasfile.zip智能批量删除文件
  • python用于读取文本文件内容的方法
  • 在dos下运行
  • Python搭建HTTP服务器和FTP服务器
  • dos 删除文件夹下所有文件
  • jquery.form.js下载
  • android基础知识
  • python怎么用的
  • 干部试用期满转正考察谈话提纲
  • 洛阳契税首套房认定标准
  • 所得税与增值税区别
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设