yc-dynamic-form

Introduction

文档编辑者：戴向天 / 白玺东

更新时间：2021 年 8 月 8 日

动态表单企鹅群： 877965995

官方 Api 文档地址：www.yangchan.work/yc-dynamic-…

优点

只需要通过配置信息就可实现动态表单的生成,且满足大部分业务需求
实现一套配置兼容多套 UI，通过配置映射表（mapping）兼容自定义表单组件及大部份 UI 库的表单组件如：【Ant Design of Vue，element-ui】
表单配置项可动态修改
支持自定义组件及自定义事件扩展
支持数据填充时/数据获取时进行拦截处理
支持配置函数中 this 调用内置表单事件及全局事件（this 指向内置表单, 表单在 vue 下）
表单内置事件可链式调用

扩展

开发者可以在配置信息上进行加上自己自定义的 key 名，从而去实现功能。为二次封装做下了良好的基础。

npm 安装

npm install yc-dynamic-form
复制代码

使用

import YcDynamicForm from 'yc-dynamic-form'
Vue.use(YcDynamicForm)
复制代码


<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: '姓名',type: 'input',prop: 'name'},
            {label: '年龄',type: 'input',prop: 'age'},
          ]
        }
      ]
    }
  }
}
</script>
复制代码

Attributes

参数	说明	类型	可选值	默认值
config	表单的配置信息	array	–	[]
rules	效验规则，具体的参考相对应的 UI 框架	object	–	{}
gutter	默认的间距	number	–	null
layout	表单布局,根据自己选择的 UI 框架相对的布局参数	string	–	null
mapping	映射表	object	–	{}
format	数据格式化拦截器：set & get	object	–	–
parentName	父级的 $options.name值，主要是用来获取对应的父级并做相对应的父级函数调用，之所以需要这个参数是因为防止在某些情况下，动态表单的$ parent 被嵌套多层，导致所获取的 $parent,非正确的$ parent	string	–	–

Mapping

参数	说明	是否未必选项	类型
componentMapping	组件映射配置信息（键值对）。key 名就是自定义的组件名称，value：实际上的组件名称。例如：{‘input’: ‘el-ipnut’}	是	object
modelMapping	model 映射表（键值对）。key 名就是组件 model 的触发事件名称，value：componentMapping 的 key 名数组【】。由于不同 UI 框架的不同数据绑定方式，有些组件是通过 change 来触发 model，有的是通过 input 进行触发 model。{‘change’：[]}	是	object
defaultValueMap	组件默认值（键值对）。key 名就是 componentMapping 的 key 名，value：默认值。例如：{‘input’:”}	否	object
placeholderMapping	组件 placeholder 处理. key 名就是 componentMapping 的 key 名,value: label 的前缀。例如：{‘input’:’请输入’}	否	object
format	表单数据设置和获取的拦截处理。	否	object
format.set	表单数据设置拦截处理。注意的是：该方法的 this 指向是动态表单。共接受三个参数：key, value, type	否	function
format.get	表单数据获取的拦截处理。注意的是：该方法的 this 指向是动态表单	否	function

Methods

