cb_form
1.4.0 • Public • Published
DynamicForm
简介
DynamicForm是一个前端form表单页面的解决方案,它基于 vue 和 element-ui 实现。他可以帮助开发人员快速开发完成表单的开发,适用于列表查询条件的form、列表增改form和流程审批界面的表单展示。
功能
1.根据配置文件动态生成表单控件。(支持控件:单选、多选、时间、radio、输入框、密码框、级联、以及自定义控件)
2.通过配置控制按钮个数。
3.通过配置控制按钮名称。
4.通过配置控制表单单行显示控件个数。
5.通过配置控制表达单个控件显示列数。
6.根据表单是增加或修改功能,控制表单主键字段显隐。
7.通过配置控制单选、多选等控件下拉数据获取方式。
8.通过配置控制表单元素验证规则。
9.对于系统内部统一的验证规则可以内置,全局统一验证规则。
接口
表单参数
参数 |
说明 |
类型 |
可选值 |
默认值 |
formConfig |
表单参数 |
Object |
|
|
formData |
表单数据,通过formData[item唯一标识]赋值、获取表单数据 |
Object |
|
{} |
isUpdate |
是否是更新表单功能(增、改表单时使用) |
Number |
0/1 1是更新 |
0 |
submit |
表达提交函数,通过formData[item唯一标识]或者通过入参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<item> |
|
|
_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<opiton> |
---- |
|
isKey |
表单里更新时是否要显示 |
Number |
0\1 0显示,1不显示 |
0 |
Readme
Keywords
nonePackage Sidebar
Install
Weekly Downloads