MaForm
A Form component based on the secondary encapsulation of Element plus, supporting all native form parameters, events, slots, and syntax. It also supports configuration-based implementation. Additionally, it supports layout planning for forms based on el-row and el-space.
Note
Since it fully supports and is compatible with all parameters, events, and slots of the native el-form, only the extended parameters are discussed here.
For official form parameters, please refer to the Element plus official documentation.
Configuration-based Usage
Template-based Usage
Getting Component and el-form-item Ref
Tip
This method is for configuration form. In template, you can define ref yourself.
Props
| Parameter | Description | Type | Ele-Official Documentation | Version |
|---|---|---|---|---|
v-model | ma-form data, two-way binding | MaModel | - | 1.0.0 |
options | el-form parameters and extended parameters | MaFormOptions | Form Attributes | 1.0.0 |
items | ma-form-item parameters | MaFormItem[] | - | 1.0.0 |
ExtraProps
Note
These are the extended parameters of ma-form for el-form.
| Parameter | Description | Type | Default | Version |
|---|---|---|---|---|
containerClass | Form container class name | string | - | 1.0.0 |
loading | Whether to enable loading animation | boolean | false | 1.0.0 |
loadingConfig | Loading animation related configuration | LoadingConfig | - | 1.0.0 |
layout | Hover to view | flex, grid | flex | 1.0.0 |
grid | Hover to view | el-space documentation | - | 1.0.0 |
flex | Hover to view | el-row documentation | - | 1.0.0 |
footerSlot | Hover to view | () => {} | - | 1.0.0 |
LoadingConfig Description
| Parameter | Description | Type | Default | Version |
|---|---|---|---|---|
text | Loading text displayed below the loading icon | string | - | 1.0.0 |
spinner | Custom loading icon | string | - | 1.0.0 |
svg | Custom svg loading icon | string | - | 1.0.0 |
viewBox | Size of the loading icon | string | - | 1.0.0 |
background | Background mask color | string | - | 1.0.0 |
customClass | Custom class name | string | - | 1.0.0 |
MaFormItem
| Parameter | Description | Type | Default | Version |
|---|---|---|---|---|
label | Enhanced native parameter, added support for function type | string, () => string | - | 1.0.0 |
prop | Enhanced native parameter, added support for function type | string, () => string | - | 1.0.0 |
hide | Hover to view | Hover to view | false | 1.0.0 |
show | Hover to view | Hover to view | true | 1.0.0 |
cols | Effective when options.layout is flex | el-col documentation | - | 1.0.0 |
itemProps | el-form-item native properties | Form Item Attributes | - | 1.0.0 |
itemSlots | el-form-item native slots | Form Item Slots | - | 1.0.0 |
render | Render component: Hover to view | string, (data) => any | - | 1.0.0 |
renderProps | props properties of the rendered component | Record<string, any> | - | 1.0.0 |
renderSlots | Slots of the rendered component | Record<string, (...args) => {}> | - | 1.0.0 |
Slot
| Name | Description | Parameters |
|---|---|---|
default | Default slot, can write native tags <el-form-item>, configuration method automatically invalid | - |
footer | Form footer slot | - |
Expose
| Name | Description | Parameters | Return Value |
|---|---|---|---|
setLoadingState() | Set form loading state | (boolean) | - |
setOptions() | Set ma-form configuration | (MaFormOptions) | - |
getOptions() | Get ma-form configuration | - | MaFormOptions |
setItems() | Set form items | (MaFormItem[]) | - |
getItems() | Get form items | - | MaFormItem[] |
appendItem() | Append form item | (MaFormItem) | - |
removeItem() | Remove form item | (prop: string) | - |
getItemByProp() | Get form item by prop | (prop: string) | MaFormItem |
isMobileState() | Check if it is mobile mode | - | boolean |
getElFormRef() | Get el-form Ref | - | El-Form |