如何为Ant Design的Form.List添加响应式表头？

原Ant Design的Form.List动态表单示例缺少表头，以下是修改后的代码，实现了与表单列精准对齐的响应式表头，通过Grid布局（Row+Col）保证表头与每一行表单元素的宽度匹配，适配不同屏幕尺寸。

修改后的完整代码 #

import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, Form, Input, Row, Col } from 'antd';
import React from 'react';

const App = () => {
  const onFinish = (values) => {
    console.log('Received values of form:', values);
  };

  return (
    <Form name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off">
      <Form.List name="users">
        {(fields, { add, remove }) => (
          <>
            {/* 响应式表头 */}
            <Row style={{ marginBottom: 8, fontWeight: 'bold' }}>
              <Col xs={10} sm={10}>
                First Name
              </Col>
              <Col xs={10} sm={10}>
                Last Name
              </Col>
              <Col xs={4} sm={4}>
                Operation
              </Col>
            </Row>

            {fields.map(({ key, name, ...restField }) => (
              <Row key={key} style={{ marginBottom: 8 }} align="middle">
                <Col xs={10} sm={10}>
                  <Form.Item
                    {...restField}
                    name={[name, 'first']}
                    rules={[
                      {
                        required: true,
                        message: 'Missing first name',
                      },
                    ]}
                  >
                    <Input placeholder="First Name" />
                  </Form.Item>
                </Col>
                <Col xs={10} sm={10}>
                  <Form.Item
                    {...restField}
                    name={[name, 'last']}
                    rules={[
                      {
                        required: true,
                        message: 'Missing last name',
                      },
                    ]}
                  >
                    <Input placeholder="Last Name" />
                  </Form.Item>
                </Col>
                <Col xs={4} sm={4}>
                  <MinusCircleOutlined onClick={() => remove(name)} />
                </Col>
              </Row>
            ))}

            <Form.Item>
              <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                Add field
              </Button>
            </Form.Item>
          </>
        )}
      </Form.List>

      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

export default App;

关键修改说明 #

• 引入Row和Col组件替代原Space布局容器，实现精准的列宽控制与对齐
• 添加独立表头行，通过Col的xs/sm属性配置响应式宽度，与下方表单行的列宽完全匹配
• 将每一行的Form.Item放入对应Col中，保证表头与输入框的布局对齐
• 保留原有的添加/删除、表单提交逻辑，不影响原有功能

内容的提问来源于stack exchange，提问作者Onethedos Doso