一、背景
在日常使用 表單 時，我們一般有如下布局：
可以通過 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;
