ant design table(ant design form)

AntDesign之labelCol和wrapperCol实际开发笔记表格目录

前言

1.什么是labelCol和wrapperCol？

2.布局的光栅化

1.布局网格系统如何工作

3.栅格常用属性

1.左右偏移

2.区块间隔

3.网格排序

4、labelCol和wrapperCol的实际使用

总结

前言

主要记录网格布局、labelCol、wrapperCol等的一些属性

一、labelCol和wrapperCol是什么

首先，我们来看看AntDesignVue文档。

从图中可以看出，属于Grid中的属性。

labelCol是什么意思？我们直接翻译一下吧。Label是标签的意思，Col是列的意思。因此，如果从字面上理解的话，就是标签栏的意思。至于wrapperCol，它的英文翻译就是封装的意思。实际上，它是封闭的。你可以把它理解为一个封闭的输入框，因此也可以理解为一个输入框栏。如果需要设置布局样式，请使用它。

二、布局的栅格化

1.布局的栅格化系统的工作原理

根据官网的文档，布局是这样描述的：在布局网格系统中，我们根据行和列来定义信息块的外部框架，以保证每个区域的该页面很健壮。整理地面。下面简单介绍一下它的工作原理：

通过“row”在水平方向创建一组“column”。您的内容应放置在`col`内，并且只有`col`可以用作`row`的直接元素。网格系统中的列引用1到24之间的值来表示其跨越的范围。例如，可以使用``创建三个等宽列。如果一个`row`中的`col`总和超过24，那么多余的`col`将被整体排列在另一行中。首先我们要先了解这个布局，我们可以由浅入深一步步学习。接下来我们先看一张布局图。

如图所示，分别有3列。第一列由2个col-12组成，所以它的渲染是这样的，col的总和是24；第二列由3个col组成，是-8组成，col的总和也是24，效果如上；第三列，由4个col-6组成，col的总和也是24，效果如上。

代码如下所示：

a-rowa-col:span='12'col-12/a-cola-col:span='12'col-12/a-col/a-rowa-rowa-col:span='8'col-8/a-cola-col:span='8'col-8/a-cola-col:span='8'col-8/a-col/a-rowa-rowa-col:span='6'col-6/a-cola-col:span='6'col-6/a-cola-col:span='6'col-6/a-cola-col:span='6'col-6/a-列/行

所以，这是一个非常基本的网格。

从堆叠到水平排列。

使用一组Row和Col网格组件，您可以创建一个基本的网格系统，并且所有列(Col)必须放置在Row中。

从上面我们大致知道了什么是网格布局，接下来我们就可以开始了

三、栅格常用的属性

1.左右偏移

直接用会更清晰。如图所示，中间有缝隙。这就是我们想要的效果。我们只是想要它们之间分离的效果。那么要实现这一点，就需要使用offset属性。

使用offset将列向右移动。例如，offset={4}将元素向右偏移4列宽度，使直接编码更加清晰。

代码如下所示：

a-rowa-col:span='8'col-8/a-cola-col:span='8':offset='8'col-8/a-col/a-rowa-rowa-col:span='6':offset='6'col-6col-offset-6/a-cola-col:span='6':offset='6'col-6col-offset-6/a-col/a-rowa-rowa-col:span='12':offset='6'col-12col-offset-6/a-col/a-row

我从第二行代码来解释一下，span='8'表示该列占用8个单元格，offset='8'表示该列应向右移动8个单元格。

2.区块间隔

有时候，我们需要更多的间隔，想要下面的效果，我们可以这样实现，

官网说明如下：

网格常常需要与间隔相匹配。您可以使用Row的gutter属性。我们建议使用px作为网格间隔。

如果要支持响应式，可以写成{xs:8,sm:16,md:24,lg:32}。

如果需要垂直间距，可以写成数组形式[水平间距，垂直间距][16,{xs:8,sm:16,md:24,lg:32}]。

代码如下所示：

a-row:gutter='16'a-colclass='gutter-row':span='6'divclass='gutter-box'col-6/div/a-cola-colclass='gutter-row':span='6'divclass='gutter-box'col-6/div/a-cola-colclass='gutter-row':span='6'divclass='gutter-box'col-6/div/a-cola-colclass='gutter-row':span='6'divclass='gutter-box'col-6/div/a-col/a-row

我们从代码上来分析一下。首先，它的a-row使用了：gutter的属性。我们先来翻译一下这个词的意思。翻译后的意思是排水沟或雨水槽。哈哈哈。那么：gutter='16'表示这条排水沟的凹槽间隔16个；以及你如何理解官方的说法px？无论如何，我是这么理解的。这个n是用来调整间隔大小的，这个是16，也就是说n是0。

3.栅格排序

有时，我们需要对网格中的列进行排序。官方网站是这样描述的。所谓列排序是指可以通过使用push和pull类轻松改变列的顺序。

四、labelCol和wrapperCol的实际使用

接下来我通过开发代码告诉大家，

代码如下所示：

a-col:md='6':sm='24'a-form-itemlabel='物料编号':labelCol='{span:8}':wrapperCol='{span:15,offset:1}'a-输入v模型。修剪='criteria.matnr'//a-form-item/a-col/a-rowa-rowa-col:md='6'a-form-itemlabel='开始日期':labelCol='{span:8:wrapperCol='{span:14,offset:1}'a-date-pickerv-model='criteria.promDateStart'style='width:100%;'/a-date-picker/a-form-item/a-cola-col:md='6':sm='24'a-form-itemlabel='结束日期':labelCol='{span:8}':wrapperCol='{span:14,offset:1}'a-date-pickerv-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等的一些属性