位置: IT常识 - 正文
Ant Design表单之labelCol 和wrapperCol的实际开发笔记(ant design vue 表单)
编辑：rootadmin目录
前言
一、labelCol和wrapperCol是什么
二、布局的栅格化
1.布局的栅格化系统的工作原理
三、栅格常用的属性
1.左右偏移
2.区块间隔
3.栅格排序
四、labelCol和wrapperCol的实际使用
总结
前言推荐整理分享Ant Design表单之labelCol 和wrapperCol的实际开发笔记(ant design vue 表单)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:antdesign如何给表单赋值,ant design table,antdesign如何给表单赋值,ant design 表单设计器,ant design 表单设计器,ant design table,ant design表格,ant design vue 表单,内容如对您有帮助，希望把文章链接给更多的朋友！
主要是记录一下栅格布局的一些属性和labelCol、wrapperCol等。
一、labelCol和wrapperCol是什么首先，我们先去查询Ant Design Vue文档,
由图中可知，它是属于Grid栅格里面的属性。
而labelCol是什么意思呢，直接去翻译一下,而label它是标签的意思，而Col它是列的意思，所以，从字面上去理解，就是标签列。而wrapperCol，它在英文里面翻译是封装的意思，在实际中，它是封闭的，你可以理解为那种封闭的输入框，所以，它可以理解为输入框列。如果说，你需要去设置布局样式时，就使用它。
二、布局的栅格化1.布局的栅格化系统的工作原理根据官网的文档描述如下：布局的栅格化系统，我们是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理：
通过`row`在水平方向建立一组`column`（简写 col）你的内容应当放置于`col`内，并且，只有`col`可以作为`row`的直接元素栅格系统中的列是指 1 到 24 的值来表示其跨越的范围。例如，三个等宽的列可以使用 `` 来创建如果一个`row`中的`col`总和超过 24，那么多余的`col`会作为一个整体另起一行排列首先，我们要先了解这个布局，我们才能由浅深入地一步步地往下学习，接下来，我们先来看一张布局图片，
如图上所示，分别有3列，第1列，它是由2个col-12组成的，所以它的效果图是这样的，col总和为24；第2列，它是由3个col-8组成的，col总和也为24，效果图如上；第3列，它是由4个col-6组成的，col总和也为24，效果图如上。
代码如下：
<a-row> <a-col :span="12">col-12</a-col> <a-col :span="12">col-12</a-col> </a-row> <a-row> <a-col :span="8">col-8</a-col> <a-col :span="8">col-8</a-col> <a-col :span="8">col-8</a-col> </a-row> <a-row> <a-col :span="6">col-6</a-col> <a-col :span="6">col-6</a-col> <a-col :span="6">col-6</a-col> <a-col :span="6">col-6</a-col> </a-row>所以，这就是很基础的栅格咯。
从堆叠到水平排列。
使用单一的一组 Row 和 Col 栅格组件，就可以创建一个基本的栅格系统，所有列（Col）必须放在 Row 内。
由上所知，我们大概知道什么是栅格的布局了，那后面，我们就能开始了
三、栅格常用的属性1.左右偏移我们直接用图来说会比较清楚，如图所示，它们的中间都有间隔，那就是我们想要的效果了，我们就是想要它们之间有分隔的效果，那要实现，就要使用到这个offset属性了。
使用 offset 可以将列向右侧偏。例如，offset={4} 将元素向右侧偏移了 4 个列（column）的宽度，直接上代码更清晰。
代码如下：
<a-row> <a-col :span="8">col-8</a-col> <a-col :span="8" :offset="8">col-8</a-col> </a-row> <a-row> <a-col :span="6" :offset="6">col-6 col-offset-6</a-col> <a-col :span="6" :offset="6">col-6 col-offset-6</a-col> </a-row> <a-row> <a-col :span="12" :offset="6">col-12 col-offset-6</a-col> </a-row>从第2行代码，讲解一下，:span = "8",代表这个列占了8个格，而:offset="8",表示这一列，要往右移动8个格。
2.区块间隔
有些时候，我们需要更多的间隔，想要图下的效果，我们可以这样实现，
官网描述是这样的：
栅格常常需要和间隔进行配合，你可以使用 Row 的 gutter 属性，我们推荐使用 (16+8n)px 作为栅格间隔(n 是自然数)。
如果要支持响应式，可以写成 { xs: 8, sm: 16, md: 24, lg: 32 }。
如果需要垂直间距，可以写成数组形式 [水平间距, 垂直间距] [16, { xs: 8, sm: 16, md: 24, lg: 32 }]。
代码如下：
<a-row :gutter="16"> <a-col class="gutter-row" :span="6"> <div class="gutter-box">col-6</div> </a-col> <a-col class="gutter-row" :span="6"> <div class="gutter-box">col-6</div> </a-col> <a-col class="gutter-row" :span="6"> <div class="gutter-box">col-6</div> </a-col> <a-col class="gutter-row" :span="6"> <div class="gutter-box">col-6</div> </a-col> </a-row>我们从代码上进行分析，首先，它的<a-row>里面使用了:gutter的属性，我们先去翻译一下这个单词是什么意思先，经过翻译，它是指排水沟或雨水槽的意思哈哈哈。那:gutter="16"就意味着这个排水沟的沟槽是16个间隔这么大；而官方所说的 (16+8n)px ，怎么理解呢，反正我是这么理解的，这个n就是用来调整间隔大小来用的，而这个是16，说明这个n也就是0了嘛。
3.栅格排序有些时候，我们需要对栅格里面的列进行排序呀，官网是这样描述的，所谓的列排序，它是指通过使用 push 和 pull 类就可以很容易的改变列（column）的顺序。
四、labelCol和wrapperCol的实际使用下面我通过开发代码来讲述，
代码如下：
<a-col :md="6" :sm="24"> <a-form-item label="物料编号" :labelCol="{span: 8}" :wrapperCol="{span: 15, offset: 1}"> <a-input v-model.trim="criteria.matnr"/> </a-form-item> </a-col> </a-row> <a-row> <a-col :md="6" > <a-form-item label="起始日期" :labelCol="{span: 8}" :wrapperCol="{span: 14, offset: 1}"> <a-date-picker v-model="criteria.promDateStart" style="width: 100%;"> </a-date-picker> </a-form-item> </a-col> <a-col :md="6" :sm="24"> <a-form-item label="结束日期" :labelCol="{span: 8}" :wrapperCol="{span: 14, offset: 1}"> <a-date-picker v-model="criteria.promDateEnd" style="width: 100%;"/> </a-form-item> </a-col>它的效果图所下：
首先，我们从这效果图来分析，是没什么大问题，然后我们看一下这个代码分析，由于它这个标签是<a-form-item>表单标签来的，所以这个:labelCol="{span: 8}" :wrapperCol="{span: 14, offset: 1}都是包含在里面的，而labelCol="{span: 8}"，你可以这样理解，这个的意思就是指”起始日期“、”结束日期“这些内容所占用的空间为8个格，而 :wrapperCol="{span: 14, offset: 1}，它就是后面的封闭的框的所占的空间为14个格，并且还往右移动了1个格。
那么接下来，我在改变一下，把”起始日期“改为”促销起始日期“6个字后，我们在看一下效果，
由图可知，那个冒号不见了，那是因为空间就只有8个格这么大，而现在加多了2个字，放不下了，所以那个冒号不见了。
好了，知道问题所在，那么我们该怎么进行解决呢？ 先看图，
现在，它的效果出来了，其实，很简单，就是把之前的labelCol="{span: 8}"，把它改一下就可以了，把它改为labelCol="{span: 9}" 即可了，但前提是：span:9+span: 14+1要小于或者等于24才行，否则它会增加一行的。
综上所述，我们知道，这个labelCol 通常都是指图上的这些文字标签的内容，而wrapperCol通常是指图上的输入框的内容，而它们之间的总和是24个格，效果可以根据这个24个格慢慢地去调整即可。
总结主要是记录一下栅格布局的一些属性和labelCol、wrapperCol等。
下一篇：一键免费部署你的私人 ChatGPT 网站(一键部署web应用)
