在Ant-Design-Vue中的文本框的布局和标签的长度管理
1、布局行列创建使用，在form中创建列和行直接复制进即可
<a-row>
<a-col :span="8">
col-8
</a-col>
<a-col :span="8">
col-8
</a-col>
<a-col :span="8">
col-8
</a-col>
</a-row>
2、在对应的得col中复制进对应的表单内容
<a-row>
<a-col :span="8">
<a-form-item
label="bizName"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback=""
>
<a-input
placeholder="请输入bizName"
v-decorator="['bizName', {rules: [{required: true, message: '请输入bizName！'}]}]"/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item
label="entName"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback=""
>
<a-input
placeholder="请输入entName"
v-decorator="['entName', {rules: [{required: true, message: '请输入entName！'}]}]"/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item
label="coefficient"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback=""
>
<a-input
placeholder="请输入coefficient"
v-decorator="['coefficient', {rules: [{required: true, message: '请输入coefficient！'}]}]"/>
</a-form-item>
</a-col>
</a-row>
3、配置每个表单内容的label宽度和文本框的宽度
label及文本框宽度
配置项
labelCol: {
xs: {span: 24},
sm: {span: 8} //控制label的框的长度
},
wrapperCol: {
xs: {span: 24},
sm: {span: 10}//控制文本框的长度
}
4、最终效果
完成效果
