GenerateForm
表单生成器组件，通过
JSON Schema
快速渲染出表单页面。
代码演示
基础用法
直接根据
JSON Schema
渲染出表单，获取表单数据。
查看代码
TIP
getData
是异步方法，默认情况获取数据前验证表单数据，只有验证成功才能获取到表单数据 data ；若不需要表单验证，想要直接获取表单数据，可以添加参数
getData(false)
将不会验证表单数据
加载表单数据
查看代码
TIP
:value
属性给表单赋值，只有在表单初始化时才能生效，表单和默认数据一起加载，重置表单不会清空默认数据。
setData
可以在表单初始化后动态赋值，重置表单将会清空表单数据。
异步加载表单
查看代码
监听表单数据变化
字段： --- 更改的后的值：
查看代码
动态设置表单禁用隐藏
查看代码
TIP
^3.6.0 移除
禁用和启用操作因为是修改表单 json 设置的，所以需要保证 jsonData 为响应式数据，这里用到了
reactive
获取表单字段组件实例
可以通过【字段标识】来获取组件的实例，来对表单的字段组件做一些操作。
TIP
如果表单中有多个相同的字段标识，getComponent 返回的是数组，包含所有的实例。
自定义样式动态添加
查看代码
API
属性
data
- object | {}
表单 JSON 配置数据。
value
- object
表单数据，用于给表单赋值，只有在表单初始化时才能生效，动态赋值需要用到
setData
方法。
remote
- object | {}
表单配置的远端方法，使用方法可以查看 使用方法函数 。
remote-option
- object | {}
表单动态选项配置，使用方法可以查看 使用赋值变量 。
edit
- boolean | true
表单可编辑状态，默认为
true
，当设置成
false
时，表单元素将全部禁用。
print-read
- boolean | false
打印阅读模式，默认为
false
，当设置成
true
时，表单字段值文本展示。
事件
on-change
- (field, value, data)
表单字段数据变化时触发。
方法
TIP
-
在Vue组件中可以通过 Ref 获取到
GenerateForm实例并调用实例方法。
-
在JS动作面板函数中，
this指向的是GenerateForm实例，可直接通过this调用。
getData
- (isValidate = true) => promise
获取表单的数据值，默认会进行表单校验，传入 false 则不进行表单校验。
reset
- () => promise
重置表单数据。
setData
- ({id: value}) => promise
设置表单数据。
hide
- (fields: []) => void
隐藏表单字段。
display
- (fields: []) => void
显示表单隐藏的字段，使用方法同
hide
。
disabled
- (fields: [], disabled: true | false) => void
动态设置表单字段是否禁用
refresh
- () => promise
刷新表单，当表单 JSON 改变时，需调用该方法重新加载表单
getValue
- (field) => value
获取某一字段输入值
getValues
- () => object
获取表单所有字段的值。
sendRequest
- (name: 数据源名称, args: 数据源参数) => promise
执行数据源请求
getComponent
- (field: 字段标识) => object | array
获取表单中字段组件实例，存在相同字段标识的多个组件，将返回组件实例数组
addClassName
- (fields: [], className)
表单项添加样式类
removeClassName
- (fields: [], className)
移除表单样式类，使用方法同
addClassName
setRules
- (field, rules)
设置表单字段验证规则
setOptions
- (fields, options)
设置表单字段配置项，参见 字段可配置项 。
getOptions
^3.7.1
- (field [, key]) => object | value
获取表单字段配置项
setOptionData
- (fields, newData)
选项数据动态赋值，
需要
,
options.remote
为
true
时生效
3.7.2
之后，不再限制
options.remote
，可以使用该方法更新选项数据。
getOptionData
^3.8.0
- (field) => array
获取字段选项数据。
refreshFieldOptionData
^3.8.0
- (field, args: 数据源参数)
刷新字段选项绑定的动态数据，如果是表达式 args 不用传。
refreshDynamicValue
^3.8.0
- (fields, args: 数据源参数)
刷新字段动态值，不传参数表示刷新表单所有字段动态值。
refreshFieldDataSource
已废弃
特别说明
该方法不再维护，
V3.8.0
版本后使用
refreshFieldOptionData
代替。
- (field, args: 数据源参数) => promise
刷新字段绑定的数据源数据。
getFieldDataSource
已废弃
特别说明
该方法不再维护，
V3.8.0
版本后使用
getOptionData
代替。
- (field)
获取字段绑定的数据源数据值
validate
- (fields: []) => promise
验证表单字段
triggerEvent
- (eventName: 事件名称, args: 事件参数)
调用表单配置的js事件，使用方法参考 调用函数
exportPDF
^3.5.8
- () => promise
导出PDF, 当表单 print-read 属性为 true 时可用。返回 Blob (type: "application/pdf")类型文件
print
^3.8.2
- () => promise
表单打印，当表单 print-read 属性为 true 时可用。返回 Blob (type: "application/pdf")类型文件