Form 表单

表单包含 输入框, 单选框, 下拉选择, 多选框 等用户输入的组件。 使用表单，您可以收集、验证和提交数据。

TIP

Form 组件已经从 2. x 的 Float 布局升级为 Flex 布局。

典型表单

最基础的表单包括各种输入表单项，比如input、select、radio、checkbox等。

在每一个 form 组件中，你需要一个 form-item 字段作为输入项的容器，用于获取值与验证值。

Form 表单 - 图1

  1. <template>
  2.   <el-form :model="form" label-width="120px">
  3.     <el-form-item label="Activity name">
  4.       <el-input v-model="form.name" />
  5.     </el-form-item>
  6.     <el-form-item label="Activity zone">
  7.       <el-select v-model="form.region" placeholder="please select your zone">
  8.         <el-option label="Zone one" value="shanghai" />
  9.         <el-option label="Zone two" value="beijing" />
  10.       </el-select>
  11.     </el-form-item>
  12.     <el-form-item label="Activity time">
  13.       <el-col :span="11">
  14.         <el-date-picker
  15.           v-model="form.date1"
  16.           type="date"
  17.           placeholder="Pick a date"
  18.           style="width: 100%"
  19.         />
  20.       </el-col>
  21.       <el-col :span="2" class="text-center">
  22.         <span class="text-gray-500">-</span>
  23.       </el-col>
  24.       <el-col :span="11">
  25.         <el-time-picker
  26.           v-model="form.date2"
  27.           placeholder="Pick a time"
  28.           style="width: 100%"
  29.         />
  30.       </el-col>
  31.     </el-form-item>
  32.     <el-form-item label="Instant delivery">
  33.       <el-switch v-model="form.delivery" />
  34.     </el-form-item>
  35.     <el-form-item label="Activity type">
  36.       <el-checkbox-group v-model="form.type">
  37.         <el-checkbox label="Online activities" name="type" />
  38.         <el-checkbox label="Promotion activities" name="type" />
  39.         <el-checkbox label="Offline activities" name="type" />
  40.         <el-checkbox label="Simple brand exposure" name="type" />
  41.       </el-checkbox-group>
  42.     </el-form-item>
  43.     <el-form-item label="Resources">
  44.       <el-radio-group v-model="form.resource">
  45.         <el-radio label="Sponsor" />
  46.         <el-radio label="Venue" />
  47.       </el-radio-group>
  48.     </el-form-item>
  49.     <el-form-item label="Activity form">
  50.       <el-input v-model="form.desc" type="textarea" />
  51.     </el-form-item>
  52.     <el-form-item>
  53.       <el-button type="primary" @click="onSubmit">Create</el-button>
  54.       <el-button>Cancel</el-button>
  55.     </el-form-item>
  56.   </el-form>
  57. </template>
  59. <script lang="ts" setup>
  60. import { reactive } from 'vue'
  62. // do not use same name with ref
  63. const form = reactive({
  64.   name: '',
  65.   region: '',
  66.   date1: '',
  67.   date2: '',
  68.   delivery: false,
  69.   type: [],
  70.   resource: '',
  71.   desc: '',
  72. })
  74. const onSubmit = () => {
  75.   console.log('submit!')
  76. }
  77. </script>

TIP

W3C Form 表单 - 图2 标准定义：

当一个表单中只有一个单行文本输入字段时， 用户代理人应该在该字段中接受输入作为提交表单的请求。 如果希望阻止这一默认行为，可以在 <el-form> 标签上添加 @submit.prevent。

行内表单

当垂直方向空间受限且表单较简单时，可以在一行内放置表单。

通过设置 inline 属性为 true 可以让表单域变为行内的表单域。

Form 表单 - 图3

  1. <template>
  2.   <el-form :inline="true" :model="formInline" class="demo-form-inline">
  3.     <el-form-item label="Approved by">
  4.       <el-input v-model="formInline.user" placeholder="Approved by" />
  5.     </el-form-item>
  6.     <el-form-item label="Activity zone">
  7.       <el-select v-model="formInline.region" placeholder="Activity zone">
  8.         <el-option label="Zone one" value="shanghai" />
  9.         <el-option label="Zone two" value="beijing" />
  10.       </el-select>
  11.     </el-form-item>
  12.     <el-form-item>
  13.       <el-button type="primary" @click="onSubmit">Query</el-button>
  14.     </el-form-item>
  15.   </el-form>
  16. </template>
  18. <script lang="ts" setup>
  19. import { reactive } from 'vue'
  21. const formInline = reactive({
  22.   user: '',
  23.   region: '',
  24. })
  26. const onSubmit = () => {
  27.   console.log('submit!')
  28. }
  29. </script>

对齐方式

根据你们的设计情况，来选择最佳的标签对齐方式。

通过设置 label-position 属性可以改变表单域标签的位置，可选值为 top、left， 当设为 top 时标签会置于表单域的顶部

Form 表单 - 图4

  1. <template>
  2.   <el-radio-group v-model="labelPosition" label="label position">
  3.     <el-radio-button label="left">Left</el-radio-button>
  4.     <el-radio-button label="right">Right</el-radio-button>
  5.     <el-radio-button label="top">Top</el-radio-button>
  6.   </el-radio-group>
  7.   <div style="margin: 20px" />
  8.   <el-form
  9.     :label-position="labelPosition"
  10.     label-width="100px"
  11.     :model="formLabelAlign"
  12.     style="max-width: 460px"
  13.   >
  14.     <el-form-item label="Name">
  15.       <el-input v-model="formLabelAlign.name" />
  16.     </el-form-item>
  17.     <el-form-item label="Activity zone">
  18.       <el-input v-model="formLabelAlign.region" />
  19.     </el-form-item>
  20.     <el-form-item label="Activity form">
  21.       <el-input v-model="formLabelAlign.type" />
  22.     </el-form-item>
  23.   </el-form>
  24. </template>
  26. <script lang="ts" setup>
  27. import { reactive, ref } from 'vue'
  29. const labelPosition = ref('right')
  31. const formLabelAlign = reactive({
  32.   name: '',
  33.   region: '',
  34.   type: '',
  35. })
  36. </script>

表单校验

Form 组件允许你验证用户的输入是否符合规范，来帮助你找到和纠正错误。

Form 组件提供了表单验证的功能，只需为 rules 属性传入约定的验证规则，并将 form-Item 的 prop 属性设置为需要验证的特殊键值即可。 更多高级用法可参考 async-validator。

Form 表单 - 图5

  1. <template>
  2.   <el-form
  3.     ref="ruleFormRef"
  4.     :model="ruleForm"
  5.     :rules="rules"
  6.     label-width="120px"
  7.     class="demo-ruleForm"
  8.     :size="formSize"
  9.     status-icon
  10.   >
  11.     <el-form-item label="Activity name" prop="name">
  12.       <el-input v-model="ruleForm.name" />
  13.     </el-form-item>
  14.     <el-form-item label="Activity zone" prop="region">
  15.       <el-select v-model="ruleForm.region" placeholder="Activity zone">
  16.         <el-option label="Zone one" value="shanghai" />
  17.         <el-option label="Zone two" value="beijing" />
  18.       </el-select>
  19.     </el-form-item>
  20.     <el-form-item label="Activity count" prop="count">
  21.       <el-select-v2
  22.         v-model="ruleForm.count"
  23.         placeholder="Activity count"
  24.         :options="options"
  25.       />
  26.     </el-form-item>
  27.     <el-form-item label="Activity time" required>
  28.       <el-col :span="11">
  29.         <el-form-item prop="date1">
  30.           <el-date-picker
  31.             v-model="ruleForm.date1"
  32.             type="date"
  33.             label="Pick a date"
  34.             placeholder="Pick a date"
  35.             style="width: 100%"
  36.           />
  37.         </el-form-item>
  38.       </el-col>
  39.       <el-col class="text-center" :span="2">
  40.         <span class="text-gray-500">-</span>
  41.       </el-col>
  42.       <el-col :span="11">
  43.         <el-form-item prop="date2">
  44.           <el-time-picker
  45.             v-model="ruleForm.date2"
  46.             label="Pick a time"
  47.             placeholder="Pick a time"
  48.             style="width: 100%"
  49.           />
  50.         </el-form-item>
  51.       </el-col>
  52.     </el-form-item>
  53.     <el-form-item label="Instant delivery" prop="delivery">
  54.       <el-switch v-model="ruleForm.delivery" />
  55.     </el-form-item>
  56.     <el-form-item label="Activity type" prop="type">
  57.       <el-checkbox-group v-model="ruleForm.type">
  58.         <el-checkbox label="Online activities" name="type" />
  59.         <el-checkbox label="Promotion activities" name="type" />
  60.         <el-checkbox label="Offline activities" name="type" />
  61.         <el-checkbox label="Simple brand exposure" name="type" />
  62.       </el-checkbox-group>
  63.     </el-form-item>
  64.     <el-form-item label="Resources" prop="resource">
  65.       <el-radio-group v-model="ruleForm.resource">
  66.         <el-radio label="Sponsorship" />
  67.         <el-radio label="Venue" />
  68.       </el-radio-group>
  69.     </el-form-item>
  70.     <el-form-item label="Activity form" prop="desc">
  71.       <el-input v-model="ruleForm.desc" type="textarea" />
  72.     </el-form-item>
  73.     <el-form-item>
  74.       <el-button type="primary" @click="submitForm(ruleFormRef)"
  75.         >Create</el-button
  76.       >
  77.       <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
  78.     </el-form-item>
  79.   </el-form>
  80. </template>
  82. <script lang="ts" setup>
  83. import { reactive, ref } from 'vue'
  84. import type { FormInstance, FormRules } from 'element-plus'
  86. const formSize = ref('default')
  87. const ruleFormRef = ref<FormInstance>()
  88. const ruleForm = reactive({
  89.   name: 'Hello',
  90.   region: '',
  91.   count: '',
  92.   date1: '',
  93.   date2: '',
  94.   delivery: false,
  95.   type: [],
  96.   resource: '',
  97.   desc: '',
  98. })
  100. const rules = reactive<FormRules>({
  101.   name: [
  102.     { required: true, message: 'Please input Activity name', trigger: 'blur' },
  103.     { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  104.   ],
  105.   region: [
  106.     {
  107.       required: true,
  108.       message: 'Please select Activity zone',
  109.       trigger: 'change',
  110.     },
  111.   ],
  112.   count: [
  113.     {
  114.       required: true,
  115.       message: 'Please select Activity count',
  116.       trigger: 'change',
  117.     },
  118.   ],
  119.   date1: [
  120.     {
  121.       type: 'date',
  122.       required: true,
  123.       message: 'Please pick a date',
  124.       trigger: 'change',
  125.     },
  126.   ],
  127.   date2: [
  128.     {
  129.       type: 'date',
  130.       required: true,
  131.       message: 'Please pick a time',
  132.       trigger: 'change',
  133.     },
  134.   ],
  135.   type: [
  136.     {
  137.       type: 'array',
  138.       required: true,
  139.       message: 'Please select at least one activity type',
  140.       trigger: 'change',
  141.     },
  142.   ],
  143.   resource: [
  144.     {
  145.       required: true,
  146.       message: 'Please select activity resource',
  147.       trigger: 'change',
  148.     },
  149.   ],
  150.   desc: [
  151.     { required: true, message: 'Please input activity form', trigger: 'blur' },
  152.   ],
  153. })
  155. const submitForm = async (formEl: FormInstance | undefined) => {
  156.   if (!formEl) return
  157.   await formEl.validate((valid, fields) => {
  158.     if (valid) {
  159.       console.log('submit!')
  160.     } else {
  161.       console.log('error submit!', fields)
  162.     }
  163.   })
  164. }
  166. const resetForm = (formEl: FormInstance | undefined) => {
  167.   if (!formEl) return
  168.   formEl.resetFields()
  169. }
  171. const options = Array.from({ length: 10000 }).map((_, idx) => ({
  172.   value: `${idx + 1}`,
  173.   label: `${idx + 1}`,
  174. }))
  175. </script>

自定义校验规则

这个例子中展示了如何使用自定义验证规则来完成密码的二次验证。

本例还使用status-icon属性为输入框添加了表示校验结果的反馈图标。

Form 表单 - 图6

  1. <template>
  2.   <el-form
  3.     ref="ruleFormRef"
  4.     :model="ruleForm"
  5.     status-icon
  6.     :rules="rules"
  7.     label-width="120px"
  8.     class="demo-ruleForm"
  9.   >
  10.     <el-form-item label="Password" prop="pass">
  11.       <el-input v-model="ruleForm.pass" type="password" autocomplete="off" />
  12.     </el-form-item>
  13.     <el-form-item label="Confirm" prop="checkPass">
  14.       <el-input
  15.         v-model="ruleForm.checkPass"
  16.         type="password"
  17.         autocomplete="off"
  18.       />
  19.     </el-form-item>
  20.     <el-form-item label="Age" prop="age">
  21.       <el-input v-model.number="ruleForm.age" />
  22.     </el-form-item>
  23.     <el-form-item>
  24.       <el-button type="primary" @click="submitForm(ruleFormRef)"
  25.         >Submit</el-button
  26.       >
  27.       <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
  28.     </el-form-item>
  29.   </el-form>
  30. </template>
  32. <script lang="ts" setup>
  33. import { reactive, ref } from 'vue'
  34. import type { FormInstance } from 'element-plus'
  36. const ruleFormRef = ref<FormInstance>()
  38. const checkAge = (rule: any, value: any, callback: any) => {
  39.   if (!value) {
  40.     return callback(new Error('Please input the age'))
  41.   }
  42.   setTimeout(() => {
  43.     if (!Number.isInteger(value)) {
  44.       callback(new Error('Please input digits'))
  45.     } else {
  46.       if (value < 18) {
  47.         callback(new Error('Age must be greater than 18'))
  48.       } else {
  49.         callback()
  50.       }
  51.     }
  52.   }, 1000)
  53. }
  55. const validatePass = (rule: any, value: any, callback: any) => {
  56.   if (value === '') {
  57.     callback(new Error('Please input the password'))
  58.   } else {
  59.     if (ruleForm.checkPass !== '') {
  60.       if (!ruleFormRef.value) return
  61.       ruleFormRef.value.validateField('checkPass', () => null)
  62.     }
  63.     callback()
  64.   }
  65. }
  66. const validatePass2 = (rule: any, value: any, callback: any) => {
  67.   if (value === '') {
  68.     callback(new Error('Please input the password again'))
  69.   } else if (value !== ruleForm.pass) {
  70.     callback(new Error("Two inputs don't match!"))
  71.   } else {
  72.     callback()
  73.   }
  74. }
  76. const ruleForm = reactive({
  77.   pass: '',
  78.   checkPass: '',
  79.   age: '',
  80. })
  82. const rules = reactive({
  83.   pass: [{ validator: validatePass, trigger: 'blur' }],
  84.   checkPass: [{ validator: validatePass2, trigger: 'blur' }],
  85.   age: [{ validator: checkAge, trigger: 'blur' }],
  86. })
  88. const submitForm = (formEl: FormInstance | undefined) => {
  89.   if (!formEl) return
  90.   formEl.validate((valid) => {
  91.     if (valid) {
  92.       console.log('submit!')
  93.     } else {
  94.       console.log('error submit!')
  95.       return false
  96.     }
  97.   })
  98. }
  100. const resetForm = (formEl: FormInstance | undefined) => {
  101.   if (!formEl) return
  102.   formEl.resetFields()
  103. }
  104. </script>

TIP

自定义的校验回调函数必须被调用。 更多高级用法可参考 async-validator Form 表单 - 图7 。

添加/删除表单项

除了一次通过表单组件上的所有验证规则外. 您也可以动态地通过验证规则或删除单个表单字段的规则。

Form 表单 - 图8

  1. <template>
  2.   <el-form
  3.     ref="formRef"
  4.     :model="dynamicValidateForm"
  5.     label-width="120px"
  6.     class="demo-dynamic"
  7.   >
  8.     <el-form-item
  9.       prop="email"
  10.       label="Email"
  11.       :rules="[
  12.         {
  13.           required: true,
  14.           message: 'Please input email address',
  15.           trigger: 'blur',
  16.         },
  17.         {
  18.           type: 'email',
  19.           message: 'Please input correct email address',
  20.           trigger: ['blur', 'change'],
  21.         },
  22.       ]"
  23.     >
  24.       <el-input v-model="dynamicValidateForm.email" />
  25.     </el-form-item>
  26.     <el-form-item
  27.       v-for="(domain, index) in dynamicValidateForm.domains"
  28.       :key="domain.key"
  29.       :label="'Domain' + index"
  30.       :prop="'domains.' + index + '.value'"
  31.       :rules="{
  32.         required: true,
  33.         message: 'domain can not be null',
  34.         trigger: 'blur',
  35.       }"
  36.     >
  37.       <el-input v-model="domain.value" />
  38.       <el-button class="mt-2" @click.prevent="removeDomain(domain)"
  39.         >Delete</el-button
  40.       >
  41.     </el-form-item>
  42.     <el-form-item>
  43.       <el-button type="primary" @click="submitForm(formRef)">Submit</el-button>
  44.       <el-button @click="addDomain">New domain</el-button>
  45.       <el-button @click="resetForm(formRef)">Reset</el-button>
  46.     </el-form-item>
  47.   </el-form>
  48. </template>
  50. <script lang="ts" setup>
  51. import { reactive, ref } from 'vue'
  52. import type { FormInstance } from 'element-plus'
  54. const formRef = ref<FormInstance>()
  55. const dynamicValidateForm = reactive<{
  56.   domains: DomainItem[]
  57.   email: string
  58. }>({
  59.   domains: [
  60.     {
  61.       key: 1,
  62.       value: '',
  63.     },
  64.   ],
  65.   email: '',
  66. })
  68. interface DomainItem {
  69.   key: number
  70.   value: string
  71. }
  73. const removeDomain = (item: DomainItem) => {
  74.   const index = dynamicValidateForm.domains.indexOf(item)
  75.   if (index !== -1) {
  76.     dynamicValidateForm.domains.splice(index, 1)
  77.   }
  78. }
  80. const addDomain = () => {
  81.   dynamicValidateForm.domains.push({
  82.     key: Date.now(),
  83.     value: '',
  84.   })
  85. }
  87. const submitForm = (formEl: FormInstance | undefined) => {
  88.   if (!formEl) return
  89.   formEl.validate((valid) => {
  90.     if (valid) {
  91.       console.log('submit!')
  92.     } else {
  93.       console.log('error submit!')
  94.       return false
  95.     }
  96.   })
  97. }
  99. const resetForm = (formEl: FormInstance | undefined) => {
  100.   if (!formEl) return
  101.   formEl.resetFields()
  102. }
  103. </script>

数字类型验证

数字类型的验证需要在 v-model 处加上 .number 的修饰符，这是 Vue 自身提供的用于将绑定值转化为 number 类型的修饰符。

Form 表单 - 图9

  1. <template>
  2.   <el-form
  3.     ref="formRef"
  4.     :model="numberValidateForm"
  5.     label-width="100px"
  6.     class="demo-ruleForm"
  7.   >
  8.     <el-form-item
  9.       label="age"
  10.       prop="age"
  11.       :rules="[
  12.         { required: true, message: 'age is required' },
  13.         { type: 'number', message: 'age must be a number' },
  14.       ]"
  15.     >
  16.       <el-input
  17.         v-model.number="numberValidateForm.age"
  18.         type="text"
  19.         autocomplete="off"
  20.       />
  21.     </el-form-item>
  22.     <el-form-item>
  23.       <el-button type="primary" @click="submitForm(formRef)">Submit</el-button>
  24.       <el-button @click="resetForm(formRef)">Reset</el-button>
  25.     </el-form-item>
  26.   </el-form>
  27. </template>
  29. <script lang="ts" setup>
  30. import { reactive, ref } from 'vue'
  31. import type { FormInstance } from 'element-plus'
  33. const formRef = ref<FormInstance>()
  35. const numberValidateForm = reactive({
  36.   age: '',
  37. })
  39. const submitForm = (formEl: FormInstance | undefined) => {
  40.   if (!formEl) return
  41.   formEl.validate((valid) => {
  42.     if (valid) {
  43.       console.log('submit!')
  44.     } else {
  45.       console.log('error submit!')
  46.       return false
  47.     }
  48.   })
  49. }
  51. const resetForm = (formEl: FormInstance | undefined) => {
  52.   if (!formEl) return
  53.   formEl.resetFields()
  54. }
  55. </script>

TIP

当一个 el-form-item 嵌套在另一个 el-form-item时，其标签宽度将是 0。 如果需要可以为 el-form-item 单独设置 label-width 属性。

尺寸控制

表单中的所有子组件都继承了该表单的 size 属性。 同样，form-item 也有一个 size 属性。

如果希望某个表单项或某个表单组件的尺寸不同于 Form 上的 size 属性，直接为这个表单项或表单组件设置自己的 size 属性即可。

Form 表单 - 图10

  1. <template>
  2.   <div>
  3.     <el-radio-group v-model="size" label="size control">
  4.       <el-radio-button label="large">large</el-radio-button>
  5.       <el-radio-button label="default">default</el-radio-button>
  6.       <el-radio-button label="small">small</el-radio-button>
  7.     </el-radio-group>
  8.     <el-radio-group v-model="labelPosition" label="position control">
  9.       <el-radio-button label="left">Left</el-radio-button>
  10.       <el-radio-button label="right">Right</el-radio-button>
  11.       <el-radio-button label="top">Top</el-radio-button>
  12.     </el-radio-group>
  13.   </div>
  14.   <br />
  15.   <el-form
  16.     ref="form"
  17.     :model="sizeForm"
  18.     label-width="auto"
  19.     :label-position="labelPosition"
  20.     :size="size"
  21.   >
  22.     <el-form-item label="Activity name">
  23.       <el-input v-model="sizeForm.name" />
  24.     </el-form-item>
  25.     <el-form-item label="Activity zone">
  26.       <el-select
  27.         v-model="sizeForm.region"
  28.         placeholder="please select your zone"
  29.       >
  30.         <el-option label="Zone one" value="shanghai" />
  31.         <el-option label="Zone two" value="beijing" />
  32.       </el-select>
  33.     </el-form-item>
  34.     <el-form-item label="Activity time">
  35.       <el-col :span="11">
  36.         <el-date-picker
  37.           v-model="sizeForm.date1"
  38.           type="date"
  39.           label="Pick a date"
  40.           placeholder="Pick a date"
  41.           style="width: 100%"
  42.         />
  43.       </el-col>
  44.       <el-col class="text-center" :span="1" style="margin: 0 0.5rem">-</el-col>
  45.       <el-col :span="11">
  46.         <el-time-picker
  47.           v-model="sizeForm.date2"
  48.           label="Pick a time"
  49.           placeholder="Pick a time"
  50.           style="width: 100%"
  51.         />
  52.       </el-col>
  53.     </el-form-item>
  54.     <el-form-item label="Activity type">
  55.       <el-checkbox-group v-model="sizeForm.type">
  56.         <el-checkbox-button label="Online activities" name="type" />
  57.         <el-checkbox-button label="Promotion activities" name="type" />
  58.       </el-checkbox-group>
  59.     </el-form-item>
  60.     <el-form-item label="Resources">
  61.       <el-radio-group v-model="sizeForm.resource">
  62.         <el-radio border label="Sponsor" />
  63.         <el-radio border label="Venue" />
  64.       </el-radio-group>
  65.     </el-form-item>
  66.     <el-form-item>
  67.       <el-button type="primary" @click="onSubmit">Create</el-button>
  68.       <el-button>Cancel</el-button>
  69.     </el-form-item>
  70.   </el-form>
  71. </template>
  73. <script lang="ts" setup>
  74. import { reactive, ref } from 'vue'
  76. const size = ref('default')
  77. const labelPosition = ref('right')
  79. const sizeForm = reactive({
  80.   name: '',
  81.   region: '',
  82.   date1: '',
  83.   date2: '',
  84.   delivery: false,
  85.   type: [],
  86.   resource: '',
  87.   desc: '',
  88. })
  90. function onSubmit() {
  91.   console.log('submit!')
  92. }
  93. </script>
  95. <style>
  96. .el-radio-group {
  97.   margin-right: 12px;
  98. }
  99. </style>