方法名	说明	参数	返回
getForm	获取表单	–	返回当前的表单元素
getParent	获取父级节点，注意的是：需要依赖的就是需要在 props 里面告知 parentName 的值，也就是页面或者组件的 name 参数$options.name	–	返回父级节点，或者 null
runCreateHandler	运行每一项 events 中事件名称为 create 的事件信息，只触发一次	–	无
getCreateHandlerMap	获取每一项 events 中事件名称为 create 的事件信息	–	function[]
getConfigList	获取所有的配置信息	–	返回一个列表形式的配置信息: IConfigSign[]
getConfig	获取指定的配置信息	arr: IConfig, prop: string	IConfigSign
createNewConfig	信息配置信息,主要是防止配置信息的内存地址与新的配置信息一直，所影响到初始化的配置信息	IConfig	IConfig
trigger	主动触发指定的 prop 的配置信息中的指定事件	prop: string, eventName: string	this
setLocalParams	设置当前表单的作用域数据信息	key: string, value: any	this
setLocalParamsMap	批量设置当前表单的作用域数据信息	{ key: string,value: any }[]	this
getLocalParams	获取当前 form 的作用域数据信息.当 key 有值的时候将会获取指定的数据，若没有则进行获取作用域的所有数据;	key?: string	object
setData	以键值对的方式设置表单数据	key: string, value: any	this
setDataMap	批量设置表单数据	{ key: string,value: any }[]	this
getParams	获取表单的数据包含有通过 setLocalParams/setLocalParamsMap 所设值的本地数据,默认返回表单的数据信息，当参数为 true 的是就是代表进行表单验证再获取结果并返回一个 Promise	bool?: Boolean	Object ｜ Promise
validateFields	表单效验	–	Promise
getFieldsValue	获取表单数据	{ key: string,value: any }[]	this
setOptions	给指定的 prop 配置信息进行设置选项。普遍用在与 select/radio	prop: string,options: any[]	this
setOptionsMap	批量进行给指定的 prop 配置信息进行设置选项。普遍用在与 select/radio	{ [key: string]: any[] }	this
setDisabled	给表单的每一项进行设置是否禁用效果。当 props 有值的时候，则就是给指定的 prop 或者指定 prop 数组进行设置是否禁用效果,当 props 没有值的时候，则是代表全部 prop;	disabled: boolean, props?: string	string[]
getOptions	获取指定 prop 值的选项列表，当第二个参数 value 有值的时候则就是获取选项中指定 value 的选项信息	prop: string, value?: string	number
update	通过 prop 值进行更新指定的配置信息	prop: string, config: IConfigSignle	this
replace	替换指定 prop 值的配置信息	prop: string, config: IConfigSignle	this
delete	删除指定的 prop	prop: string	this
push	添加配置信息,该添加是直接在根级节点的配置信息上进行添加一个一行数组	config: IConfig	this
appendBefore	添加到指定 prop 字段前面	prop: string, config: IconfigSignle	this
appendAfter	添加到指定 prop 字段后面	prop: string, config: IconfigSignle	this

Events

事件名	说明	参数	返回
loaded	当动态表单加载完毕之后进行触发的	{vm: 动态表单，formData: 表单信息}	–
formHandler	当 events 配置有 method，并且$props.parentName 没有进行配置的时候进行触发	method:当前 events 的 method 值,{value:当前 prop 的值,formData:表单数据,config:当前的 prop 的配置信息,args: 当前原函数的 argments}	–

ConfigSingle

参数	说明	是否为必选项	类型
label	表单 label	否	string
prop	数据的 key 名称，可为点连接的数据。例如：user.name	是	string
type	来源与 mapping.componentMapping 配置信息中的 key 名	是	string
bind	当前选中的组件的$props 参数	否	object
itemBind	当前组件的 form-item 的$props 参数	否	object
hideLabel	是否隐藏 label，当为 true 的时候则就会在相对应的项中添加’hideLabel’的 class 名称	否	boolean
span	所占当前父级宽度的空间，以 24 等份为基础进行计算对应的空间	否	number
required	是否为必填项	否	boolean
rules	单个 prop 的效验规则数组。同所用的 UI 框架一致。需要注意的是：里面自定义的 validator 函数的 this 指向是动态表单的 this	否	array
events	自定义事件处理函数	否	array
events[0].name	当前所选的组件所能触发的事件名称。当 name 值为 create 的时候，则就会在组件加载完毕后进行触发一次	是	string
events[0].hadnler	自定义函数，当前的函数的 this 指向是动态表单的 this	否	function
events[0].method	当前动态表单的父级节点的 method 函数。需要注意的是：必须配置$props.parentName	否	string
slots	自定义插槽	否	function
optionType	来源与 mapping.componentMapping 配置信息中的 key 名。主要使用来配合 select/raido 的选项列表	否	string