Antd:实现form label文字左/右对齐

一、设置文字以冒号分割右对齐

类似下面这种情况

代码：

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 7 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 17 },
  },
};

二、设置文字以冒号分割左对齐

结构如下：

代码：

const formItemLayout = {
  labelCol: {
    flex: '100px',
  },
  wrapperCol: {
    flex: '1',  //注意这个地方要用字符串，因为antd可能有自己的转换规则，后续可以了解一下
    // flex: '1' === flex:'1 1 0%'  
    // flex: 1   === flex:'1 1 auto'  //这个会使input框出错
  },
};

还需要指定form

labelAlign="left"
labelWrap //是否换行

这篇好文章是转载于：学新通技术网