表单设计器1.2.20,更新多端适配和表格布局优化

介绍

FormMaking是一款基于Vue的表单设计器,拖拽式的表单设计器可以很方便的进行表单设计与表单制作,通常用在OA系统,考试系统,报表系统中,支持表单设计器二次开发,可以自行添加新的自定义组件,让表单开发简单而高效,赋能企业实现低代码开发模式!

FormMaking

FormMaking表单设计器分两个部分,一个是设计器,一个是生成器设计器可以用来设计器表单页面,使用拖拽的方式,可以很方便的创建一个表单,同时设计器还针对每个不同的组件配置有不同的参数可以设置,设计器设计的页面可以用一个完整的JSON格式数据表示。生成器则可以通过完整的JSON格式数据还原表单页面,并渲染出表单数据。

设计器

相信不少前端开发者在初次了解到这个设计器的时候会认为这只是一个表单页面的设计器,经验丰富的开发者根本用不上这样的工具,要做一个页面只需要将之前设计过的页面复制过来,简单修改下就能完成,如果您也有这样的看法,欢迎认真看完。

FormMaking表单设计器的强大之处在于可以动态设计整个表单页面,已有组件直接通过拖拽的方式布局表单页面,右侧会根据不同组件类型提供特定的可配置项。比如下拉框可以配置下拉选项的数据,可以用静态数据也可以从自己服务器获取选项数据,也可以配置全局或是部分的样式设置,还可以配置数据的校验选项以及组件的change事件。

下图是一个比较常见的表单页面示例

表单设计器1.2.20,更新多端适配和表格布局优化

设计器界面


下图是表单设计完成后得到的整个表单的JSON 数据,文章末尾会附上,可以复制使用在线表单设计器导入展示。

表单设计器1.2.20,更新多端适配和表格布局优化

生成器

生成器和设计器是两个独立的组件,生成器主要负责将设计器生成的JSON数据还原成整个表单页面,并且收集用户填写的表单数据。也可以利用页面的JSON 和表单数据的JSON 渲染出已填写的表单页面和数据。

表单设计器1.2.20,更新多端适配和表格布局优化

生成器界面

表单的校验功能,可以选择必填,数字,邮箱等常用校验规则,也可以自定义校验规则。

表单设计器1.2.20,更新多端适配和表格布局优化

校验配置


数据的校验效果如下图,在提交数据的时候生成器会校验整个表单的所有数据,出现不通过的情况会给出相应的提示。

表单设计器1.2.20,更新多端适配和表格布局优化

显示效果


校验通过后可以通过生成器获取到整个表单的表单数据,是以键值对的形式保存的JSON数据。

表单设计器1.2.20,更新多端适配和表格布局优化

获取表单填写数据

表单设计器1.2.20新内容

本次更新除了一些常规的优化和bug修复外,特别针对多终端适配和表格布局进行了优化,下面来看看这两个更新内容。

我们在设计表单的时候,有时可能需要在不同的设备上(pc、pad、mobile)展示不同的效果,现在我们将这三种设备屏幕宽度加入到设计器中,让设计的时候更加直观的查看。

表单设计器1.2.20,更新多端适配和表格布局优化

新版本增加对表格单元格的插入、合并、拆分、删除,让其更加能够满足企业复杂的表格场景。

表单设计器1.2.20,更新多端适配和表格布局优化

更多复杂表单示例

表单设计器1.2.20,更新多端适配和表格布局优化

表单设计器1.2.20,更新多端适配和表格布局优化

表单设计器1.2.20,更新多端适配和表格布局优化

以下是表单页面的完整JSON数据,感兴趣的朋友可以通过http://form.making.link/sample页面导入展示。

在线表单设计 表单设计器 https 表单设计 静态数据 http json Vue 升级
分享到:

您可能还会对下面的文章感兴趣: