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
对校验结果进行反馈,显示效果如图所示: