【react】antd-Form表单横向排布

效果图：

实现代码：

方法一：

  //------------------------------------------data
  const [form] = Form.useForm();
  const formRef = useRef();
  const itemLayout = {
    labelCol: {
      span: 5,
    },
    wrapperCol: {
      span: 19,
    },
  };
  //------------------------------------------function
  const onFinish = (values) => {
    console.log("Success:", values);
  };
  const onReset = () => {
    form.resetFields();
  };
  //------------------------------------------html
        <Form form={form} ref={formRef} name="search-form" initialValues={{}} onFinish={onFinish}>
          <Row>
            <Col span={6}>
              <Form.Item name="productId" label="产品ID" {...itemLayout}>
                <Input />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item name="productName" label="产品名称" {...itemLayout}>
                <Input />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item name="industry" label="所属品类" {...itemLayout}>
                <Input />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item name="eqType" label="设备类型" {...itemLayout}>
                <Input />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item name="agreeType" label="协议类型" {...itemLayout}>
                <Input />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item name="creatTime" label="创建时间" {...itemLayout}>
                <Input />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item {...itemLayout}>
                <Button type="primary" htmlType="submit">
                  查询
                </Button>
                <Button htmlType="button" onClick={onReset}>
                  重置
                </Button>
              </Form.Item>
            </Col>
          </Row>
        </Form>

方法二：