快捷導(dǎo)航

antd中form表單的wrapperCol和labelCol問(wèn)題詳解

更新時(shí)間：2023年02月08日 11:41:39 作者：碼不動(dòng)的碼蜂

最近學(xué)習(xí)中遇到了些問(wèn)題,所以給大家總結(jié),下面這篇文章主要給大家介紹了關(guān)于antd中form表單的wrapperCol和labelCol問(wèn)題的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

之前在學(xué)這塊時(shí)候比較模糊有點(diǎn)不熟以至于在后來(lái)的開(kāi)發(fā)過(guò)程中看別人的代碼中的xs sm等以及{span：8}也表示困惑

但也不敢問(wèn)大佬（怕因?yàn)樘?jiǎn)單而被嘲諷），只能自己去百度去了解，總算是有些眉目，到現(xiàn)在覺(jué)得可能有些小伙伴和我當(dāng)初一樣比較困惑，希望這個(gè)能對(duì)和我一樣模糊的小伙伴有幫助，也方便自己隨時(shí)查看

labelCol：表示當(dāng)前l(fā)abel在整行的占比，就是下圖紅色框框部分

wrapperCol：表示當(dāng)前輸入框在整行的占比就是下圖黃色框框部分

1.首先就是對(duì)xs sm等的解釋，這相當(dāng)于響應(yīng)式布局一樣當(dāng)分辨率小于多少就應(yīng)用該對(duì)象，大部分情況下只需要使用xs和sm即可，特殊需要再加上其他分辨率，相當(dāng)于移動(dòng)端和PC端。

注意?。?！總共是24份 span后面數(shù)字是幾就是幾份不存在約分 6：18 不等于 1：3

而且??！labelCol和wrapperCol是成套使用的，在相同分辨率下兩者的內(nèi)容是對(duì)應(yīng)的

舉個(gè)例子

const formItemLayout = {
  //這是label的占比份數(shù)，span表示份
  labelCol: {
    xs: { span: 24 }, //這個(gè)就是當(dāng)前分辨率小于576px時(shí)候運(yùn)用的比例
    sm: { span: 8 }   //這個(gè)就是當(dāng)前分辨率大于576px時(shí)候運(yùn)用的比例
  },
  //這個(gè)是輸入框的占比份數(shù)
  wrapperCol: {
    xs: { span: 24 }, //這個(gè)就是當(dāng)前分辨率小于576px時(shí)候運(yùn)用的比例
    sm: { span: 16 }  //這個(gè)就是當(dāng)前分辨率大于576px時(shí)候運(yùn)用的比例
  }
};

除了span 還有offset 他就是偏移量是當(dāng)前組件相對(duì)一行的頭所偏移的距離，也就是如果當(dāng)offset為4，那么整體就往右偏移了四份，代碼例子代碼例子

除了前兩個(gè)span和offset屬性外還有一個(gè) gutter，他就是row元素的間隙，比如gutter是20 則代表在他們中間的間隙為20，也就是綠色箭頭所指的區(qū)域

const formItemLayout = {
  labelCol: {
    sm: { span: 6 ，offset：4 }   //偏移4份
  },
  wrapperCol: {
    sm: { span: 12 }  //相較于前個(gè)例子 span變?yōu)榱?2份，因?yàn)榭偡輸?shù)是24份
  }
};

最后，希望能幫助到對(duì)這塊和我曾經(jīng)一樣比較模糊的小伙伴

總結(jié)

到此這篇關(guān)于antd中form表單的wrapperCol和labelCol問(wèn)題詳解的文章就介紹到這了,更多相關(guān)antd form表單wrapperCol和labelCol內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: