表单设计器——VFormDesigner

属性(prop)

属性名称 属性值说明 默认值
field-list-api 配置获取后端字段列表接口对象 默认为null
接口对象格式为：
{
URL: ‘字段列表接口请求地址’,
nameKey: ‘fieldName’,
labelKey: ‘fieldLabel’
}

详情参见：字段接口文档
banned-widgets 配置禁止设计器显示的组件 默认为[]，数据格式为组件type名称的数组，比如：
[‘table’, ‘rate’, ‘switch’]
designer-config 配置设计器初始化界面显示设置 默认值为：
{
//是否显示语言切换菜单
languageMenu: true,

//是否显示GitHub、文档等外部链接
externalLink: true,

//是否显示表单模板
formTemplates: true,

//是否禁止修改唯一名称
widgetNameReadonly: false,

//是否显示组件事件属性折叠面板
eventCollapse: true,

//是否显示清空设计器按钮
clearDesignerButton: true,

//是否显示预览表单按钮
previewFormButton: true,

//是否显示导入JSON按钮
importJsonButton: true,

//是否显示导出JSON器按钮
exportJsonButton: true,

//是否显示导出代码按钮
exportCodeButton: true,

//是否显示生成SFC按钮
generateSFCButton: true,

//工具按钮栏最大宽度（单位px）
//如新增按钮后不可见，请调大
//如右侧空白区域过大，请调小
toolbarMaxWidth: 420,

//工具栏按钮最小宽度（单位px）
//值必须小于toolbarMaxWidth
toolbarMinWidth: 300,

//表单设计器预设CSS代码
presetCssCode: ‘’,

//表单设计器初始化自动清空内容
/ 如设置为true，则刷新页面时也会清空设计器画布区域，慎用！/
resetFormJson: false,

//设置自定义产品名称（仅Pro）
productName: ‘’,
//设置自定义产品标题（仅Pro）
productTitle: ‘’,

//是否显示顶部LOGO条（仅Pro）
logoHeader: true,
}
global-dsv 全局数据源变量（Pro版支持）

dsv即Datasource Variables（数据源变量）缩写。		 默认值为{}，数据格式为：
{
“myTestURL”: “xxx”,
“token”: “aabbcc”,
“countLimit”: 600
//可以自由添加键值对
}

在数据源中可使用
DSV[“myTestURL”]、
DSV[“token”]、
DSV[“countLimit”]
获取上述变量值。

插槽

名称 说明
customToolButtons 用于定制表单设计器的自定义工具按钮，位于默认工具按钮的右侧。

原生事件

原生事件可以在Vue模板中用@事件名称或JS代码中调用Vue实例的$on添加事件处理方法。

事件名称 说明 回调参数
暂无

交互事件

交互事件可在表单设计器中编写事件处理代码。

事件名称 说明 回调参数
暂无

API方法

方法名 说明 参数
changeLanguage 修改界面显示语言 string：’zh-CN’、’en-US’
setFormJson 设置表单JSON对象 string/object
getFormJson 获取表单JSON对象 —
clearDesigner 清空设计器画布 —
refreshDesigner 刷新设计器画布（几乎用不到） —
previewForm 打开—预览表单—弹窗 —
importJson 打开—导入表单JSON—弹窗 —
exportJson 打开—导出表单JSON—弹窗 —
exportCode 打开—导出Vue/HTML代码—弹窗 —
generateSFC 打开—生成SFC组件代码—弹窗 —
getFieldWidgets 获取表单JSON中的所有字段，返回对象数组，格式如下：
[
{
type: String,
name: String,
field: Object
},
…,
]		 — 无参数


注意：该方法获取的是formJson中的字段JSON定义，并非渲染后的字段组件。
getContainerWidgets 获取表单JSON中的所有容器，返回对象数组，格式如下：
[
{
type: String,
name: String,
container: Object
},
…,
]		 — 无参数


注意：该方法获取的是formJson中的容器JSON定义，并非渲染后的容器组件。
getWidgetRef 获取设计器组件实例 (widgetName, showError):
widgetName，组件名称
showError=true/false，如组件不存在是否显示错误
getSelectedWidgetRef 获取设计器选中的组件实例 —

表单渲染器——VFormRender

属性(prop)

属性名称 属性值说明 默认值
form-json 表单对象JSON

注意：如表单Json是从后端接口异步获取到的，请使用下述的API方法——setFormJson()赋值，使用form-json属性传值则会导致表单校验异常或表单渲染不成功。

| 无默认值 | | option-data | 表单radio、checkbox、select、cascader组件的选择项集合 | 默认值为空对象：{}，
属性值格式如下：
{
‘gender’: [
{label: ‘男’, value: ‘1’},
{label: ‘女’, value: ‘2’}
],
‘paymentType’: [
{label: ‘支付宝’, value: ‘alipay’},
{label: ‘微信’, value: ‘wechat’}
]
} | | form-data | 表单数据对象

注意：form-data属性通常用于表单初始化时给表单传递回显数据，如需多次修改表单数据或发现表单部分数据失去响应式更新，请调用下述的setFormData(formData)方法。 | 默认值为空对象：{}，
属性值格式如下：
{
‘gender’: ‘2’,
‘paymentType’: ‘wechat’
‘subForm01’: [
{‘price’: ‘88.00’, ‘count’: ‘12’},
{‘price’: ‘199.00’, ‘count’: ‘16’}
]
} | | global-dsv | 全局数据源变量（Pro版支持）

dsv即Datasource Variables（数据源变量）缩写。 | 默认值为{}，数据格式为：
{
“myTestURL”: “xxx”,
“token”: “aabbcc”,
“countLimit”: 600
}

在数据源中可使用
DSV[“myTestURL”]、
DSV[“token”]、
DSV[“countLimit”]
获取上述变量值。 | | | | |

原生事件

原生事件可以在Vue模板中用@事件名称或JS代码中调用Vue实例的$on添加事件处理方法。

事件名称 说明 回调参数
buttonClick button组件被点击时触发
注意：如果button组件的交互事件onClick属性不为空，则不会触发buttonClick原生事件，两者不会同时生效。		 buttonWidget：被点击的按钮组件
appendButtonClick input组件的附加按钮被点击时触发 widget：input组件
formChange 表单数据改变后触发 (fieldName, newValue, oldValue, formModel, subFormName, subFormRowIndex)：
fieldName，触发本事件的字段名
newValue，字段新值
oldValue，字段旧值
formModel，表单数据对象

如果是子表单数据改变，则还会返回下述两个回调参数：
subFormName, 子表单名称
subFormRowIndex, 子表单行索引

交互事件

交互事件可在表单设计器中编写事件处理代码。

事件名称 说明 回调参数
onFormCreated 表单创建后触发 —
onFormMounted 表单挂载后触发 —
onFormDataChange 表单数据改变后触发 (fieldName, newValue, oldValue)：
fieldName，触发本事件的字段名
newValue，字段新值
oldValue，字段旧值

API方法

方法名 说明 参数
changeLanguage 修改界面显示语言 string：’zh-CN’、’en-US’
setFormJson 动态加载表单JSON对象 string/object
getWidgetRef 获取容器或字段组件 (widgetName, showError):
widgetName，组件名称
showError=true/false，如组件不存在是否显示错误
getNativeForm 获取内嵌的el-form组件 —
validateForm 表单数据是否验证通过 callback(valid)，回调函数，接受valid参数（true/false）
getFormData 获取表单数据对象 (needValidation = true)，获取表单数据时是否开启表单校验，默认开启。
注意：开启表单校验，返回的是一个Promise对象，否则返回数据对象。
setFormData 设置表单数据对象 formData，表单数据JSON对象
getFieldValue 获取表单单个字段值 fieldName，字段名称
setFieldValue 设置表单单个字段值 (fieldName, fieldValue)：字段键值对
reloadOptionData 刷新选项类型字段的选项数据（选项数据是从option-data属性传入的） widgetNames，组件名称，格式为字符串或字符串数组，不传该参数则刷新所有选项类型字段
getSubFormValues 获取子表单数据对象 subFormName，子表单名称
disableForm 禁用表单编辑 —
enableForm 启用表单编辑 —
resetForm 重置表单数据，并清除校验状态 —
disableWidgets 一个或多个组件禁用编辑 widgetNames，组件名称，格式为字符串或字符串数组
enableWidgets 一个或多个组件启用编辑 widgetNames，组件名称，格式为字符串或字符串数组
hideWidgets 隐藏一个或多个组件 widgetNames，组件名称，格式为字符串或字符串数组
showWidgets 显示一个或多个组件 widgetNames，组件名称，格式为字符串或字符串数组
getFieldWidgets 获取表单JSON中的所有字段，返回对象数组，格式如下：
[
{
type: String,
name: String,
field: Object
},
…,
]		 — 无参数


注意：该方法获取的是formJson中的字段JSON定义，并非渲染后的字段组件，如需获取字段组件，需要进一步调用getWidgetRef()方法。
getContainerWidgets 获取表单JSON中的所有容器，返回对象数组，格式如下：
[
{
type: String,
name: String,
container: Object
},
…,
]		 — 无参数


注意：该方法获取的是formJson中的容器JSON定义，并非渲染后的容器组件，如需获取容器组件，需要进一步调用getWidgetRef()方法。
addEC 增加外部组件实例引用，以便在VForm组件内部调用外部组件方法。

EC即external component（外部组件）缩写。		 (componentName, externalComponent):
componentName，
外部组件名称
externalComponent，
外部组件实例
hasEC 判断是否存在外部组件实例 componentName，
外部组件名称
getEC 获取外部组件实例 componentName，
外部组件名称
getGlobalDsv 获取全局数据源变量（Pro版支持） — 无参数