表单代码生成器—表单代码生成器下载 收藏 0

基于 Vue.js 表单创建器FormCreate

今天继续给小伙伴们分享一款超强大的Vue表单生成器FormCreate。

form-create 一款 star高达2.2K+ 可通过JSON生成、的表单生成器。支持生成Vue组件，内置17种常用组件及自定义组件。

• 支持 3种 UI框架
• 双向数据绑定
• 支持使用 JSON 数据生成表单
• 栅格布局
• 内置组件缓存功能，提升渲染速度
• 内置组件生成器，可快速生成组件规则
• 支持自定义生成任何组件，提升表单的灵活性

• iViewUI 2.13.0+、iViewUI 3.x、iViewUI 4.x
• ElementUI 2.8.2+
• Ant-design-vue 1.5.3+

element-ui 预览效果

ant-design-vue 预览效果

以iview版本为例介绍如何在项目中使用 form-create。

另外还支持第三方组件 富文本、Markdown编辑器、JSON编辑器及代码编辑器。

非常优秀的一款Vue表单创建器组件，喜欢的朋友千万不要错过哟~~

ok，就介绍到这里。希望对大家有所帮助哈！

低代码可视化表单设计工具FormCreate

FormCreate设计器是一款基于Vue的低代码可视化表单设计器工具，它通过数据驱动表单渲染，使用户能够通过可视化界面快速高效地创建表单。

以下是对FormCreate设计器的详细介绍：

1. 可视化设计：用户可以通过拖拽组件的方式，快速构建表单布局。设计器提供了丰富的组件库，包括文本输入框、数字输入框、复选框、单选框、开关、下拉选择框等常用表单组件，以及级联选择器、颜色选择器、日期选择器、时间选择器、评分组件、滑块、文件上传等高级组件。
2. 动态渲染：FormCreate设计器支持基于JSON配置动态生成表单，无需手动编写繁琐的表单代码。用户可以通过修改JSON配置，快速调整表单的结构和样式。
3. 数据验证：内置数据验证功能，确保表单输入的正确性。支持多种复杂验证规则，如必填验证、格式验证等，确保输入数据的合法性。
4. 事件管理：支持配置的组件和表单事件，轻松处理各种动态交互，满足用户多样化的需求。例如，可以配置提交事件、点击事件等，以实现表单的提交、重置等功能。
5. 布局灵活：提供了栅格、弹性盒子、表格布局等多种布局方式，让表单布局变得简单且易于调整。同时，支持响应式布局，确保表单在不同设备和屏幕尺寸上都能良好显示。
6. 国际化：内置了中文、英文和日文三种语言选项，方便用户在不同语言环境下使用设计器。

1. 自定义组件：支持自定义组件的扩展和挂载。用户可以根据自己的需求，创建自定义的表单组件，并通过设计器进行拖拽和使用。同时，设计器支持将自定义组件转换为表单组件，以满足复杂业务需求。
2. 公式计算：提供了52种函数计算公式，能够满足用户在实际业务中的计算需求。例如，可以通过公式计算实现表单字段的联动更新、数据汇总等功能。
3. API操作：通过API可以快速操作表单，进行数据获取、设置、验证等操作。这为用户提供了更灵活、更强大的表单控制能力。
4. 阅读模式：支持阅读模式与表单模式无缝切换，显著提高代码复用率，优化生产效率，提升用户使用体验。

FormCreate设计器适用于各种需要表单开发的场景，如企业级应用、小型项目、移动端应用等。无论是简单的用户注册、登录表单，还是复杂的订单管理、数据录入表单，都可以通过FormCreate设计器快速构建。

1. 安装与引入：首先，需要在项目中安装FormCreate设计器，并在Vue项目中引入它。可以通过npm或yarn等包管理工具进行安装。
2. 配置与使用：在项目中配置FormCreate设计器，包括设置组件库、布局方式、验证规则等。然后，通过拖拽组件的方式构建表单布局，并配置表单事件和交互逻辑。
3. 生成与导出：完成表单设计后，可以生成对应的JSON配置，并导出为表单代码或模板。这样，就可以在其他项目中复用该表单设计。

综上所述，FormCreate设计器是一款功能强大、易于使用的低代码可视化表单设计器工具。它能够帮助开发者快速构建复杂的表单系统，提高开发效率，节省开发时间。

​

介绍几款表单设计器

做低代码平台的，需要做前端界面的设计，表单的设计必不可少，比如宜搭 、轻舟等都是大厂的低代码平台，他们的平台上都带了表单设计器，这些表单设计器组件是与其平台配套的，跟我们自己的技术架构可能不一样，无法拿来就用，并且他们也没有开源。

今天介绍2个我认为不错的表单设计器。

用户可以通过可视化界面快速高效地创建表单，提高开发者对表单的开发效率，节省开发者的时间。

gitee地址：https://gitee.com/xaboy/form-create.git

官网地址：https://www.form-create.com/

分为了开源版和商业版本，本质上还是通过json渲染动态渲染组件，商业板还有AI功能。

一款高效的低代码表单，可视化拖拽式设计，支持组件库二开，一键生成源码，享受更多摸鱼时光…

这个设计器是作者正在用的，作者基于开源版本正在做补充，增加了api的定义，与作者所在公司的其他前端组件进行了集成。

这个表单设计器也是分为了开源版和Pro版，Pro版本有更多功能，如弹窗、抽屉、子表单等。但作者认为，如果会前端代码可以在开源版上做二次开发，工作量也不大。

官网地址：https://www.vform666.com/

gitee地址:https://gitee.com/vdpadmin/variant-form

GitHub地址: https://github.com/dream2023/vue-ele-form

EpicDesigner是一个功能强大、开箱即用的拖拽式低代码设计器。它基于 Vue3 开发，兼容多套 UI 组件库，除了基础的页面设计功能，EDesigner 还提供了强大的扩展功能，可以让开发者根据自己的需求自由扩展和定制组件。此外，EDesigner 使用 JSON 配置来生成页面，可帮助开发者快速生成页面，提高开发效率。它提供了两个重要组件：EDesigner 设计器和 EBuilder 生成器。

官网地址：https://docs.epicjs.cn/

gitee地址：https://gitee.com/kcz66/epic-designer.git

这款看起来相对比较简单，也比较粗糙一些，功能也比较少，大家有喜欢的可以下载下来看看。

其实还有很多的表单设计器，像若以等框架中也带了一些表单设计器，大家都比较雷同，设计原理都差不多。

作者在所在公司开发了另外一种形式的设计器，更加灵活，目前用于了很多的银行信贷系统，可解决银行调查报告、审查报告、贷后检查报告等场景，下次给大家介绍一下。

今天是元旦，本来计划写低代码第一章的，可是在家要带娃，没有太多空闲时间，只能上班摸鱼时间来写。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com