el-form-renderer
Form renderer is based on element-ui. It inherits all of the element's attribute definitions completely and extends them briefly. So users can render a complete element form by using a piece of preset data.
Quick start
// Step1: Make sure you have properly installed element-ui and used it correctly. // Step2: Installyarn add el-form-renderer // Step3: In the .vue file that needs the renderer
Props
-
Support all attributes on el-form.
-
disabled
[Boolean] Settrue
to disable all atomic forms. If theelement-ui
version is still below2.1.0
, it is still compatible. -
content
[ObjectArray] Define the contents of the form, eachObject
represents an atomic form (such asel-input, el-select, ...
), All attributes on theel-form-item
are declared here, and attributes on theel-input
etc. are declared on the$el
attribute. There are other attributes on the Object such as:$id, $type, $default,$enableWhen[optional], $options[optional], $attrs[optional]
.
// content example $id: "form1" // Each atomic form uses an id to store its value, be careful not to repeat $type: "input" // Type, all the form types provided by element, like el-xxx $enableWhen: form2: 'beijing' // Optional attribute, which means that the this atomic form will display when form2's value is beijing $attrs: 'data-name': 'form1' // Optional attribute, wording follows the Render function specification of Vue label: "Input" // A property on the el-form-item $default: "default value" rules: required: true message: 'Please enter the name of the activity name' trigger: 'blur' // A property on the el-form-item $id: "form2" $type: "select" label: "Select" // $el: Used to define the properties of a specific atomic form (el-select in this case) $el: placeholder: "Please select your zone" // $options: Each atomic form with Selection Capabilities use this to define options. (such as: select, radio-group, radio-button, checkbox-group, checkbox-button, etc.) $options: label: 'Zone one' value: 'shanghai' label: 'Zone two' value: 'beijing'
In addition, we added an optional value to the $type
attribute: group
, which can be used to create more complex data types:
// This example will get the object data structure:// group1: {// input1: '',// input2: ''// } $id: "group1" // Follow the principle of the same level of ID is not repeated, essentially equivalent to the object's key $type: "group" label: "object data example" $items: $id: "input1" $type: "input" label: "input1" $default: "default value" $id: "input2" $type: "input" label: "input2" $default: "default value"
Methods
-
Supports all methods on el-form.
-
Other Methods:
Method Name | Description | Parameters |
---|---|---|
getFormValue | Get the value of the current form | - |
updateValue | Update form value manually | ({ id, value }) |
Slot
- You can insert a custom
VNode
at the end of the form by using the defaultslot
.