antd 表单布局的问题

想要实现如下效果图
image.png
实际效果如下,主要是下面的textarea的问题,如何在不改变组件内部样式的情况达到上面的效果,就是label左对齐,然后textarea跟着靠左。还是说只能修改内部样式。
image.png
代码:
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);

阅读 11.5k
2 个回答
新手上路,请多包涵

image.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题