前言
在之前的文章《基于Antd Form组件的二次封装，配置化生成表单、一级列表二级列表功能》中我们用代码的方式介绍了antd-form-multi组件库，
但是不直观的知道antd-form-multi组件库要实现什么样的功能，虽然有了演示地址，但还是有必要写一篇演示文章给大家说明。
antd-form-multi是一个基于Antd Form二次封装的便捷、高效、易于理解、且功能相对完整、适用于绝大多数业务场景的表单组件库。
这是一个纯前端的项目
github地址
github演示地址
cmg-ceo.github.io/antdform.gi…
安装
npm install antd-form-multi
或者
yarn add antd-form-multi
在组件内的<Form>（antd组件）内引用
import FormItem from 'antd-form-multi'
数据联动
这里可以看到，选择框1、选择框2控制后面控件的展示和隐藏
- 选择框1 选择规则1-1，我是规则1-1 和 规则不是2-2 非必填 的输入框显示
- 选择框1 选择规则1-2 我是规则1-2或2-1 显示 我是规则1-1 不显示
- 选择框2 选择规则2-1 我是规则1-2或2-1 显示
- 选择框2 选择规则2-2 规则2-2 必填 显示 我是规则1-2或2-1 不显示
这是将每一个输入框控件都进行编组，当选择框选择对应项时，将组规则进行更换，然后组件库自动会将符合组规则的输入框控件显示出来
这里只是隐藏显示，所以会保留之前填入的内容
一级列表
一级列表，指的是控件数据以数组的方式存放在表单的第一层级，并都在同一个数组内。实际上是对Antd中动态增减嵌套字段 进行扩展，并对其操作进行简化。
这里提供两种布局方式，
- 有包裹器: 包裹器的样式可以使用默认或者自行引入、定义，你只需要配置
WrapComponent: FormWrapCard,这一项即可. - 无包裹器：这种场景适用于一种类似于表格的展示页，如果你不想把重复的
label显示出来，只需要配置openLabel: false。
并且我们提供了一些快捷的操作，复制、移动的功能
wrapCopy: true,
wrapMove: true,
一级列表联动
结合一级列表和表单数据联动的功能，我们就实现了一级列表上的数据联动。
每一个一级列表之间规则独立，当一级列表项删除、重新排序之后，规则项也要对应的进行排序。同样复制一个列表项时，相应的规则也会复制。
这里的规则格式是 [[0,['group1']], [1,['group2','group3']]]
每一项都是一个数组 ，
- 第一项为数字（0、1...）对应着一级列表的索引，
- 第二项为字符串数组，代表着这一个列表适用的规则
- 所以当选择框改变时，我们通过
onChange事件 找到对应的一级列表，进行修改规则
这里通过控制台输出可以看到表单的数据结构
二级列表
二级列表，指的是在一级列表里面还有一层列表。同样他的原理也是用Antd 的动态增减嵌套字段来实现。
这个演示中可以看到我们在一级列表中增加了多个输入框。
二级列表的参数项与一级列表一致，只是将leave1 换成 leave2 。这样保证了开发人员的心智负担。
二级列表联动
同样二级列表的数据联动和一级列表类似，配置项也保持一致。
只是要区分他的组的规则格式 [[0,0,['group1']],[0,1,['group2','group3']]]
- 第一项为数字（0、1...）对应着一级列表的索引，
- 第二项为数字（0、1...）对应着二级列表的索引，
- 第三项为字符串数组，代表着这一个列表适用的规则
额外的功能
在后续的文章中，我将再讲述一下，如何扩展使用，以及一些额外的功能。还有对其进行代码解析。
敬请期待！
谢谢！
