HOW - Form 表单 label 和 wrapper 对齐场景

一、背景

在日常使用 表单 时，我们一般有如下布局：

可以通过 Form 表单提供的配置直接设置：

<Form
      form={form}
      labelCol={{ span: 4 }}
      wrapperCol={{ span: 20 }}
      onFinish={handleSubmit}
    >
      <Form.Item
        label="输入框"
        name="input"
        rules={[{ required: true, message: "请输入内容" }]}
      >
        <Input placeholder="请输入内容" />
      </Form.Item>
</Form>

那对于有额外提示或组件需要在表单组件下方展示呢，如下图：

二、具体方案

1. form item 只设置 label 属性（更推荐）

Antd form - 复杂一点的控件

注意，在 label 对应的 Form.Item 上不要在指定 name 属性，这个 Item 只作为布局作用。

2. 结合 row 和 col

import React from "react";
import { Form, Input, Table, Row, Col, Button } from "antd";

const FormWithTableExample = () => {
  const [form] = Form.useForm();

  const columns = [
    {
      title: "列 1",
      dataIndex: "col1",
      key: "col1",
    },
    {
      title: "列 2",
      dataIndex: "col2",
      key: "col2",
    },
  ];

  const data = [
    { key: "1", col1: "数据 1", col2: "数据 2" },
    { key: "2", col1: "数据 3", col2: "数据 4" },
  ];

  const handleSubmit = () => {
    form.validateFields().then((values) => {
      console.log("提交成功：", values);
    });
  };

  return (
    <Form
      form={form}
      labelCol={{ span: 4 }}
      wrapperCol={{ span: 20 }}
      onFinish={handleSubmit}
    >
      {/* 第一行：表单项 */}
      <Form.Item
        label="输入框"
        name="input"
        rules={[{ required: true, message: "请输入内容" }]}
      >
        <Input placeholder="请输入内容" />
      </Form.Item>

      {/* 第二行：非表单内容 */}
      <Row style={{ marginBottom: "16px" }}>
        <Col span={4} style={{ textAlign: "right", paddingRight: "8px" }}>
          <label>数据表格：</label>
        </Col>
        <Col span={20}>
          <Table
            columns={columns}
            dataSource={data}
            pagination={false}
            bordered
          />
        </Col>
      </Row>

      {/* 提交按钮 */}
      <Form.Item wrapperCol={{ offset: 4, span: 20 }}>
        <Button type="primary" htmlType="submit">
          提交
        </Button>
      </Form.Item>
    </Form>
  );
};

export default FormWithTableExample;