低代码——表单生成器以form-generator为例

主要执行流程说明：

1. 初始化阶段 ：

   • 接收表单配置对象formConf
   • 深拷贝配置，初始化表单数据和验证规则
   • 处理每个表单组件的默认值和特殊配置（如文件上传）

2. 渲染阶段 ：

   • 通过render函数创建el-form根组件
   • 递归渲染表单项，根据layout类型选择渲染方式
   • 使用render组件渲染具体的表单元素

3. render组件处理 ：

   • 创建Vue渲染所需的数据对象
   • 处理插槽内容
   • 绑定事件处理器
   • 构建最终的渲染数据对象
   • 渲染具体的表单元素

4. 事件处理 ：

   • 统一的表单提交和重置处理
   • 各个表单元素的值变更处理
   • 特殊组件（如文件上传）的自定义事件处理

以下是一些基于 Vue 3 的开源表单生成器项目，适用于低代码开发、动态表单渲染和可视化表单设计等场景：(掘金)

1. form-create

• 简介：通过 JSON 配置生成动态表单，支持数据收集、验证和提交功能。
• 特点：内置 20 多种表单组件，支持多种 UI 框架（如 Element Plus、Ant Design Vue 等）。
• GitHub：https://github.com/xaboy/form-create
• 在线设计器：http://form-create.com/v3/designer?fr=github(CSDN博客)

2. Variant Form (VForm)

• 简介：提供可视化表单设计器和渲染器，支持 Vue 2 和 Vue 3。
• 特点：支持 Element UI 组件库，可一键生成源码。
• GitHub：https://github.com/vform666/variant-form
• 官网：https://www.vform666.com/(CSDN博客)

3. FormKit

• 简介：功能强大的表单框架，简化表单结构、验证、主题、提交等流程。
• 特点：提供 24+ 可访问的输入组件，20+ 内置验证规则，支持自定义验证。
• 官网：https://formkit.com/(FormKit)
  在这里插入图片描述

4. Vueform

• 简介：全面的表单框架，支持 Tailwind CSS、Bootstrap、Material 等。
• 特点：提供拖放式表单构建器，支持导出 JSON，易于集成。
• 官网：https://vueform.com/
• GitHub：https://github.com/vueform/vueform(Vueform, GitHub)

5. form-generator

• 简介：基于 Element UI 的表单设计及代码生成器。
• 特点：支持在线拖拽生成组件，可导出 JSON 表单，适用于 Vue 项目。
• GitHub：https://github.com/JakHuang/form-generator
• 示例：https://mrhj.gitee.io/form-generator/#/(CSDN博客, 阿里云开发者社区)

6. Everright-formEditor

• 简介：可视化低代码编辑器，支持 PC 和移动端。
• 特点：依赖 Element Plus 和 Vant，内置适配器，适配多种组件。
• GitHub：https://github.com/Liberty-liu/Everright-formEditor
• 官网：https://everright.site/formEditor/introduction.html(CSDN博客)

7. epic-designer

• 简介：可视化设计器组件，支持拖拽生成 JSON 配置。
• 特点：支持多种 UI 组件库（如 Element Plus、Ant Design Vue、Naive UI）。
• GitHub：https://github.com/Kchengz/epic-designer(GitHub)

这些项目各有特色，选择时可根据项目需求、UI 框架兼容性、是否需要可视化设计器等因素进行评估。