Cb_form NPM | npm.io

简介

DynamicForm是一个前端form表单页面的解决方案，它基于 vue 和 element-ui 实现。他可以帮助开发人员快速开发完成表单的开发，适用于列表查询条件的form、列表增改form和流程审批界面的表单展示。

功能

1.根据配置文件动态生成表单控件。（支持控件：单选、多选、时间、radio、输入框、密码框、级联、以及自定义控件）
2.通过配置控制按钮个数。
3.通过配置控制按钮名称。
4.通过配置控制表单单行显示控件个数。
5.通过配置控制表达单个控件显示列数。
6.根据表单是增加或修改功能，控制表单主键字段显隐。
7.通过配置控制单选、多选等控件下拉数据获取方式。
8.通过配置控制表单元素验证规则。
9.对于系统内部统一的验证规则可以内置，全局统一验证规则。

接口

表单参数

参数	说明	类型	可选值	默认值
formConfig	表单参数	Object
formData	表单数据，通过formDataitem唯一标识赋值、获取表单数据	Object		{}
isUpdate	是否是更新表单功能（增、改表单时使用）	Number	0/1 1是更新	0
submit	表达提交函数，通过formDataitem唯一标识或者通过入参json获取表单数据	Function(json: string)
getOptionFun	获取表单item的Option函数	Function(tranCode: string)
getRulesFun	获取表单item的Rules函数	Function(ruleName: string)

表单formConfig参数

参数	说明	类型	可选值	默认值
_style	表单样式	Object	{"columns":1}	{"columns":1,"submitButtonName":"提交","width":"auto"}
_items	表单项数组,表述表单所有item项	Array\
_rules	表单验证规则，与element的Form中rules相同	Object	null
_rulesName	表单验证规则函数名字，{"item唯一标识":"规则函数名称"，"item唯一标识":"规则函数名称"}	Object	null

_style参数

参数	说明	类型	可选值	默认值
columns	表单显示列数	Number	1	1
submitButtonName	表单确认钮名称	String	提交	提交
width	表单里的item宽度	String	225	auto

item参数

参数	说明	类型	可选值	默认值
key	item的唯一标识	String	---
text	item的label名称	String	---
type	item的类型	String	input/password/cascader/datetime/select/multiple/radio/checkbox
tranCode	item所需Option的获取功能号	String	---
options	item所需Option数据	Array\	----
isKey	表单里更新时是否要显示	Number	0\1 0显示，1不显示	0