2.11.1

表单 ​

表单包含 `input`、`radio`、`select`、`checkbox` 等。使用表单，您可以收集、验证和提交数据。

提示

该组件已升级为 flex 布局以取代旧的 float 布局。

基础表单 ​

它包括各种输入项，例如 `input`、`select`、`radio` 和 `checkbox`。

在每个 `form` 组件中，您都需要一个 `form-item` 字段作为输入项的容器。

活动名称
活动区域
请选择你的区域
活动时间
-
即时配送
活动类型
资源
活动形式

提示

W3C 规定

当一个表单中只有一个单行文本输入框时，用户代理（浏览器）应接受在该字段中按 Enter 键作为提交表单的请求。

为了防止这种行为，你可以在 `<el-form>` 上添加 `@submit.prevent`。

行内表单 ​

当垂直空间有限且表单相对简单时，可以将其放在一行中。

将 `inline` 属性设置为 `true`，表单将变为行内形式。

审批人
活动区域
活动区域
活动时间

对齐方式 ​

根据您的设计，有几种不同的方法来对齐您的标签元素。

您可以单独设置 `el-form-item` 的 `label-position` 2.7.7。如果该值为空，则使用 `el-form` 的 `label-position`。

`label-position` 属性决定了标签的对齐方式，可以是 `top` 或 `left`。当设置为 `top` 时，标签将位于表单字段的顶部。

表单对齐
表单项对齐
名称
活动区域
活动形式

校验 ​

表单组件允许您验证您的数据，帮助您发现并纠正错误。

只需为 `Form` 组件添加 `rules` 属性，传入验证规则，并为需要验证的特定键设置 `FormItem` 的 `prop` 属性。更多信息请参见 async-validator。

活动名称
活动区域
活动区域
活动次数
活动次数
活动时间
-
即时配送
活动地点
活动类型
资源
活动形式

自定义校验规则 ​

此示例展示了如何自定义您自己的验证规则以完成双重密码验证。

这里我们使用 `status-icon` 将验证结果以图标形式反映出来。

提示

必须调用自定义验证回调函数。更多高级用法请参见 async-validator。

添加/删除表单项 ​

除了在表单组件上一次性传入所有验证规则外，您还可以在单个表单字段上动态地传入验证规则或删除规则。

邮箱
域名0

数字校验 ​

数字校验需要在输入框的 `v-model` 绑定上添加一个 `.number` 修饰符，它用于将字符串值转换为由 Vue 提供的数字。

年龄

提示

当一个 `el-form-item` 嵌套在另一个 `el-form-item` 中时，其标签宽度将为 `0`。如果需要，您可以在该 `el-form-item` 上设置 `label-width`。

尺寸控制 ​

表单中的所有组件都从该表单继承其 `size` 属性。同样，FormItem 也有一个 `size` 属性。

如果您不希望某个组件继承其来自表单或表单项的尺寸，您仍然可以微调每个组件的 `size`。


活动名称
活动区域
请选择你的区域
活动时间
-
活动类型
资源

无障碍性 ​

当 `el-form-item` 内部只有一个输入控件（或相关的控件，如 select 或 checkbox）时，表单项的标签将自动附加到该输入控件上。但是，如果 `el-form-item` 内部有多个输入控件，该表单项将被分配 WAI-ARIA 的 group 角色。在这种情况下，您有责任为单个输入控件分配辅助标签。

全名
您的信息

表单 API ​

表单属性 ​

名称描述类型默认值
模型表单组件的数据。object—
规则表单的验证规则。object—
行内表单是否为行内形式。booleanfalse
标签位置标签的位置。如果设置为 `left` 或 `right`，则还需要 `label-width` 属性。枚举右侧
标签宽度标签的宽度，例如 `'50px'`。其所有直接子表单项将继承此值。支持 `auto`。string / number''
标签后缀标签的后缀。string''
隐藏必填星号是否隐藏必填字段标签旁的红色星号。booleanfalse
必填星号位置星号的位置。枚举left
显示消息是否显示错误消息。booleantrue
行内消息是否将错误消息与表单项内联显示。booleanfalse
状态图标是否显示指示验证结果的图标。booleanfalse
规则改变时验证当 `rules` 属性更改时是否触发验证。booleantrue
size控制此表单中组件的尺寸。枚举—
disabled是否禁用此表单中的所有组件。如果设置为 `true`，它将覆盖内部组件的 `disabled` 属性。booleanfalse
滚动到错误当验证失败时，滚动到第一个错误的表单条目。booleanfalse
滚动视图选项 2.3.2当验证失败时，它会根据 scrollIntoView 选项滚动到第一个错误项。scrollIntoView。object / booleantrue

表单事件 ​

名称描述类型
验证在表单项验证后触发Function

表单插槽 ​

名称描述子标签
default自定义默认内容表单项

表单暴露的方法 ​

