Form 表单 | Element Plus

先查看各种示例表单的代码,找到适配的模板进行更改
查看 Form API<el-form> 元素进行调整
查看 FormItem API<el-form-item> 元素进行调整

元素

el-form

表单校验需要同时配置三个部分:

  1. <el-form :model="form" :rules="rules">:绑定表单数据和规则。
  2. <el-form-item prop="account">prop 必须对应 model 中的字段名。
  3. 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"

表单验证