FormMaking --基于 [vue]实现的表单设计器，可以让表单开发简单而高效。

Autor: Palapple Date: 2020-03-04 Tag: Vue, JS, React, Ant Design Pro, Formmaking

[图片上传失败...(image-424ab4-1585899765538)]

关于FormMarking调研

基本情况

基于 vue 和 element-ui 实现的表单设计器，使用了最新的前端技术栈，内置了 i18n 国际化解决方案，可以让表单开发简单而高效。

组件

• MakingForm 表单设计器（基于可视化操作快速设计出表单页面，并获取到表单配置 json 数据）。

• GenerateForm 表单生成器（根据设计器中获取的配置 json 数据，快速渲染出表单页面）。

• 在线预览

• 使用文档

• 高级版本 提供了更多的组件和操作API

特性

• 可视化配置页面
• 提供栅格布局，并采用flex实现对齐
• 一键预览配置的效果
• 一键生成配置json数据
• 一键生成代码，立即可运行
• 提供自定义组件满足用户自定义需求
• 提供远端数据接口，方便用户需要异步获取数据加载
• 提供功能强大的高级组件
• 支持表单验证
• 快速获取表单数据
• 国际化支持

优点

• 快速构建表单，提供栅格布局；
• 减少重复作业，高效完成表单和json双向转化；
• 对于个性化定制，可以添加自定义class覆盖原来的样式，满足业务的实际需求；
• 支持Element-ui和Ant Design-ui；
• 提供多种api接口，对数据和字段进行操作；

缺点

• 高级组件数量不够多；原生antd of vue 中包含57个组件，还有很多高级组件，类似card，list等等未完成；
• 对于中台应用来说，Table，Card，Search等经常使用的组件暂时没有，等后续更新；

应用场景

Element-UI版本（实际使用图）

• 表单生成器（ GenerateForm）

[图片上传失败...(image-ff32ca-1585899765538)]

https://www.v2ex.com/t/642079

• 表单设计器 （MakingForm）

[图片上传失败...(image-cd5c0a-1585899765538)]

Antd版本（使用vue cli3实现）

[图片上传失败...(image-4549d6-1585899765538)]

PS

1. antd组件版本暂时只在高级版本才有；产品正在进一步兼容antd的高级组件，提升容量；
2. 通过跟Ant Design Pro配合Element-ui搭配完美，Antd组件兼容性待测量；
3. 建议搭配第三方组件使用：

• vuedraggable
• Element
• ace
• vue2-editor