介绍
FormMaking 是基于Vue的可视化表单设计器,赋能企业实现可视化低代码开发模式;帮助开发者从传统枯燥的表单代码中解放出来,更多关注业务,快速提高效率,节省研发成本。 目前已经在OA系统、考试系统、报表系统、流程管理等众多项目中得到了广泛使用。
FormMaking 采用 Vue
和 Element
进行页面构建,内置 i18n
国际化解决方案,支持二次扩展开发,支持自定义组件扩展,目前支持渲染 Element
和 Antd
组件库。
直观的拖拽操作
FormMaking 通过可视化拖拽来创建表单,方便易用。
丰富的表单字段
FormMaking 提供了各种类型的表单字段,包括布局、容器、文本、选择框、对话框、数据表格、自定义等,基本可以满足各种场景下的复杂表单创建。
FormMaking 除了可以使用内置的字段,还支持将自己的组件引入到设计器中进行配置使用。
响应式设计
FormMaking 的表单是全响应式的,可以在任何设备上,如桌面,平板电脑或者智能手机上很好的适配。
数据源管理
FormMaking 可以对表单使用的数据进行管理,方便进行前后的数据交互。
表单事件交互
FormMaking 可以通过事件配置,完成表单复杂的业务逻辑操作。
可扩展性
FormMaking 还具有易用性和可扩展性,可以根据自己的需求,轻松地扩展您的表单功能。提供了全面的API文档,帮助您快速接入您的系统,从而更好地满足您的业务需求。
数据表格
新版本迎来了数据表格,为表单提供了更好的数据列表的处理能力,支持多选、多级表头、列模板自定义、操作列、分页等设置;接下来一起看看数据表格的功能。
表格列设置
在 字段属性 - 列设置中进行表格列设置。
多级表头
在列设置中添加多级表头。
自定义列
在列设置中点击每项前方的编辑按钮,即可弹出详细的编辑区域,对表格列进行更加详细的设置,包括列宽、对齐方式、列模板等。
添加操作列
在操作列设置中打开显示操作列,配置操作按钮,点击编辑图标可对事件进行编辑。
方法中可以通过 arguments[0]
获取到当前行数据进行操作:
function () {const {row // 点击当前行的操作按钮,获取当前行的数据。} = arguments[0]
}
分页
数据结构配置
启用分页后,数据需要按照配置的数据结构进行返回,不然分页会不起作用。
需要的返回数据结构如下:
{"records": [...],"total": 100,"currentPage": 1,"pageSize": 10
}
分页事件配置
在动作设置中配置 onPageChange 事件,在当前页或者每页数量修改时会触发该事件,并且传递页面分页参数:
function () {const {pageSize, // 数据结构中配置的每页数量参数currentPage // 数据结构中配置的当前页参数} = arguments[0]
}
数据 CRUD
通过数据表格可以简单快速的完成数据CRUD操作,可以来看下效果:
更多的功能可以前往官网进行体验。
FormMaking 官网地址:https://form.making.link
如需本地部署测试版本可联系:https://form.making.link/contact