名称描述类型
验证验证整个表单。接收一个回调或返回 `Promise`。Function
验证字段验证指定的字段。Function
重置字段重置指定字段并移除验证结果。Function
滚动到字段滚动到指定的字段。Function
清除验证清除所有或指定字段的验证消息。Function
字段 2.7.3获取所有字段的上下文。array
获取字段 2.10.2获取一个字段的上下文。Function

FormItem API ​

FormItem 属性 ​

名称描述类型默认值
prop`model` 的一个键。它可以是属性的路径（例如 `a.b.0` 或 `['a', 'b', '0']`）。在使用 `validate` 和 `resetFields` 方法时，该属性是必需的。string / string[]—
label标签文本。string—
标签位置 2.7.7项目标签的位置。如果设置为 `left` 或 `right`，则还需要 `label-width` 属性。默认继承 `form` 的 `label-position`。枚举''
标签宽度标签的宽度，例如 `'50px'`。支持 `'auto'`。string / number''
必填该字段是否为必填项，如果省略，将由验证规则决定。boolean—
规则表单的验证规则，参见下表，更高级的用法请参见 async-validator。object—
error字段错误消息，设置其值，字段将验证错误并立即显示此消息。string—
显示消息是否显示错误消息。booleantrue
行内消息内联样式验证消息。string / boolean''
size控制此表单项中组件的尺寸。枚举—
for与原生 label 中的 for 相同。string—
验证状态FormItem 的验证状态。枚举—

FormItemRule ​

名称描述类型默认值
trigger验证器如何触发。枚举—

提示

如果您不想根据输入事件触发验证器，请在相应的输入类型组件（`<el-input>`、`<el-radio>`、`<el-select>` 等）上将 `validate-event` 属性设置为 `false`。

FormItem 插槽 ​

名称描述类型
default表单项的内容。—
label在标签上显示的自定义内容。object
error显示验证消息的自定义内容。object

FormItem 暴露的方法 ​

名称描述类型
size表单项尺寸。object
验证消息验证消息。object
验证状态验证状态。object
验证验证表单项。Function
重置字段重置当前字段并移除验证结果。Function
清除验证移除字段的验证状态。Function

类型声明 ​

显示声明
ts
type Arrayable<T> = T | T[]

type FormValidationResult = Promise<boolean>

// ValidateFieldsError: see [async-validator](https://github.com/yiminghe/async-validator/blob/master/src/interface.ts)
type FormValidateCallback = (
  isValid: boolean,
  invalidFields?: ValidateFieldsError
) => Promise<void> | void

// RuleItem: see [async-validator](https://github.com/yiminghe/async-validator/blob/master/src/interface.ts)
interface FormItemRule extends RuleItem {
  trigger?: Arrayable<string>
}

type Primitive = null | undefined | string | number | boolean | symbol | bigint
type BrowserNativeObject = Date | FileList | File | Blob | RegExp
type IsTuple<T extends ReadonlyArray<any>> = number extends T['length']
  ? false
  : true
type ArrayMethodKey = keyof any[]
type TupleKey<T extends ReadonlyArray<any>> = Exclude<keyof T, ArrayMethodKey>
type ArrayKey = number
type PathImpl<K extends string | number, V> = V extends
  | Primitive
  | BrowserNativeObject
  ? `${K}`
  : `${K}` | `${K}.${Path<V>}`
type Path<T> = T extends ReadonlyArray<infer V>
  ? IsTuple<T> extends true
    ? {
        [K in TupleKey<T>]-?: PathImpl<Exclude<K, symbol>, T[K]>
      }[TupleKey<T>]
    : PathImpl<ArrayKey, V>
  : {
      [K in keyof T]-?: PathImpl<Exclude<K, symbol>, T[K]>
    }[keyof T]
type FieldPath<T> = T extends object ? Path<T> : never
// MaybeRef: see [@vueuse/core](https://github.com/vueuse/vueuse/blob/main/packages/shared/utils/types.ts)
// UnwrapRef: see [vue](https://github.com/vuejs/core/blob/main/packages/reactivity/src/ref.ts)
type FormRules<T extends MaybeRef<Record<string, any> | string> = string> =
  Partial<
    Record<
      UnwrapRef<T> extends string ? UnwrapRef<T> : FieldPath<UnwrapRef<T>>,
      Arrayable<FormItemRule>
    >
  >

type FormItemValidateState = typeof formItemValidateStates[number]
type FormItemProps = ExtractPropTypes<typeof formItemProps>

type FormItemContext = FormItemProps & {
  $el: HTMLDivElement | undefined
  size: ComponentSize
  validateMessage: string
  validateState: FormItemValidateState
  isGroup: boolean
  labelId: string
  inputIds: string[]
  hasLabel: boolean
  fieldValue: any
  propString: string
  addInputId: (id: string) => void
  removeInputId: (id: string) => void
  validate: (
    trigger: string,
    callback?: FormValidateCallback
  ) => FormValidationResult
  resetField(): void
  clearValidate(): void
}

来源 ​

组件 • 样式 • 文档

贡献者 ​