先查看各种示例表单的代码,找到适配的模板进行更改
查看 Form API 对 <el-form> 元素进行调整
查看 FormItem API 对 <el-form-item> 元素进行调整
元素
el-form
表单校验需要同时配置三个部分:
<el-form :model="form" :rules="rules">:绑定表单数据和规则。<el-form-item prop="account">:prop必须对应model中的字段名。rules.account:值是一个规则对象数组,多个规则会依次校验。
el-form-item
主要是 prop 属性。它使用 <el-form> 的 model 对应变量键值,告诉表单该项校验哪个字段。
<el-form :model="form" :rules="rules">
<el-form-item label="账号" prop="account">
<el-input v-model="form.account" />
</el-form-item>
</el-form>嵌套字段使用点号路径,例如 prop="user.email";动态数组可以使用 prop="domains.0.value"。