表单设计器资料收集

最新推荐文章于 2025-07-15 11:07:47 发布

原创最新推荐文章于 2025-07-15 11:07:47 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端框架

由于公司一些需求，收集了一些有关表单设计器，主要是一些技术特点、各自的优缺点记录，以此记录一下。

FormMaking

http://form.making.link/
FormMaking 表单设计器是一个基于 Vue 和 ElementUI 的可视化表单设计器，支持 i18n 国际化，可以通过拖拽组件来生成 JSON 数据，并将 JSON 还原成表单。它的技术特点和优缺点如下：
技术特点

使用了最新的前端技术栈，支持 Vue2 / Vue3，内置了 i18n 国际化解决方案，方便二次开发。
支持创建 Element 和 Ant Design 风格的表单，使用范围广泛。
提供了丰富的字段，复杂的高级字段和布局字段，可以满足一般的需求。
提供了数据源管理功能，可以对接口数据进行管理和操作，并能做在线测试。
提供了低代码配置功能，可以通过动作事件配置，并调用表单 API 来实现表单内部的一些操作。
支持 pc、pad、mobile 多终端布局适配，并可查看展示效果。

优缺点

优点：FormMaking 表单设计器的优点是可以实现所见即所得的表单设计，赋能企业实现低代码开发模式；帮助开发者从传统枯燥的表单代码中解放出来，更多关注业务，快速提高效率，节省研发成本。它还支持自定义扩展字段的样式、组件、属性，方便快捷的进行个性化配置。
缺点：FormMaking 表单设计器的缺点是没有提供表单存储引擎的技术方案，需要用户自己选择合适的数据库来保存表单的结构和数据。它也没有提供表单验证和提交功能，需要用户自己实现或引入第三方库。

Variant Form

https://www.vform666.com/
Variant Form 表单设计器是一款基于 Vue 2/Vue 3 的低代码表单，支持 Element UI、iView 两种 UI 库，提供了丰富的组件属性设置、表单交互事件和 API 方法，为前端开发人员提供快速搭建表单、实现表单交互和数据收集的功能。它的技术特点和优缺点如下：
技术特点

使用了 Vue 2/Vue 3 和 Element UI/iView 作为技术栈，支持两种风格的表单，使用广泛，扩展方便。
提供了表单设计器 VFormDesigner 和表单渲染器 VFormRender 两部分构成，VFormDesigner 通过拖拽组件方式生成 JSON 格式的表单对象，VFormRender 负责将表单 JSON 渲染为 Vue 组件。
提供了丰富的组件属性设置，可以对每个组件的样式、布局、验证、事件等进行配置。
提供了表单交互事件和 API 方法，可以通过低代码进行动作事件的交互，完成表单复杂的逻辑操作。

优缺点

优点：Variant Form 表单设计器的优点是可以实现低代码开发模式，快速搭建表单、实现表单交互和数据收集；支持多种 UI 库和多种 Vue 版本，适应不同的开发环境和需求。它还支持自定义扩展组件，可以将自己的组件导入到设计器中，一样可以实现配置。
缺点：Variant Form 表单设计器的缺点是没有提供表单存储引擎的技术方案，需要用户自己选择合适的数据库来保存表单的结构和数据。它也没有提供数据源管理功能，不能对接口数据进行管理和操作。

阿里xrender

https://xrender.fun/
xrender 表单设计器是一款基于 React.js 框架的，开箱即用的中后台「表单 / 表格 / 图表」解决方案，目前已经在阿里飞猪内部服务了 4 年，未来也将持续服务 xrender 的用户。它的技术特点和优缺点如下：
技术特点

使用了 React.js 和 Ant Design 作为技术栈，支持两种风格的表单，使用广泛，扩展方便。
提供了四个常见的组件渲染方案：FormRender、FRGenetator、TableRender、ChartRender，可以快速生成表单、表格和图表。
提供了协议驱动的渲染方式，通过 JSON Schema 来定义表单和表格的结构和交互。
提供了表单设计器和图表设计器的功能，可以通过可视化操作来创建和编辑表单和图表，并导出对应的 schema。

优缺点

优点：xrender 表单设计器的优点是可以实现开箱即用的中后台解决方案，赋能企业实现低代码开发模式；帮助开发者从传统枯燥的表单、表格和图表代码中解放出来，更多关注业务，快速提高效率，节省研发成本。它还支持自定义扩展组件，可以将自己的组件导入到设计器中，一样可以实现配置。
缺点：xrender 表单设计器的缺点是没有提供表单存储引擎的技术方案，需要用户自己选择合适的数据库来保存表单的结构和数据。它也没有提供数据源管理功能，不能对接口数据进行管理和操作。

k-form-design

https://gitee.com/kcz66/k-form-design
k-form-design 表单设计器是一款基于 vue 和 ant-design-vue 实现的表单设计器，样式使用 less 作为开发语言，主要功能是能通过简单操作来生成配置表单，生成可保存的 JSON 数据，并能将 JSON 还原成表单，使表单开发更简单更快速。它的技术特点和优缺点如下：
** 技术特点 **

使用了 vue 和 ant-design-vue 作为技术栈，支持栅格、表格等布局，布局嵌套使用，提供预览、保存、生成 json、生成可执行代码等操作。
提供了两个组件：KFormDesign 表单设计器和 KFormBuild 表单构建器，前者用于可视化设计表单页面，后者用于根据配置 json 数据快速构建出表单页面。
提供了表单验证和自定义组件插入的功能，可以对表单数据进行校验和扩展。
提供了自定义主题色的功能，可以根据用户喜好调整表单的颜色风格。

**优缺点 **

优点：k-form-design 表单设计器的优点是可以实现快速开发表单页面，减少重复的代码编写，提高开发效率；支持多种布局和操作方式，提高用户体验；支持自定义组件和主题色，提高表单的灵活性和美观性。
缺点：k-form-design 表单设计器的缺点是没有提供表单存储引擎的技术方案，需要用户自己选择合适的数据库来保存表单的结构和数据。它也没有提供数据源管理功能，不能对接口数据进行管理和操作。

form-create

http://www.form-create.com/
form-create 表单设计器是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件，支持多个 UI 框架，并且支持生成任何 Vue 组件。它的技术特点和优缺点如下：
**技术特点 **

使用了 Vue 和 ElementPlus、Ant-design-vue、naive-ui、arco-design、TDesign 等 UI 框架作为技术栈，支持多种风格的表单，使用广泛，扩展方便。
提供了表单验证和自定义组件插入的功能，可以对表单数据进行校验和扩展。
提供了全局配置和自定义配置项扩展的功能，可以设置表单配置、指定组件全局配置、所有组件公共的全局配置，以及根据业务逻辑扩展。
提供了强大的 API，可快速操作表单，支持双向数据绑定、事件扩展、事件注入、局部视图更新等。

**优缺点 **

优点：form-create 表单设计器的优点是可以实现通过 JSON 生成表单，减少重复的代码编写，提高开发效率；支持多个 UI 框架和任何 Vue 组件，提高用户体验；支持表单验证和自定义组件，提高表单的灵活性和可靠性；支持全局配置和自定义配置项扩展，提高表单的定制性和易用性。
缺点：form-create 表单设计器的缺点是没有提供表单存储引擎的技术方案，需要用户自己选择合适的数据库来保存表单的结构和数据。它也没有提供数据源管理功能，不能对接口数据进行管理和操作。

form-generator

https://gitee.com/mrhj/form-generator
form-generator 表单设计器是一个基于 Vue 和 Element UI 实现的表单设计及代码生成器，可以将生成的代码直接运行在基于 Element 的 Vue 项目中，也可以导出 JSON 表单，使用配套的解析器将 JSON 解析成真实的表单。它的技术特点和优缺点如下：
** 技术特点 **

使用了 Vue 和 Element UI 作为技术栈，支持多种常用的表单组件，如输入框、选择器、开关、日期选择器等。
提供了在线可视化的表单设计器，可以通过拖拽和配置的方式来设计表单页面。
提供了一键生成 Vue 代码的功能，可以将设计好的表单导出为完整的 Vue 组件，包含 HTML、CSS 和 JS 。
提供了导出和导入 JSON 表单的功能，可以将设计好的表单导出为 JSON 格式，也可以将 JSON 格式的表单导入到设计器中。
提供了自定义组件和扩展组件的功能，可以将自己开发的组件或者第三方组件导入到设计器中，一样可以进行配置和生成。

