VForm

VForm is a configuration-driven form component built on top of el-form. It renders form fields from a form-items array, supports built-in submit / reset buttons, and exposes validation helpers for parent components.

Basic Usage

Basic form with form-items configuration.

Inline Layout

Set inline to display form fields in a row.

With Buttons

Set show-button to display the built-in submit and reset buttons.

Validation

Use rules on the form or field-level validation options in form-items.

Behavior Notes

Prefer v-model as the main data source. model is also supported, but using both at the same time can make updates harder to reason about.
show-button controls the built-in action row. Use the buttonArea slot to replace the default submit / reset buttons.
auto-submit-on-enter only submits when the pressed target is an input element. It intentionally does not block textarea line breaks.
default-value initializes a field and is restored again when doReset() runs.
required and reg on a form item generate validation rules automatically. message-with-prop prepends the field label to the generated message.
For built-in el-input, the component applies a default maxlength of 256, or 1024 when type="textarea", unless you override it in attrs.
Built-in element shortcuts include el-input, el-input-number, el-select, el-checkbox, el-date-picker, and el-switch. Other component names are rendered dynamically as provided.

API

VForm Attributes

Name	Description	Type	Default
model-value / v-model	form data object	`object`	`{}`
model	alternative form data object source	`object`	`{}`
form-items	form item configuration list	`array`	`[]`
rules	extra validation rules passed to the inner `el-form`	`object`	`{}`
inline	whether to render as an inline form	`boolean`	`true`
label-position	form label position	`enum`	`'right'`
label-width	default label width for generated form items	`string` / `number`	`'160px'`
input-width	default input width for generated controls	`string` / `number`	`'240px'`
class-name	custom class name appended to the root `.v-form`	`string`	`''`
size	size of inner form controls	`enum`	`''`
disabled	whether to disable the whole form	`boolean`	`false`
auto-submit-on-enter	submit the form when Enter is pressed in an input element	`boolean`	`false`
show-button	whether to show the built-in action buttons	`boolean`	`false`
show-submit-button	whether to show the built-in submit button	`boolean`	`true`
show-reset-button	whether to show the built-in reset button	`boolean`	`true`

FormItem Configuration

Name	Description	Type	Default
prop	field key	`string`	—
label	field label	`string`	—
label-render	custom label renderer for the `el-form-item` label slot	`function`	—
label-width	label width for the current field	`string` / `number`	—
element	rendered control or component name	`string`	`'el-input'`
attrs	attributes / props forwarded to the rendered control	`object`	—
item-props	props forwarded to the wrapping `el-form-item`	`object`	—
rules	validation rules used by the current field	`array`	—
title	`title` attribute passed to `el-form-item`	`string`	—
disabled	whether to disable the current field	`boolean`	`false`
input-width	width of the current rendered control	`string` / `number`	—
options	option list used by `el-select`	`array`	—
render	custom renderer that replaces the built-in control	`function`	—
formatter	formatter applied before committing a changed value	`function`	—
type	extra control type such as input `type` or textarea mode	`string`	—
auto-submit-on-enter	emit `value-change` with action `enter` when Enter is pressed in supported inputs	`boolean`	`false`
replace-reg	remove matching characters during input synchronization	`RegExp`	—
required	generate a built-in required rule	`boolean`	`false`
reg	generate a built-in pattern validation rule	`RegExp`	—
message-with-prop	prepend the field label to generated required / pattern messages	`boolean`	`false`
default-value	initial value for the field and reset target used by `doReset()`	`any`	—
hide	whether to skip rendering the current field	`boolean`	`false`

Extra fields on each form item are forwarded to the rendered control as component props / attributes. Use this for settings such as placeholder, clearable, filterable, min, max, format, and similar control-specific options.

VForm Events

Name	Description	Type
update:model-value	emitted when the form model changes	`function`
value-change	emitted when a field value changes	`function`
submit	emitted after validation succeeds	`function`
reset	emitted after the built-in reset logic runs	`function`
throw-form-el-ref	emitted on mount with the inner `el-form` instance reference	`function`

VForm Slots

Name	Description
formHeader	custom content rendered before the generated form items; slot props: `{ formModel }`
default	custom content rendered after the generated form items; slot props: none
formFooter	custom content rendered after the default slot; slot props: `{ formModel }`
buttonArea	custom action area that replaces the built-in buttons; slot props: `{ formModel }`

Exposes

Name	Description	Type
validate	validate the inner `el-form`; resolves on success and rejects on failure	`function`
clearValidate	clear validation state for all fields or the specified fields	`function`
handleSubmit	run validation and emit `submit`; returns the form model when valid	`function`
doReset	reset configured fields to `default-value` or remove their keys, then emit `reset`	`function`

Source

Docs

EditCell

FormDialog

VForm ​

Basic Usage ​

Inline Layout ​

With Buttons ​

Validation ​

Behavior Notes ​

API ​

VForm Attributes ​

FormItem Configuration ​

VForm Events ​

VForm Slots ​

Exposes ​

Source ​