antd-form表单调整布局

form表单布局

1.在Form组件中使用formItemLayout,全局使用

`

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 8 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};

<Form form={form} {...formItemLayout} validateTrigger="onBlur"></Form>

`

2.在Form组件中单独调整某一个布局，需要配合Row和Col进行使用，xs和xm是适配不同分辨率，labelCol是lable占据的宽度，wrapperCol是后面内容占据的宽度，通过Col 用span进行调整每一个Col占据多大

`

 const formItemInputLayout = {
    labelCol: {
      xs: { span: 4 },
      sm: { span: 4 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 18 },
    },
  };


     <Row>
      <Col span={20}>
        <Form.Item
          label="异常收集语句"
          rules={[{ required: true }]}
          style={{ textAlign: 'left' }}
          {...formItemInputLayout}
        >
          <TextArea rows={3} disabled maxLength={200} value={collect} />
        </Form.Item>
      </Col>
      <Col span={4}>
        <Form.Item>
          <Button onClick={selectButton} type="primary">
            测试1
          </Button>
        </Form.Item>
      </Col>
    </Row>

`