几款常用的表单设计器解决方案

在日常前端开发中，表单可以说是最常用的一种数据录入及展示组件。如果项目里有成百上千个表单需要手动编写代码，这将极大的一笔极大的人力开支。这时候，选择一款合适的表单设计器，就显得非常重要了，不仅能极大的缩短项目开发周期，而且还能保持各个页面之间风格基本统一。

下面将介绍以下几个表单设计器：

1. Alibaba/XRender： 阿里 - 很易用的中后台「表单 / 表格 / 图表」解决方案
2. Alibaba/Formily： 阿里巴巴统一前端表单解决方案
3. Form Generator：基于Element UI的表单设计及代码生成器
4. Form-Create：可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件

1. Alibaba/XRender

阿里 - 很易用的中后台「表单 / 表格 / 图表」解决方案

Github：https://github.com/alibaba/x-render
官网地址： https://xrender.fun/

Alibaba/XRender相对于其他几个的优势在于他提供了一整套完整的解决方案合集，包含了：

• FormRender：像写一个 input 一样写表单
• TableRender：协议生成 & 高度灵活的搜索列表
• ChartRender：傻瓜式的图表绘制库
• FormGenerator：中后台表单可视化搭建生成利器

Alibaba/XRender在结构上遵循 JSON Schema 国际规范。

其中FormGenerator提供了可视化的所见即所得的表单设计界面，支持常用的一些组件，如输入框、日期选择框、数字输入框等一些列组件，设计完成后可以导出JSON Schema格式的json数据，可以在FormRender中完整的显示。

界面预览：

2. Alibaba/Formily

GitHub：https://github.com/alibaba/formily
官网地址： https://formilyjs.org

在 React 中，在受控模式下，表单的整树渲染问题非常明显。特别是对于数据联动的场景，很容易导致页面卡顿，为了解决这个问题，我们将每个表单字段的状态做了分布式管理，从而大大提升了表单操作性能。同时，我们深度整合了 JSON Schema 协议，可以帮助您快速解决后端驱动表单渲染的问题。

Alibaba/Formily具有以下特性（摘至官网）：

• 🖼 可设计，借助 Form Builder 可以快速搭建表单
• 🚀 高性能，字段分布式渲染，大大减轻 React 渲染压力
• 💡 支持 Ant Design/Fusion Next 组件体系
• 🎨 JSX 标签化写法/JSON Schema 数据驱动方案无缝迁移过渡
• 🏅 副作用逻辑独立管理，涵盖各种复杂联动校验逻辑
• 🌯 支持各种表单复杂布局方案

界面预览：

3. Form Generator

GitHub：https://github.com/JakHuang/form-generator

Element UI表单设计及代码生成器，可将生成的代码直接运行在基于Element的vue项目中；也可导出JSON表单，使用配套的解析器将JSON解析成真实的表单。

界面预览：

4. form-create

GitHub： https://github.com/xaboy/form-create
官网地址：http://www.form-create.com/

form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持3个UI框架，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。

特点：

• 支持使用 json 数据生成表单。
• 支持生成任何组件，提升表单的灵活性，可以实现功能更复杂的表单。
• 已适配iview,view-design,element-ui,ant-design-vue框架。
• 生成规则变化后，页面会实时更新。
• 栅格系统进行网页布局，可以使页面排版美观、舒适。
• 内置组件缓存功能，提升渲染速度。

5. Amis（2023/2/21更新）

GitHub： https://github.com/baidu/amis
官网地址：https://aisuda.bce.baidu.com/amis
Demo地址：https://aisuda.github.io/amis-editor-demo/#/hello-world

amis 是一个低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率。

amis推崇以JSON来配置页面，并且产出的页面包含大量的细节功能，比如可以对数据进行筛选、可刷新数据、编辑单行数据、批量修改和删除、排序、隐藏列、调整列顺序等等细节功能。如果以编写代码的方式进行，这些功能将会是不小的工作量。

为了实现用最简单方式来生成大部分页面，amis 的解决方案是基于 JSON 来配置，它的独特好处是：

• 不需要懂前端：在百度内部，大部分 amis 用户之前从来没写过前端页面，也不会 JavaScript，却能做出专业且复杂的后台界面，这是所有其他前端 UI 库都无法做到的；
• 不受前端技术更新的影响：百度内部最老的 amis 页面是 6 年多前创建的，至今还在使用，而当年的 Angular/Vue/React 版本现在都废弃了，当年流行的 Gulp 也被 Webpack 取代了，如果这些页面不是用 amis，现在的维护成本会很高；
• 享受 amis 的不断升级：amis 一直在提升细节交互体验，比如表格首行冻结、下拉框大数据下不卡顿等，之前的 JSON 配置完全不需要修改；
• 可以 完全 使用 可视化页面编辑器 来制作页面：一般前端可视化编辑器只能用来做静态原型，而 amis 可视化编辑器做出的页面是可以直接上线的。

amis还有其他亮点：

• 提供完整的界面解决方案：其它 UI 框架必须使用 JavaScript 来组装业务逻辑，而 amis 只需 JSON 配置就能完成完整功能开发，包括数据获取、表单提交及验证等功能，做出来的页面不需要经过二次开发就能直接上线；
• 大量内置组件（120+），一站式解决：其它 UI 框架大部分都只有最通用的组件，如果遇到一些稍微不常用的组件就得自己找第三方，而这些第三方组件往往在展现和交互上不一致，整合起来效果不好，而 amis 则内置大量组件，包括了富文本编辑器、代码编辑器、diff、条件组合、实时日志等业务组件，绝大部分中后台页面开发只需要了解 amis 就足够了；
• 支持扩展：除了低代码模式，还可以通过 自定义组件 来扩充组件，实际上 amis 可以当成普通 UI 库来使用，实现 90% 低代码，10% 代码开发的混合模式，既提升了效率，又不失灵活性；
• 容器支持无限级嵌套：可以通过嵌套来满足各种布局及展现需求；
• 经历了长时间的实战考验：amis 在百度内部得到了广泛使用，在 6 年多的时间里创建了 5 万页面，从内容审核到机器管理，从数据分析到模型训练，amis 满足了各种各样的页面需求，最复杂的页面有超过 1 万行 JSON 配置。

写在最后

以上就是收集整理的四 五个比较常见的表单设计器解决方案，如有疑问，欢迎评论区交流。

扩展阅读：
工作流流程编辑器的几种解决方案
React + Antd实现动态切换主题功能之二（默认主题与暗黑色主题切换）
React + Router + Antd实现多标签页功能