antd的Form实例控制表格，表格可收集/回显数据

大概就是如图的效果，但是需要控制数据的收集和回显

•  首先看到这个页面，第一眼就想到table表格。但是我翻阅了下antd的Table组件，发现只能展示数据(也有可编辑单元格)。但是我需要这里的表格，可收集可回显。因为平常回显或收集数据，基本都是用到Form组件，所以我就想着直接最外面用Form组件包着，里面写原生的table。这样我只需要给需要控制的地方用Form.Item组件包裹即可

Yszryjl.jsx

• 这里他们说最上面的table只需要展示数据，所以我就全用readonly禁用了

import React from 'react'
import { Form, Input, Row, Col } from 'antd'
import './Yszryjl.scss'
const { TextArea } = Input

export default function Yszryjl() {
  return (
    <div className="Yszryjl">
      <Form autoComplete="off">
        <div>
          <h3 style={{ textAlign: 'center', fontSize: 28, fontWeight: 600 }}>
            入院记录
          </h3>
          <table className="showTable">
            <tbody>
              <tr>
                <td>姓名</td>
                <td>
                  <Form.Item name="xm">
                    <Input bordered={false} readOnly />
                  </Form.Item>
                </td>
                <td>性别</td>
                <td>
                  <Form.Item name="xb">
                    <Input bordered={false} readOnly />
                  </Form.Item>
                </td>
                <td>年龄</td>
                <td>
                  <Form.Item name="nl">
                    <Input bordered={false} readOnly />
                  </Form.Item>
                </td>
                <td>籍贯</td>
                <td>
                  <Form.Item name="jg">
                    <Input bordered={false} readOnly />
                  </Form.Item>
                </td>
              </tr>
              <tr>
                <td>职业</td>
                <td>
                  <Form.Item name="xm">
                    <Input bordered={false} readOnly />
                  </Form.Item>
                </td>
                <td>婚姻</td>
                <td>
                  <Form.Item name="xb">
                    <Input bordered={false} readOnly />
                  </Form.Item>
                </td>
                <td>民族</td>
                <td>
                  <Form.Item name="nl">
                    <Input bordered={false} readOnly />
                  </Form.Item>
                </td>
                <td>入院时间</td>
                <td>
                  <Form.Item name="jg">
                    <Input bordered={false} readOnly />
                  </Form.Item>
                </td>
              </tr>
              <tr>
                <td>现住址</td>
                <td colSpan={3}>
                  <Form.Item name="xzz">
                    <Input bordered={false} readOnly />
                  </Form.Item>
                </td>
                <td>入院次数</td>
                <td colSpan={3}>
                  <Form.Item name="rycs">
                    <Input bordered={false} readOnly />
                  </Form.Item>
                </td>
              </tr>
              <tr>
                <td>联系人姓名</td>
                <td>
                  <Form.Item name="lxrxm">
                    <Input bordered={false} readOnly />
                  </Form.Item>
                </td>
                <td colSpan={2}>与患者关系</td>
                <td colSpan={2}>
                  <Form.Item name="yhzgx">
                    <Input bordered={false} readOnly />
                  </Form.Item>
                </td>
                <td>病例陈述者</td>
                <td>
                  <Form.Item name="blcsz">
                    <Input bordered={false} readOnly />
                  </Form.Item>
                </td>
              </tr>
              <tr>
                <td>联系人住址</td>
                <td colSpan={3}>
                  <Form.Item name="lxrzz">
                    <Input bordered={false} readOnly />
                  </Form.Item>
                </td>
                <td>电话</td>
                <td>
                  <Form.Item name="dh">
                    <Input bordered={false} readOnly />
                  </Form.Item>
                </td>
                <td>邮编</td>
                <td>
                  <Form.Item name="yb">
                    <Input bordered={false} readOnly />
                  </Form.Item>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <br />
        <div>
          <Form.Item name="zs" label="&nbsp;&nbsp;主 诉">
            <TextArea
              rows={1}
              bordered={false}
              style={{
                borderLeft: '1px solid #000',
                borderRight: '1px solid #000',
              }}
            ></TextArea>
          </Form.Item>
          <br />
          <Form.Item name="xbs" label="现病史">
            <TextArea
              rows={1}
              bordered={false}
              style={{
                borderLeft: '1px solid #000',
                borderRight: '1px solid #000',
              }}
            ></TextArea>
          </Form.Item>
          <br />
          <Form.Item name="jws" label="既往史">
            <TextArea
              rows={1}
              bordered={false}
              style={{
                borderLeft: '1px solid #000',
                borderRight: '1px solid #000',
              }}
            ></TextArea>
          </Form.Item>
          <br />
          <Form.Item name="grs" label="个人史">
            <TextArea
              rows={1}
              bordered={false}
              style={{
                borderLeft: '1px solid #000',
                borderRight: '1px solid #000',
              }}
            ></TextArea>
          </Form.Item>
          <br />
          <Form.Item name="hys" label="婚姻史">
            <TextArea
              rows={1}
              bordered={false}
              style={{
                borderLeft: '1px solid #000',
                borderRight: '1px solid #000',
              }}
            ></TextArea>
          </Form.Item>
          <br />
          <Form.Item name="jzs" label="家族史">
            <TextArea
              rows={1}
              bordered={false}
              style={{
                borderLeft: '1px solid #000',
                borderRight: '1px solid #000',
              }}
            ></TextArea>
          </Form.Item>
        </div>
      </Form>
    </div>
  )
}

 Yszryjl.scss

.Yszryjl {
  width: 973px;

  // table合并单元格
  .showTable {
    border-collapse: collapse;
  }

  .showTable,
  tr,
  td {
    border: 1px solid #000;
  }

  td {
    text-align: center;
    white-space: nowrap;
  }

  .ant-form-item {
    margin: 0 !important;
  }
}

剩下的就是通过Form组件实例，进行数据的收集和回显了。前面的文章有提到怎么用Form收集和回显数据，有需要的可以看一下