antvue 有赞布局_Ant Design Vue的表单布局

在Ant-Design-Vue中的文本框的布局和标签的长度管理

1、布局行列创建使用，在form中创建列和行直接复制进即可

col-8

col-8

col-8

2、在对应的得col中复制进对应的表单内容

label="bizName"

:labelCol="labelCol"

:wrapperCol="wrapperCol"

has-feedback=""

>

placeholder="请输入bizName"

v-decorator="['bizName', {rules: [{required: true, message: '请输入bizName！'}]}]"/>

label="entName"

:labelCol="labelCol"

:wrapperCol="wrapperCol"

has-feedback=""

>

placeholder="请输入entName"

v-decorator="['entName', {rules: [{required: true, message: '请输入entName！'}]}]"/>

label="coefficient"

:labelCol="labelCol"

:wrapperCol="wrapperCol"

has-feedback=""

>

placeholder="请输入coefficient"

v-decorator="['coefficient', {rules: [{required: true, message: '请输入coefficient！'}]}]"/>

3、配置每个表单内容的label宽度和文本框的宽度

label及文本框宽度

配置项

labelCol: {

xs: {span: 24},

sm: {span: 8} //控制label的框的长度

},

wrapperCol: {

xs: {span: 24},

sm: {span: 10}//控制文本框的长度

}

4、最终效果

完成效果