表单设计器1.2.20,更新多端适配和表格布局优化
介绍
FormMaking是一款基于Vue的表单设计器,拖拽式的表单设计器可以很方便的进行表单设计与表单制作,通常用在OA系统,考试系统,报表系统中,支持表单设计器二次开发,可以自行添加新的自定义组件,让表单开发简单而高效,赋能企业实现低代码开发模式!
FormMaking
FormMaking表单设计器分两个部分,一个是设计器,一个是生成器,设计器可以用来设计器表单页面,使用拖拽的方式,可以很方便的创建一个表单,同时设计器还针对每个不同的组件配置有不同的参数可以设置,设计器设计的页面可以用一个完整的JSON格式数据表示。生成器则可以通过完整的JSON格式数据还原表单页面,并渲染出表单数据。
设计器
相信不少前端开发者在初次了解到这个设计器的时候会认为这只是一个表单页面的设计器,经验丰富的开发者根本用不上这样的工具,要做一个页面只需要将之前设计过的页面复制过来,简单修改下就能完成,如果您也有这样的看法,欢迎认真看完。
FormMaking表单设计器的强大之处在于可以动态设计整个表单页面,已有组件直接通过拖拽的方式布局表单页面,右侧会根据不同组件类型提供特定的可配置项。比如下拉框可以配置下拉选项的数据,可以用静态数据也可以从自己服务器获取选项数据,也可以配置全局或是部分的样式设置,还可以配置数据的校验选项以及组件的change事件。
下图是一个比较常见的表单页面示例
设计器界面
下图是表单设计完成后得到的整个表单的JSON 数据,文章末尾会附上,可以复制使用在线表单设计器导入展示。
生成器
生成器和设计器是两个独立的组件,生成器主要负责将设计器生成的JSON数据还原成整个表单页面,并且收集用户填写的表单数据。也可以利用页面的JSON 和表单数据的JSON 渲染出已填写的表单页面和数据。
生成器界面