antd 表单布局的问题

Question

想要实现如下效果图

实际效果如下，主要是下面的textarea的问题,如何在不改变组件内部样式的情况达到上面的效果，就是label左对齐，然后textarea跟着靠左。还是说只能修改内部样式。

代码：
const TroubleDescription = props => {

const { getFieldDecorator } = props.form;
const formItemLayout = {
    labelCol: {
      xs: { span: 24 }, // * <576p
      sm: { span: 4 }, // * ≥576px
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 18 },
    },
};
return <Layout>
            <Content className={styles.content}>
                <h3 className={styles.subTitle}>故障信息描述</h3>
                <Form gutter={24} {...formItemLayout} >
                    <Row>
                        <Col xl={8} lg={8} md={8} sm={12} xs={24}>
                            <Form.Item label={'维护人:'}>
                                {
                                    getFieldDecorator('repairPeople', {
                                        rules: [
                                        {
                                            required: true,
                                            message: '请选择维护人',
                                        },
                                        ]
                                    })(<Select placeholder="请选择维护人">
                                        <Option value="1">Tom</Option>
                                        <Option value="2">Bob</Option>
                                        <Option value="3">haha</Option>
                                        <Option value="4">nana</Option>
                                    </Select>)
                                }
                            </Form.Item>
                        </Col>
                        <Col xl={8} lg={8} md={8} sm={12} xs={24}>
                            <Form.Item label={'维修时间:'}>
                                {
                                    getFieldDecorator('repairTime', {
                                        rules: [
                                        {
                                            required: true,
                                            message: '请选择维修时间',
                                        },
                                        ]
                                    })(<DatePicker placeholder='请选择维修时间' />)
                                }
                            </Form.Item>
                        </Col>
                        <Col xl={8} lg={8} md={8} sm={12} xs={24}>
                            <Form.Item label={'维修结果:'}>
                                {
                                    getFieldDecorator('repairResult', {
                                        initialValue: '',
                                        rules: [
                                        {
                                            required: true,
                                            message: '请输入维修结果',
                                        },
                                        ]
                                    })(<Input />)
                                }
                            </Form.Item>
                        </Col>
                        <Col xl={24} lg={24} md={24} sm={24} xs={24}>
                            <Form.Item label={'故障位置:'}>
                                {
                                    getFieldDecorator('errorSite', {
                                        initialValue: '',
                                        rules: [
                                        {
                                            required: true,
                                            message: '请输入故障位置',
                                        },
                                        ]
                                    })(<Textarea />)
                                }
                            </Form.Item>
                        </Col>
                        <Col xl={24} lg={24} md={24} sm={24} xs={24}>
                            <Form.Item label={'故障现象:'}>
                                {
                                    getFieldDecorator('errorSite', {
                                        initialValue: '',
                                        rules: [
                                        {
                                            required: true,
                                            message: '请输入故障现象',
                                        },
                                        ]
                                    })(<Textarea />)
                                }
                            </Form.Item>
                        </Col>
                        <Col xl={24} lg={24} md={24} sm={24} xs={24}>
                            <Form.Item label={'故障原因:'}>
                                {
                                    getFieldDecorator('errorSite', {
                                        initialValue: '',
                                        rules: [
                                        {
                                            required: true,
                                            message: '请输入故障原因',
                                        },
                                        ]
                                    })(<Textarea />)
                                }
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
            </Content>
        </Layout>

}
export default Form.create()(TroubleDescription);

Answer 1

可以到 antd 官网提问：https://github.com/ant-design...

Answer 2