无障碍

当在 el-form-item 内只有一个输入框（或相关的控制部件，如选择或复选框），表单项的标签将自动附加在那个输入框上。 然而，如果同时有多个输入框在 el-form-item内， 表单项将被分配为 WAI-ARIA Form 表单 - 图11 组 Form 表单 - 图12 的角色。 在这种情况下，需要手动给每个 input 指定访问标签。

Form 表单 - 图13

  1. <template>
  2.   <el-form label-position="left" label-width="150px" style="max-width: 460px">
  3.     <el-space fill>
  4.       <el-alert type="info" show-icon :closable="false">
  5.         <p>"Full Name" label is automatically attached to the input:</p>
  6.       </el-alert>
  7.       <el-form-item label="Full Name">
  8.         <el-input v-model="formAccessibility.fullName" />
  9.       </el-form-item>
  10.     </el-space>
  11.     <el-space fill>
  12.       <el-alert type="info" show-icon :closable="false">
  13.         <p>
  14.           "Your Information" serves as a label for the group of inputs. <br />
  15.           You must specify labels on the individal inputs. Placeholders are not
  16.           replacements for using the "label" attribute.
  17.         </p>
  18.       </el-alert>
  19.       <el-form-item label="Your Information">
  20.         <el-row :gutter="20">
  21.           <el-col :span="12">
  22.             <el-input
  23.               v-model="formAccessibility.firstName"
  24.               label="First Name"
  25.               placeholder="First Name"
  26.             />
  27.           </el-col>
  28.           <el-col :span="12">
  29.             <el-input
  30.               v-model="formAccessibility.lastName"
  31.               label="Last Name"
  32.               placeholder="Last Name"
  33.             />
  34.           </el-col>
  35.         </el-row>
  36.       </el-form-item>
  37.     </el-space>
  38.   </el-form>
  39. </template>
  41. <script lang="ts" setup>
  42. import { reactive } from 'vue'
  44. const formAccessibility = reactive({
  45.   fullName: '',
  46.   firstName: '',
  47.   lastName: '',
  48. })
  49. </script>

