Everybody is good! My name is Dai Xiangtian

QQ group: 602504799

If do not understand, can add QQ group consulting understanding

yc-dynamic-form

Introduction

Editor: Dai Xiangtian/White Seal East

Updated On August 8, 2021

Dynamic form Penguin Colony: 877965995

Official Api documentation address: www.yangchan.work/yc-dynamic-…

advantages

  • Dynamic forms can be generated using only configuration information, and most business requirements can be met

  • Implement a set of configuration compatible with multiple sets of UI, by configuring the mapping table compatible with custom form components and most of the UI library form components such as:

  • Form configuration items can be dynamically modified

  • Support for custom components and custom event extensions

  • Support data filling/data acquisition interception processing

  • Supports configuration functions in which this calls built-in form events and global events (this points to the built-in form, which is under vUE)

  • Form built-in events can be invoked chained

extension

  • Developers can add their own custom key names to the configuration information to implement the functionality. It is a good foundation for secondary packaging.

NPM install

npm install yc-dynamic-form
Copy the code

use

import YcDynamicForm from 'yc-dynamic-form'
Vue.use(YcDynamicForm)
Copy the code
<template> <YcDynamicForm :gutter="30" :config="config" :mapping="mapping" :format="format" /> </template> <script> import YcDynamicForm from "yc-dynamic-form"; import * as elementUI from "./mapping/element-mapping.js"; export default { components: {YcDynamicForm}, data(){ return { mapping: elementUI, format: elementUI.format, config: [{children: [{label: 'name', type: 'input, prop:' name '}, {label: 'age, type:' input, prop: 'age'},]}]}}} < / script >Copy the code

Attributes

parameter instructions type An optional value The default value
config Configuration information for the form array – []
rules Effect rules, specific reference to the corresponding UI framework object – {}
gutter Default spacing number – null
layout Form layout, according to your choice of UI frame relative layout parameters string – null
mapping The mapping table object – {}
format Data formatting interceptors: set & get object – –
parentName The parent of
o p t i o n s . n a m e Value is used to get the corresponding parent and make the corresponding parent function call. This parameter is needed to prevent dynamic forms in some cases The options.name value is used to get the corresponding parent and make the corresponding parent function call. This parameter is needed to prevent dynamic forms in some cases Parent is nested multiple layers, resulting in the fetch
p a r e n t . Not the right Parent, incorrect parent		 string – –

Mapping

parameter instructions Is not an option type
componentMapping Component mapping configuration information (key-value pairs). The key name is the custom component name, value: the actual component name. For example: {‘input’: ‘el-ipnut’} is object
modelMapping Model mapping table (key-value pairs). Value: componentMapping key name array [] Due to the different data binding methods of different UI frameworks, some components trigger models through change, while others trigger models through input. {‘ change ‘: []} is object
defaultValueMap Component defaults (key-value pairs). The key name is the key name of componentMapping. Value: default value. For example: {‘ input ‘:’} no object
placeholderMapping Component placeholder handle. Key name is the key name of componentMapping,value: label prefix. For example: {‘input’:’ Please enter ‘} no object
format Intercept handling of form data Settings and retrieves. no object
format.set Form data is set to intercept processing. Note that the this of this method points to dynamic forms. Three parameters are accepted: key, value, and type no function
format.get Intercept handling of form data acquisition. Note that the this of this method points to dynamic forms no function

Methods

The method name instructions parameter return
getForm Get the form – Returns the current form element
getParent ParentName ($options.name, page/component name) is referenced in props – Returns the parent node, or null
runCreateHandler Run the event information for each events with the event name CREATE and fire only once – There is no
getCreateHandlerMap Get the event information for each events with the event name CREATE – function[]
getConfigList Get all configuration information – Return a list of configuration information: IConfigSign[]
getConfig Gets the specified configuration information arr: IConfig, prop: string IConfigSign
createNewConfig Information Configuration information is mainly used to prevent the memory address of configuration information from affecting the initial configuration information IConfig IConfig
trigger Actively triggers the specified event in the configuration information of the specified prop prop: string, eventName: string this
setLocalParams Sets the scope data information for the current form key: string, value: any this
setLocalParamsMap Batch sets the scope data information for the current form { key: string,value: any }[] this
getLocalParams Gets the scope data information for the current form. If the key has a value, the specified data will be retrieved. If not, all data of the scope will be retrieved. key? : string object
setData Set the form data as key-value pairs key: string, value: any this
setDataMap Set form data in batches { key: string,value: any }[] this
getParams Access to the form of a packet containing the setting value through setLocalParams/setLocalParamsMap local data, the default to go back to the form of data and information, as a parameter to true is representative for form validation to get the result and returns a Promise bool? : Boolean The Object | Promise
validateFields Form a charm – Promise
getFieldsValue Get form data { key: string,value: any }[] this
setOptions Sets options for the specified prop configuration information. Commonly used with select/radio prop: string,options: any[] this
setOptionsMap Batch set options for the specified prop configuration information. Commonly used with select/radio { [key: string]: any[] } this
setDisabled Set whether to disable effects for each item on the form. If props has a value, disable the effect on the prop or the prop array. If props does not have a value, disable the effect on all props. disabled: boolean, props? : string string[]
getOptions Gets the list of options for the specified prop value, if the second parameter value has a value prop: string, value? : string number
update Update the specified configuration information using the prop value prop: string, config: IConfigSignle this
replace Replaces the configuration information of the specified prop value prop: string, config: IConfigSignle this
delete Deletes the specified prop prop: string this
push Add configuration information by adding a one-line array directly to the configuration information of the root node config: IConfig this
appendBefore Adds to the front of the specified prop field prop: string, config: IconfigSignle this
appendAfter Adds to the specified prop field prop: string, config: IconfigSignle this

Events

The event name instructions parameter return
loaded Triggered when the dynamic form has finished loading {vm: dynamic form, formData: form information} –
formHandler Raised when events is configured with method and $props. ParentName is not configured Method: method value of current events,{value: value of current prop,formData: formData,config: configuration information of current prop,args: argments of current original function} –

ConfigSingle

parameter instructions Specifies whether this parameter is mandatory type
label Form the label no string
prop The key name of the data, which can be point-connected data. For example: the user name is string
type Source and mapping.componentMapping The key name in the configuration information is string
bind The $props parameter for the currently selected component no object
itemBind The $props parameter for the current component’s form-item no object
hideLabel Whether to hide the label, when true adds the class name ‘hideLabel’ to the corresponding item no boolean
span The space occupied by the current parent width is calculated on the basis of 24 equal portions no number
required This parameter is mandatory no boolean
rules An array of efficacy rules for a single prop. Consistent with the UI framework used. Note that this of the custom Validator refers to this of the dynamic form no array
events Custom event handlers no array
events[0].name Name of the event that can be triggered by the currently selected component. When the name value is CREATE, it fires once after the component has loaded is string
events[0].hadnler Custom functions. The current function’s this points to this of the dynamic form no function
events[0].method Method function of the parent node of the current dynamic form. Note that $props. ParentName must be configured no string
slots Custom slot no function
optionType Source and mapping.componentMapping The key name in the configuration information. Mainly used with select/ RAIDO option lists no string