一、表单设计器——EasyFormDesigner

属性(prop)

属性名称 属性值说明 默认值
field-list-api 配置获取后端字段列表接口对象 默认为null
接口对象格式为：
{
URL: ‘字段列表接口请求地址’,
nameKey: ‘fieldName’,
labelKey: ‘fieldLabel’
}
详情参见：字段接口文档
banned-widgets 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,

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

//是否显示顶部LOGO条
logoHeader: true,
}
global-dsv 全局数据源变量
dsv即Data Source Variables（数据源变量）缩写。		 默认值为{}，数据格式为：
{
“myTestURL”: “xxx”,
“token”: “aabbcc”,
“countLimit”: 600
//可以自由添加键值对
}

在数据源中可使用
DSV[“myTestURL”]、
DSV[“token”]、
DSV[“countLimit”]
获取上述变量值。
form-templates 表单模板配置 默认值为null，使用内置模板。
配置值为数组，格式为：
[{
title: ‘表单模板名称’,
imgUrl: ‘模板缩略图URL’,
jsonStr: ‘表单模板json字符串’, //优先级高于jsonUrl
jsonUrl: ‘表单模板对象读取URL’, //优先级低于jsonStr
description: ‘表单模板描述文字’,
i18n: { //优先级高于title和description
‘zh-CN’: {
title: ‘中文title’,
description: ‘中文描述文字’,
},
‘en-US’: {
title: ‘英文title’,
description: ‘英文描述文字’,
}
}
},
…
]

插槽

名称 说明
customToolButtons 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定义，并非渲染后的容器组件。
getWidgetRef 获取设计器组件实例 (widgetName, showError):

widgetName，组件名称
showError=true/false，如组件不存在是否显示错误
getSelectedWidgetRef 获取设计器选中的组件实例 —
buildFormDataSchema 构建并返回表单数据结构对象，仅Pro版本支持 —
addDataSource 增加数据源对象，仅Pro版本支持 dsObj，数据源对象
{
dataSourceId: ‘1x2y3z98765’, //确保表单内唯一不重复
uniqueName: ‘’,
requestURL: ‘’,
requestURLType: ‘String’,
description: ‘’,
headers: [
],
params: [
],
data: [
],
requestMethod: ‘get’,
configHandlerCode: ‘ return config’,
dataHandlerCode: ‘ return result.data.data;’,
errorHandlerCode: ‘ $message.error(error.message);’,
dataSetEnabled: false, // 是否开启多数据集
dataSets: [
],
},
getFormTemplates 获取全部表单模板，仅Pro版本支持 返回表单模板数组
clearFormTemplates 清空全部表单模板，仅Pro版本支持 —
addFormTemplate 追加新的表单模板，仅Pro版本支持 formTemplate，表单模板对象
{
title: ‘表单模板名称’,
imgUrl: ‘模板缩略图URL’,
jsonStr: ‘表单模板json字符串’, //优先级高于jsonUrl
jsonUrl: ‘表单模板对象读取URL’, //优先级低于jsonStr
description: ‘表单模板描述文字’,
i18n: { //优先级高于title和description
‘zh-CN’: {
title: ‘中文title’,
description: ‘中文描述文字’,
},
‘en-US’: {
title: ‘英文title’,
description: ‘英文描述文字’,
}
}
}