表单网页设计代码,html网页表单设计 收藏 0

一文看懂企业级低代码表单的设计

点击“导出JSON”按钮

路径：动态表单配置》新增

将绘制表单生成的json串复制到“表单json字符串”中

输入表单名称、实体表名；点击确定，生成对应的表单和库表

路径：业务列表配置管理》新增

“23abfa734fe04c13b7c14cb6d63469c9”

key：key值索引，唯一

lable：标题头中文名

prop：对应表单设计器该属性的唯一名称

width：宽度

headerAlign：标题头对齐

align：内容对齐

scope：是否设置为全局

sortable：是否可排序

1、配置菜单

路径：菜单管理》新增

2、配置参数

路由地址：autoListInfo/autoListInfo12 需要唯一

组件路径：autoListInfo/autoListInfo 固定

权限标识：system:autoListInfo:index

路由参数：{\”listid\”:\”53bdb547934b440d940c6d383560cadb\”,\”formId\”:\”23abfa734fe04c13b7c14cb6d63469c9\”}

系统管理》角色管理，给表单管理员分配权限

刷新页面，再表单管理下就可以看到个人信息收集的菜单；点击菜单就可以做CRUD操作了

超牛 Vue+ElementUI 可视化表单设计器组件FormMaking

今天给小伙伴们推荐一款强大的Vue可自由拖拽表单设计器组件。

vue-form-making 基于vue.js简单高效的表单设计器组件，star高达3.3K+。简单拖拽即可进行表单设计，可生成/导出json及代码，支持i18n国际化。

功能特性

• 可视化配置页面
• 基于vue2.0桌面端组件库Element-UI
• 提供栅格布局，并采用flex实现对齐
• 一键预览配置的效果
• 一键生成配置json数据
• 一键生成代码，立即可运行
• 提供自定义组件满足用户自定义需求
• 提供远端数据接口，方便用户需要异步获取数据加载
• 提供功能强大的高级组件
• 支持表单验证
• 快速获取表单数据
• 国际化支持

CDN方式引入

NPM安装

引入组件

使用插件

语言配置

FormMaking 组件支持中文简体(zh-CN)和英文(en-US)两种语言，默认使用中文简体。

富文本编辑器

如果需要使用富文本编辑器，需要单独引入 vue2-editor

提供各种演示文档及丰富的示例

页面布局

数据绑定

ok，就分享到这里。希望对大家有所帮助。如果喜欢，记得多支持下哈。

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 表示的生成和解析方面的工作，颇具技巧；同时，该项目本身也是一个优秀的前端应用，感兴趣的开发者可以进行代码的阅读学习，参与开源贡献。

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