2020-08-17

Form.Item 的多级嵌套

1. 业务场景

由于本人在负责我司官网后台管理系统的时候有个需求涉及到表单的动态增删改查，所以选择了Ant Design 的Form.Item 来实现。但是大家由于我的需求是三层嵌套的即form.item 嵌套form.item 的但是官网并没有详细的使用文档。可能是本人的熟练度不够所以在使用过程中踩了不少坑。所以特意记录一下。

2. 使用

<Form form={form} name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off">
        <Form.List name="attributes">
          {(fields, { add, remove, move }) => {
            return (
              <div>
                {fields.map((field) => (
                  <div key={field.key}>
                    <div className="operation">
                      <ArrowDownOutlined
                        onClick={() => {
                          move(field.name, field.name + 1);
                        }}
                      />
                      <ArrowUpOutlined
                        onClick={() => {
                          move(field.name, field.name - 1);
                        }}
                      />
                      <MinusCircleOutlined
                        onClick={() => {
                          remove(field.name);
                        }}
                      />
                    </div>
                    <div className="from_row">
                      <Form.Item
                        {...field}
                        name={[field.name, 'title']}
                        fieldKey={[field.fieldKey, 'title']}
                        rules={[{ required: true, message: '请填写参数分类' }]}
                      >
                        <Input.TextArea className="title" placeholder="请填写参数分类" />
                      </Form.Item>
                          {/* 此处一定要注意name的写法 */}
                      <Form.List name={[field.name, 'data']}>
                        {(fieldsSecond, fieldsFunction) => {
                          return (
                            <div>
                              {fieldsSecond.map((item) => (
                                <Space key={`${field.name}${item.key}`} className="from_row">
                                  <Form.Item
                                    {...item}
                                    name={[item.name, 'name']}
                                    fieldKey={[item.fieldKey, 'name']}
                                    rules={[{ required: true, message: '请填写参数分类' }]}
                                  >
                                    <Input.TextArea
                                      className="title"
                                      placeholder="请填写参数分类"
                                    />
                                  </Form.Item>
                                  <Form.Item
                                    {...item}
                                    name={[item.name, 'value']}
                                    fieldKey={[item.fieldKey, 'value']}
                                    rules={[{ required: true, message: '请填写参数分类' }]}
                                  >
                                    <Input.TextArea
                                      className="content"
                                      placeholder="请填写参数分类"
                                    />
                                  </Form.Item>
​
                                  <div className="operation">
                                    <ArrowDownOutlined
                                      onClick={() => {
                                        fieldsFunction.move(item.name, item.name + 1);
                                      }}
                                    />
                                    <ArrowUpOutlined
                                      onClick={() => {
                                        fieldsFunction.move(item.name, item.name - 1);
                                      }}
                                    />
                                    <MinusCircleOutlined
                                      onClick={() => {
                                        fieldsFunction.remove(item.name);
                                      }}
                                    />
                                  </div>
                                </Space>
                              ))}
​
                              <Form.Item>
                                <Button
                                  type="dashed"
                                  onClick={() => {
                                    fieldsFunction.add();
                                  }}
                                  block
                                  size="large"
                                >
                                  <PlusOutlined /> 添加参数
                                </Button>
                              </Form.Item>
                            </div>
                          );
                        }}
                      </Form.List>
                    </div>
                  </div>
                ))}
​
                <Form.Item>
                  <Button
                    type="dashed"
                    onClick={() => {
                      add();
                    }}
                    block
                    size="large"
                  >
                    <PlusOutlined /> 添加参数
                  </Button>
                </Form.Item>
              </div>
            );
          }}
        </Form.List>
      </Form>

3. 效果

 

4. 注意

• 第二级嵌套Form.Item的name的写法

• 注意上移下移删除的参数