Form

Basic Usage

• iForm can be used for querying or submitting data.
• The default mode is querying. In querying mode, Form displays two rows by default and other items hidden.
• the configuration of iForm is controlled by formOpts, which is a object. It includes the configuration of each form item, form layout etc. Use v-model to bind the data of the form.
• colSize prop can control the number of item in one row.
• handleSeach and handleReset events are triggered when the search button and reset button are clicked respectively.

Submit Form

• you can set formType = 'edit' to switch form to submit mode.
• in submit mode, the query and reset buttons are disappeared. You can use v-model to bind the data of the form. The submit button should be implemented by developers themselves.
• the form can also be submitted by pressing the Enter key. In this case, the handleSubmit event is triggered.

Select Options from API

Sometimes, the options of the select component are not static, but need to be fetched from the API. In this case, you can configure options attribute in fieldList prop as a string identifer. Then assign data retrieved from request to the coresponding array value, whose key is the same as aforementioned identifer in externalOptions

Validation

• Configure rules attribute in formOpts prop to set the validation rules of the form.
• The validation rules are the same as the rules of the Element Plus form component.
• the exposed function formValidate can trigger the form validation and return the validation result.

Custom Form Item

If you need to use a custom component as a form item, you can set slotName attribute in the item in fieldList prop to the name of the custom component.

API

Attributes

iForm

Name	is Required	Description	Type	Default Value
className	No	css class name	string	-
v-model	No	data of form	Object	{}
formType	No	type of form (search/sumbit)	string	search
formOpts	Yes	form configuration	Object	-
colSize	No	number of items in one row, max: 6	Number	-

iForm is a secondary encapuslation base on Form from Element plus. For description of other properties, please refer to Form

formOpts

Name	is Required	Description	Type	Default Value
labelWidth	No	width of label	string	'120px'
defaultForm	No	default data of form	Object	{}
fieldList	Yes	configuration of form items	Array	-
size	No	size of form	string	'default'
rules	No	form rules, the same as el-form rules	Object	{}
labelPosition	No	the position of label('left'/'right'/'top'), if set 'left' or right, the labelWidth prop is also required	string	'right'
externalOptions	No	dynamic options dict, it is valid when option prop in fieldList is set as a string identifier	Object	{}

fieldList

Name	is Required	Description	Type	Default Value
label	Yes	label test	string	-
value	Yes	key to the form data	string	-
disabled	No	whether the filed is disabled or not	Booelan	false
type	No	type of form item	string	''
comp	Yes	component of form item(el-input, el-select, etc)	string	-
options	No	select option of form item, it is required when comp is 'el-select', 'el-checkbox-group' or 'el-radio-group'	Array/String	-
textShow	No	whether form item displays as plain text	Boolean	false
labelRender	No	whether to custmize the label or not	Boolean	false
placeholder	No	input hint	string	-

Event

Name	Description	Parameters
handleSearch	in query mode，trigger when query buttion is clicked	formData： Object
handleReset	in query mode, trigger when reset button is clicked	-
handleSubmit	in edit mode, triggeer when enter key is pressed	formData： Object

Exposes

Name	Description	Parameters
formValidate	verify form	-
resetFields	reset form	-
clearValidate	clear form validation	-