Ant design vue 动态表单

Ant design vue 动态表单

1、官方示例

首先我们先看一下官网给出的示例：

点击Add filed 会增加一个新的input输入框

点击删除的时候可以删除该行input框
下面给出官网的demo示例：

2、重点解析

我们分析官网给出的demo，可以知道整个表单的重点构成在于：

遍历form表单中keys数组，为form-item赋予不同的key，紧接着生成a-input
所以我们也可以推测出，进行动态的动态增加、减少表单项的关键在于操作keys数组。
我们在通过v-decorator为input绑定数据源时，需要使用names[${k}]，如下图所示：

我们在表单构建之前使用生命周期beforeCreate，首先使用createForm创建表单，然后为表单的keys设置初始值为空数组，并且设置keys是保留项。

在remove和add方法中主要是操作keys数组的变化，然后通过setFieldsValue设置keys的值。
例如：
form.setFieldsValue({
keys: keys.filter(key => key !== k),
});
到这里官网示例可以满足我们大部分需求，但是在使用接口数据动态的加载表单的时候，因为异步问题会存在一些问题。下面我将会为大家解答这些问题。

3、异步的动态表单

废话不多说先上代码：

我们使用setTimeout模拟网络请求，来实现模仿异步请求生成动态表单。
其中需要注意的是：
1、我们需要先将表单设置为隐藏状态，在接口返回数据之后，设置表单为显示状态。
2、我们使用setFieldsValue设置表单的显示值时，需要使用nextTick，否则无法设置成功。
3、另外需要注意的一点时，keys数组必须从0开始。
运行结果：

注解：
1、如果你在使用的过程中遇到了，第一个input框无法赋值的时候，可以尝试单独设置第一个input框的v-decorator的names[0]改为下标非0的值。
例如：this.form.setFieldsValue({ ‘names[11]’: res[0].whyDescription });
2、如果你在生命周期中设置了names的初始值，例如：
this.form.getFieldDecorator(‘names’, { initialValue: [], preserve: false });
那么每次刷新的表单的时候都会把默认值设置成空，如果不需要此功能，请删除此行代码。

参考文档：https://www.jianshu.com/p/a22604f88f3b