想要实现如下效果图
实际效果如下,主要是下面的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
故障信息描述
{
getFieldDecorator('repairPeople', {
rules: [
{
required: true,
message: '请选择维护人',
},
]
})(
Tom
Bob
haha
nana
)
}
{
getFieldDecorator('repairTime', {
rules: [
{
required: true,
message: '请选择维修时间',
},
]
})()
}
{
getFieldDecorator('repairResult', {
initialValue: '',
rules: [
{
required: true,
message: '请输入维修结果',
},
]
})()
}
{
getFieldDecorator('errorSite', {
initialValue: '',
rules: [
{
required: true,
message: '请输入故障位置',
},
]
})()
}
{
getFieldDecorator('errorSite', {
initialValue: '',
rules: [
{
required: true,
message: '请输入故障现象',
},
]
})()
}
{
getFieldDecorator('errorSite', {
initialValue: '',
rules: [
{
required: true,
message: '请输入故障原因',
},
]
})()
}
}
export default Form.create()(TroubleDescription);