优缺点

优点：form-generator 表单设计器的优点是可以实现快速开发表单页面，减少重复的代码编写，提高开发效率；支持多种表单组件和自定义组件，提高用户体验；支持导出和导入 JSON 表单，提高表单的可移植性和复用性。
缺点：form-generator 表单设计器的缺点是没有提供表单存储引擎的技术方案，需要用户自己选择合适的数据库来保存表单的结构和数据。它也没有提供数据源管理功能，不能对接口数据进行管理和操作。它也没有提供预览和测试功能，不能在设计器中直接查看表单的效果和功能。

f-render

https://github.com/dream2023/f-render
技术栈

f-render 是基于 Vue3 和 Element Plus 的表单设计器，使用了 composition api 和 TypeScript，并且支持 JSON Schema 和 Formily。

优点

-支持多种表单控件，包括基础组件、布局组件、高级组件和自定义组件。
支持表单验证、数据联动、事件触发等功能，可以实现复杂的表单逻辑。
支持一键生成代码和预览效果，方便开发者快速使用和调试。
支持国际化和主题切换，提高了用户体验和可定制性。

缺点

目前还是一个相对新的项目，可能存在一些 bug 和不稳定的地方。
相比于一些其他的表单设计器，如 vue-form-making 或 k-form-design ，f-render 的文档和示例还不够完善和丰富。
f-render 只支持 Vue3 和 Element Plus，如果需要使用其他的框架或 UI 库，可能需要进行一些改造或适配。

avue-form-design

https://github.com/sscfaith/avue-form-design
技术栈
avue-form-design 是基于 Avue 的表单设计器，使用了 Vue2 和 Element UI，并且支持 JSON Schema 和 Bladex 工作流插件。
优点

支持多种表单控件，包括输入框、选择框、日期时间、上传、富文本等。
支持拖拽式操作，可以快速构建一个表单。
支持一键生成代码和预览效果，方便开发者快速使用和调试。
支持表单验证、数据联动、事件触发等功能，可以实现复杂的表单逻辑。
支持基于 Bladex 的工作流插件，可以实现流程审批等功能。

缺点

目前还是一个相对新的项目，可能存在一些 bug 和不稳定的地方。
相比于一些其他的表单设计器，如 form-generator 或 form-create ，avue-form-design 的文档和示例还不够完善和丰富。
avue-form-design 只支持 Vue2 和 Element UI，如果需要使用其他的框架或 UI 库，可能需要进行一些改造或适配。

表单存储方案分析

直接使用关系型数据库：这个方案是将数据模型的可视化操作转成数据库 DDL，比如添加了一个字段，系统会自动生成表结构变更语句。这个方案的优点是可以满足企业级复杂应用系统需求，支持直连外部数据库，性能高和灵活性强，开发人员容易理解。缺点是需要账号有创建用户及 DDL 权限，实现成本较高，DDL 执行时会影响线上性能，部分数据库不支持 DDL 事务。
使用文档型数据库：这个方案是使用 MongoDB 等文档型数据库来存储用户自定义数据，不需要预先定义表结构。这个方案的优点是实现简单，用户体验可以做得更好。缺点是难以满足企业级复杂业务系统需求，无法支持外部数据库，数据是孤岛，不支持高级 SQL 查询。
使用关系型数据库行转列：这个方案是使用 WordPress 等可扩展平台里使用的技术，通过各种 meta 表来存储用户自定义数据。这个方案的优点是实现简单，扩展性强。缺点是性能低下，查询复杂度高，难以满足复杂业务需求。
PostgreSQL和MySQL的json数据类型：来存储和查询表单数据，并且支持json字段进行复杂查询。此外数据库也支持关系型存储。这样就同时兼顾了关系型和非关系型。如果数据量大的话，需要对Json字段进行多条件分析统计搜索，可以考虑使用Elasticsearch。