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

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

  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具有以下特性（摘至官网）：