如何自定义 Ant 设计的表格？

Question

我正在尝试使用 ant 设计进行内联表单设计，但我无法使其成为定制版本。 我附上了代码，代码中的 output 的图像，我想要的形式应该是这样的。 这是代码：

 const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};
const layoutInline ={
  labelCol: {
    sm: {
      offset: 0,
      span: 20,
      },
  },
  wrapperCol: {
    sm: {
    offset: 30,
    span: 30,
    },
    
  },
}

  return (
    <div style={{width: "70%", padding: "4%"}}>
      <div>
   <Form
     {...layoutInline}
      form={form}

      layout="inline"
  
     
  
    >
 
      <Form.Item label="Full Name" tooltip="This is a required field">
        <Input placeholder="Full Name" />
      </Form.Item>
      <Form.Item
        label="Age"
       
        tooltip={{
          title: 'Tooltip with customize icon',
          icon: <InfoCircleOutlined />,
        }}
        onChange={updateAge}
        value={age}
      >
        <Input placeholder="input placeholder" />
      </Form.Item>
      <Form.Item name="gender" label="Gender" rules={[{ required: true }]}>
        <Select
          placeholder="Select an option"
          onChange={updateGender}
          allowClear
        >
          <Option value="male">male</Option>
          <Option value="female">female</Option>
          <Option value="other">other</Option>
        </Select>
      </Form.Item>
      {/* <Form.Item label="Full Name" tooltip="This is a required field">
        <p>{gender} {age} {ethnicity} {AST} {platelets} {ASTupper} {ALT} {HBVDNA} {report}</p>
      </Form.Item> */}
      <Form.Item name="Ethnicity" label="Ethnicity" rules={[{ required: true }]}>
        <Select
          placeholder="Select an option"
          onChange={updateEthnicity}
          allowClear
        >
          <Option value="South-East-Asian">South East Asian</Option>
          <Option value="South-Asian">South-Asian</Option>
          <Option value="African">African</Option>
          <Option value="Other">Other</Option>
        </Select>
      </Form.Item>

    </Form>
      </div>

它像这样出现在页面上。

我想要的是应该看起来像这样。

谁能指导我，如何实现？

Answer 1

1 - offset和span的值遵循 Antd Grid Layout 系统的规则，不能超过 24（24 列）。

2 - 在Form元素上添加labelCol和wrapperCol将为每个字段应用相同的布局。 如您所愿，每个字段都有不同的布局，因此您需要将其应用于每个字段

3 - Form 上的layout="inline"意味着它们都将是内联的

最后，Antd Form 上的布局系统很好地具有垂直对齐的字段。 如果您想完全控制字段显示，则必须自己包装每个字段并使用自定义样式或 Antd Grid 列。

你可能需要这样的东西：
https://codesandbox.io/s/form-methods-antd4123-forked-xo3zp?file=/index.js:922-2483

<Form form={form}>
  <Row>
    {* sm is only a breakpoint, you may need to add some more for better responsive *}
    <Col sm={14}>
      <Form.Item label="Full Name" tooltip="This is a required field">
        <Input placeholder="Full Name" />
      </Form.Item>
    </Col>
    <Col sm={{ offset: 2, span: 8 }}>
      <Form.Item label="Age">
        <Input placeholder="input placeholder" />
      </Form.Item>
    </Col>
  </Row>
  <Row>
    <Col sm={8}>
      <Form.Item
        name="gender"
        label="Gender"
        rules={[{ required: true }]}
      >
        <Select placeholder="Select an option" allowClear>
          <Option value="male">male</Option>
          <Option value="female">female</Option>
          <Option value="other">other</Option>
        </Select>
      </Form.Item>
    </Col>
    <Col sm={{ offset: 2, span: 8 }}>
      <Form.Item
        name="Ethnicity"
        label="Ethnicity"
        rules={[{ required: true }]}
      >
        <Select placeholder="Select an option" allowClear>
          <Option value="South-East-Asian">South East Asian</Option>
          <Option value="South-Asian">South-Asian</Option>
          <Option value="African">African</Option>
          <Option value="Other">Other</Option>
        </Select>
      </Form.Item>
    </Col>
  </Row>
</Form>

Answer 2

在我看来，尽量避免内联样式，将className添加到每个组件（甚至从 Ant 开始。）然后在 CSS 中使用 position（看起来像你想要的边距和边距）