表单 API

Form 属性

属性说明类型默认值
model表单数据对象Record<string, any>—
rules表单验证规则FormRules—
inline行内表单模式booleanfalse
label-position表单域标签的位置， 当设置为 left 或 right 时，则也需要设置 label-width 属性‘left’ | ‘right’ | ‘top’‘right’
label-width标签的长度，例如 ‘50px’。 作为 Form 直接子元素的 form-item 会继承该值。 可以使用 auto。string | number—
label-suffix表单域标签的后缀string—
hide-required-asterisk是否显示必填字段的标签旁边的红色星号booleanfalse
require-asterisk-position星号的位置。‘left’ | ‘right’‘left’
show-message是否显示校验错误信息booleantrue
inline-message是否以行内形式展示校验信息booleanfalse
status-icon是否在输入框中显示校验结果反馈图标booleanfalse
validate-on-rule-change是否在 rules 属性改变后立即触发一次验证booleantrue
size用于控制该表单内组件的尺寸‘large’ | ‘default’ | ‘small’—
disabled是否禁用该表单内的所有组件。 如果设置为 true, 它将覆盖内部组件的 disabled 属性booleanfalse
scroll-to-error当校验失败时，滚动到第一个错误表单项booleanfalse

Form 方法

方法名说明类型
validate对整个表单的内容进行验证。 接收一个回调函数，或返回 Promise。(callback?: (isValid: boolean, invalidFields?: ValidateFieldsError) => void) => Promise<void>
validateField验证具体的某个字段。(props?: Arrayable<FormItemProp>, callback?: (isValid: boolean, invalidFields?: ValidateFieldsError) => void) => Promise<void>
resetFields重置该表单项，将其值重置为初始值，并移除校验结果(props?: Arrayable<FormItemProp>) => void
scrollToField滚动到指定的字段(prop: FormItemProp) => void
clearValidate清理某个字段的表单验证信息。(props?: Arrayable<FormItemProp>) => void

