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

一、背景

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

请添加图片描述

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

<Formform={form}labelCol={{ span: 4 }}wrapperCol={{ span: 20 }}onFinish={handleSubmit}><Form.Itemlabel="输入框"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 (<Formform={form}labelCol={{ span: 4 }}wrapperCol={{ span: 20 }}onFinish={handleSubmit}>{/* 第一行：表单项 */}<Form.Itemlabel="输入框"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}><Tablecolumns={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;