【ant design vue】 表单

 ref,:model="",rules常见，说下ant design vue表单特有的：

<a-form-model ref="form" :model="form" :rules="rules" v-bind="layout" class="form">
       <a-form-model-item has-feedback label="角色名称" prop="roleName">
             <a-input v-model="form.name" autocomplete="off" placeholder="请输入名称" />
       </a-form-model-item>
       <a-form-model-item label="备注：" prop="description">
              <a-textarea v-model="form.description" placeholder="请输入备注信息" :rows="4" />
       </a-form-model-item>
</a-form-model> 

 

1.使用a-form-model表单

官网提供了两种表单，但这里建议使用a-form-model表单，更贴近elementui的写法，更简单

 

2.v-bind="layout" 调整表单及其组件的位置

labelCol调整输入框前面文字占多少列

wrapperCol调整输入框占多少列 

//声明在data(){}中
layout:{
    labelCol: { span: 8 },
    wrapperCol: { span: 6 }
}

3.has-feedback

对校验结果进行反馈，显示效果如图所示：