Form表单数组字段增删问题

Form表单数组字段增删问题

• 场景还原

在我们做表单这块的时候可能会遇到以下原型：

表单中其中一个字段是个数组，数组的每一项是个对象，可能有多个字段，且支持删除和新增。

那么问题来了，这种情况，我们如何设计数据结构、如何设计我们的Form表单？

• 实现动态增删效果

<FormItem
                            {...formItemLayout}
                            // required
                            label="字段匹配"
                          >
                            {(dataId ? (currentData && currentData.columns ? currentData.columns : []) : columns).map((rule, index) => {
                              let ruleKeys = `columns[${index}]`;
                              return (
                                <div style={
 { marginBottom: 15 }} key={`columns-${index}`}>
                                  <FormItem
                                    style={
 {
                                      display: 'inline-block',
                                      width: 100,
                                      marginBottom: 0,
                                      marginRight: 10
                                    }}
                                  >