Form 事件

事件名称说明回调参数
validate任一表单项被校验后触发(prop: FormItemProp, isValid: boolean, message: string) => void

Form 插槽

插槽名说明子标签
-自定义默认内容FormItem

表单项目 API

Form Item 属性

属性说明类型默认值
propmodel 的键名。 它可以是一个路径数组(例如 [‘a’, ‘b’, 0])。 在定义了 validate、resetFields 的方法时，该属性是必填的string | string[]—
label标签文本string—
label-width标签宽度，例如 ‘50px’。 可以使用 auto。string | number—
required是否为必填项，如不设置，则会根据校验规则确认booleanfalse
rules表单验证规则, 具体配置见下表, 更多内容可以参考 async-validator Form 表单 - 图14FormItemRule | FormItemRule[]—
error表单域验证错误时的提示信息。设置该值会导致表单验证状态变为 error，并显示该错误信息。string—
show-message是否显示校验错误信息booleantrue
inline-message是否在行内显示校验信息booleanfalse
size用于控制该表单域下组件的默认尺寸‘large’ | ‘default’ | ‘small’‘default’

Form Item 规则

名称说明类型默认值
trigger验证逻辑的触发方式‘blur’ | ‘change’—

Form Item 插槽

插槽名说明插槽作用域
—表单的内容。—
label标签位置显示的内容{ label }
error验证错误信息的显示内容{ error }

Form Item 方法

方法名说明类型
resetField对该表单项进行重置，将其值重置为初始值并移除校验结果() => void
clearValidate移除该表单项的校验结果() => void

源代码

组件 Form 表单 - 图15 • 文档 Form 表单 - 图16

贡献者

Form 表单 - 图17 三咲智子

Form 表单 - 图18 云游君

Form 表单 - 图19 JeremyWuuuuu

Form 表单 - 图20 Delyan Haralanov

Form 表单 - 图21 btea

Form 表单 - 图22 류한경

Form 表单 - 图23 msidolphin

Form 表单 - 图24 Xc

Form 表单 - 图25 kooriookami

Form 表单 - 图26 Zhongxiang Wang

Form 表单 - 图27 C.Y.Kun

Form 表单 - 图28 Aex

Form 表单 - 图29 wangbincyzj

Form 表单 - 图30 921

Form 表单 - 图31 hminghe

Form 表单 - 图32 zz

Form 表单 - 图33 Hefty

Form 表单 - 图34 opengraphica

Form 表单 - 图35 LYlanfeng

Form 表单 - 图36 ntnyq

Form 表单 - 图37 辛宝Otto

Form 表单 - 图38 波比小金刚

Form 表单 - 图39 Herrington Darkholme

Form 表单 - 图40 Robert Schönthal

Form 表单 - 图41 SongWuKong

Form 表单 - 图42 Taosh

Form 表单 - 图43 bqy_fe

Form 表单 - 图44 Ryan2128

Form 表单 - 图45 Alan Wang

Form 表单 - 图46 qige2016

Form 表单 - 图47 on the field of hope

Form 表单 - 图48 Hades-li

Form 表单 - 图49 achin797

Form 表单 - 图50 啝裳

Form 表单 - 图51 Soul

Form 表单 - 图52 qiang