表单代码、表单代码html登录界面 收藏 0

Form-Generator – Element UI 表单设计与代码生成器

Element UI 目前在中后台项目中应用广泛，是十分流行的 Vue 组件框架。而表单元素，作为最常用的用户输入组件，在设计开发过程中几乎都要涉及，且往往大同小异。能不能减少重复的代码编写工作呢？能不能甚至不写代码，点几下鼠标就能生成想要的表单呢？Form-Generator，这个基于 Element UI 框架 Form 元素的表单设计与代码生成器，就能解放你的双手。

ElementUI框架

Form-Generator，是 JakHuang 在 Github 和码云上开源的表单设计与代码生成器，项目代码位于 https://github.com/JakHuang/form-generator，国内镜像位于 https://gitee.com/mrhj/form-generator。

Form-Generator 基于 Element UI 组件库的 Form 表单组件，开发了一个表单设计器，可以在设计器中，点选不同的输入组件构建表单，设计器则会自动生成对应的 Vue 代码，可以项目中使用。也可以把设计好的表单以 JSON 的格式导出，方便存储传输，使用时利用配套的解析器把 JSON 解析为设计好的表单即可使用。

form-generator使用

Form-Generator 需要 Node.js 10+，可以使用 NPM 进行安装：

也可以自行下载项目代码进行构建：

然后安装依赖，使用 YARN

或 NPM 安装依赖

在本地运行表单设计器，运行

也可以构建之后进行部署

Form-Generator 项目配套有 JSON 解析器，可以把 JSON 转化为真实的表单代码，可以使用 NPM 安装：

另外，form-generator 还有配套的 VSCode 插件 Form Generator Plugin，使用 VSCode 的开发者们可以进行安装，帮助完成基本的表单代码搭建任务。

fms-form-generator库

Form-Generator 的主要界面是一个表单设计器：

表单设计器

可以看到，界面的左侧摆放了不同的输入组件，包括单行文本、计数器、下拉选择、日期范围和按钮等，基本满足了一般项目对于表单的所有需求。

表单设计器的组件选择

界面中间是设计得到的表单，点击左侧的组件，便可在表单中添加。同时，表单中还提供了组件的复制和删除功能，可以自由进行编辑。

界面的右侧是组件属性和表单属性，可以对当前选中的组件的各项属性进行修改，如字段名、标题、标签宽度、默认值、尺寸等，进行所需组件的定制；也可以对表单属性进行修改，包括表单模型、校验模型、标签对齐等，实现表单层级的配置。

组件属性编辑

在完成了表单的设计之后，就可以点击界面上部的运行按钮，在这里我们可以选择生成类型，包括页面和弹窗两种，其中弹窗类型会把表单嵌入到对话框组件中。

生成类型

完成类型选择后，我们就能得到生成的 Vue 代码，包括 Vue 模板、JS 和 CSS 代码：

Vue模板代码

JS代码

可以看到，生成的代码可读性高，质量较好，可以直接引入到项目中进行使用。代码生成器也提供了一个美观的编辑器界面，可以直接对生成的代码进行编辑，并在右侧重新渲染修改的表单。

除了直接生成代码外，form-generator 还提供了把表单导出为 JSON 格式的功能，便于进行存储和传输。Form-generator 设计了一种具有特定格式的 JSON 格式用于 Element UI 表单的表示，可以在代码生成器中直接导出 JSON 文件，使用时再利用配套的 form-gen-parser 进行解析，重新生成表单代码。

form-generator的JSON表示

表单的JSON表示以fields列表存储各表单项，各表单项一般包括：

• __config__：包括如标签、宽度等配置属性
• __slot__：表单项的插槽
• __vModel__：绑定的数据模型
• style、disabled等原生属性

以此 JSON 文件，便可还原表单，得到生成的 Vue 代码。我们还可以以此为模板，添加变量，只需修改 JSON 数据就进行相似表单的自动化批量生成。

表单的JSON表示

Form-Generator 作为 Element UI 的表单设计和代码生成器，简化了表单的设计和代码编写工作，使得表单的设计工作也能够“所见即所得”，在一些前端设计定制化要求不高的场景下，使用起来十分方便，既使得设计人员能够获得期望的表单设计，也减轻了代码开发人员的在前端设计方面的额外工作，一举两得。

Form-Generator 的实现需要对于 Vue 和 ElementUI 十分熟悉，尤其在表单的 JSON 表示的生成和解析方面的工作，颇具技巧；同时，该项目本身也是一个优秀的前端应用，感兴趣的开发者可以进行代码的阅读学习，参与开源贡献。

低代码表单，全新表单打印，字段扩展属性，隐藏禁用规则配置升级

FormMaking 表单设计器是一款基于 Vue 的可视化低代码开发工具，它极大地简化了表单的开发过程，使开发者能够从繁琐的代码编写中解放出来，从而更加专注于业务逻辑的实现。通过 FormMaking，用户可以快速提升开发效率，同时节省研发成本。该工具已经在OA系统、考试系统、报表系统、流程管理等多个领域得到了广泛应用。

FormMaking 的核心优势在于其可视化的操作界面，它支持创建符合 Element 和 Ant Design 风格的表单，满足了广泛的使用需求。技术支持 Vue2/Vue3，内置了 i18n 国际化解决方案，方便了二次开发。同时，它还支持多终端适配，包括 PC、Pad、Mobile 等，能够提供丰富的布局和高级容器，以及自定义扩展能力。数据源管理功能则确保了表单与后端数据的完美结合，而低代码模式则使得动作事件的交互和复杂逻辑操作变得简单快捷。

全新的扩展属性配置，可以为基础字段和自定义字段添加自己的属性配置信息，支持字符串、数值、布尔值和函数配置。

为日期选择器设置快捷选项和禁用日期：

可以在字段属性面板中对当前字段的隐藏禁用进行动态控制，只需要选择表达式，在表达式面板中返回满足的条件即可。

支持子表单内字段控制

表单添加了全新的打印方法，优化了打印效果，直接生成pdf并弹出打印预览窗口，不用再单独为打印设置样式。

FormMaking 经过五年的迭代升级和优化，功能丰富且稳定，具有极强的可扩展性，特别适用于企业级开发。高级版本目前已服务于众多企业，包括国企、上市公司和跨国企业，已广泛应用于OA系统、考试系统、报表系统、流程管理等众多项目中，获得了广泛认可。

• 简单易用：主流的拖拽可视化操作方式，配置简单，学习成本低。
• 丰富的布局和字段：支持数组、对象等复杂类型表单数据创建，覆盖几乎所有表单应用场景。

• 一次购买，永久使用：购买后即获得永久使用权。

• 高水平技术团队：FormMaking 团队由全职高级前端技术人员组成，持续添加新功能和处理相关问题，确保每月版本迭代更新。
• 专业化一对一技术支持：购买后，您可以与 FormMaking 技术团队实时交流，快速获得问题的解决方案。

• 用户反馈优先：您可以参与我们的更新计划，提供宝贵意见，我们将优先考虑并实施您的建议。

• 易上手的代码：FormMaking 源代码采用 Template 风格的 API，方便各个层次的开发人员阅读和进行二次扩展开发。

• 全面的文档支持：我们提供完善的文档教程，包括设计器操作手册、上手文档、API 目录和二次开发文档。

选择 FormMaking，您将拥有一个强大、易用、可扩展的表单设计器，助力信息化系统建设，提升开发效率。

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