form generator ——Element UI表单设计及代码生成器

已于 2023-01-04 17:39:55 修改
阅读量1.6w 收藏 21
点赞数 4
CC 4.0 BY-SA版权
分类专栏： element ui 表单设计及代码生成器 文章标签： vue
于 2020-05-25 10:06:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yehaocheng520/article/details/106326826
本博客介绍了一个基于ElementUI的表单设计及代码生成器，支持可视化设计表单和一键生成原生的vue单页表单代码。配合vscode插件，可在设计器中进行表单栅格化布局和表单校验，同时提供在线编辑器修改代码并实时预览。适用于基于Element的vue项目。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

form generator

Element UI表单设计及代码生成器，可将生成的代码直接运行在基于Element的vue项目中。

网站地址:https://mrhj.gitee.io/form-generator/#/
GitHub:https://gitee.com/mrhj/form-generator
网站描述:vue开源Element UI表单设计及代码生成器

特点插件
可视化设计表单vscode-plugin分支配套插件为：form-generator-plugin
一键生成原生的vue单页表单代码使用插件可右键打开设计器
100%拓展性直接将代码保存到工程中
在线编辑器修改生成的代码并实时预览安装插件请在vscode中搜索：jakHuang或Form Generator Plugin
表单栅格化布局
支持表单校验
快速查阅Element UI官方文档
配套vscode插件

使用方法：
从gitHub下载代码，然后执行：
在这里插入图片描述
在这里插入图片描述

elementui可视化设计_基于Vue,ElementUI开发的一款表单设计器
weixin_36116366的博客
01-12 778
介绍基于Vue,ElementUI开发的一款表单设计器，提高表单开发效率的利器，让开发者从枯燥的表单代码编写中解放出来image特性可视化配置页面提供栅格布局，并采用flex实现对齐一键预览配置的效果一键生成配置json数据一键生成代码，立即可运行提供自定义组件满足用户自定义需求提供远端数据接口，方便用户需要异步获取数据加载提供功能强大的高级组件支持表单验证快速获取表单数据CDNInstallnp...
activiti表单设计器_Form-Generator - Element UI 表单设计与代码生成器
weixin_39715290的博客
10-28 4588
Element UI 目前在中后台项目中应用广泛，是十分流行的 Vue 组件框架。而表单元素，作为最常用的用户输入组件，在设计开发过程中几乎都要涉及，且往往大同小异。能不能减少重复的代码编写工作呢？能不能甚至不写代码，点几下鼠标就能生成想要的表单呢？Form-Generator，这个基于 Element UI 框架 Form 元素的表单设计与代码生成器，就能解放你的双手。ElementUI框架简介...
表单生成器 formGenerator
abook24的专栏
03-27 7655
<!--自定义表单--> <link href="/plugins/formGenerator/formGenerator.css" rel="stylesheet"> <script src="/plugins/formGenerator/formGenerator.js"></script> <script src="/plu...
elementui的表单可视化编辑器自动生成表单验证代码
08-12
element-ui 的表单可视化编辑器，自动生成表单验证代码。不是一个可视化解决方案，更像是生成模板的工具。为解决笔者记不住 element-ui 表单验证写法而生。
如何实现 Vue 动态表单生成器（原理 + 实战）
最新发布
2501_92234528的博客
06-06 1039
Vue 的插槽机制允许我们在组件内部预留一些位置，让使用者可以自定义插入内容。在动态表单生成器中，我们可以使用具名插槽，让用户自定义表单的提交按钮或其他特定的表单项。<template>-- 动态渲染表单项 -->/></div></slot></form>通过以上步骤，我们成功实现了一个 Vue 动态表单生成器。利用 Vue 的动态组件渲染、表单校验和插槽机制，我们可以根据不同的 JSON 配置动态生成表单，并对用户输入的数据进行校验。
【免费下载】 Element UI 表单设计及代码生成器 - form-generator 教程
gitblog_00013的博客
08-08 1868
Element UI 表单设计及代码生成器 - form-generator 教程 1. 项目介绍 form-generator 是一个基于 Element UI 的表单设计与代码生成器工具。它允许用户通过直观的图形界面设计自定义表单，然后自动生成对应的前端代码，简化开发流程，提高效率。这个项目使用了 Vue.js 框架，并且支持与其他业务系统集成。 2. 项目快速启动 环境准备 确保已经安装了 ...
【亲测免费】 探索 f-render：基于 ElementUI 的表单设计器
gitblog_00233的博客
08-19 450
探索 f-render：基于 ElementUI 的表单设计器 在现代 Web 开发中，表单是不可或缺的一部分，它们是用户与系统交互的主要方式。然而，创建和维护表单往往是一项耗时且重复的任务。为了解决这一问题，f-render 应运而生，它是一个基于 ElementUI 的表单设计器，旨在通过可视化工具大大简化表单的创建和定制过程。 项目介绍 f-render 是一个开源的表单设计工具，它依托于 ...
[工具推荐] element-ui表单设计/代码生成器
热门推荐
kinghzking的专栏
01-17 1万+
文章目录导读form-generatorform-generatorJFormDesigner参考资料 导读 天下武功，唯快不破。写代码也是这样，在Coding业漫长的进化史中，各种框架层出不穷，程序猿们想了各种方案来帮助自己更快的完成自己的任务。 今天要分享的就是，基于国人自主开发element-ui的几个可视化代码生成器。 form-generator 介绍 gitee星数：2.8K gitee地址： https://gitee.com/mrhj/form-generator 国内预览地址： htt
form-generator：元素UI表单设计及代码生成器
02-06
元素UI表单设计及代码生成器，可将生成的代码直接运行在基于元素的vue项目中；也可生成JSON表单，使用配套的解析器将JSON解析成真实的表单。 【】【】 【 】【】 友情链接 vue-admin-beautiful- vue-admin-...
Element UI表单设计及代码生成器.rar
05-28
设计器基于Element UI ，可通过点击或拖拽的方式设计基本表单， 设计器生成的代码可直接运行在基于 Element 的 vue 项目中。 github仓库 https://github.com/JakHuang/form-generator 码云仓库 ...
vue-form-generator:vue3 + ts + element-plus表单生成器
04-10
Vue Form Generator是一款基于Vue.js的库，特别针对Vue 3、TypeScript以及Element Plus组件库设计的动态表单生成器。这个工具允许开发者通过JSON schema快速构建复杂的表单，极大地提高了开发效率，减少了手动编写...
vue-formbuilder:ElementUI 表单生成器
05-30
vue-formbuilder2.0 基本代码是从克隆的，并做了一些改进。 项目设置 npm install 为开发编译和热重载 npm run serve 为生产编译和缩小 npm run build 运行你的测试 npm run test Lints 和修复文件 npm run lint 自定义配置 请参阅。
Element UI表单设计及代码生成器-javascript
06-21
Element UI表单设计及代码生成器，可将生成的代码直接运行在基于Element的vue项目中。
el-form-design:一个基于element ui的可拖拽生成表单的表单设计器
05-10
el-form-design 一个基于element ui的可拖拽生成表单的表单设计器 有任何意见建议或者问题请在我 下留言 或者提 issues 我将尽最大努力解决 使用方法 # 1.安装 npm install el-form-design # or yarn install el-form-design # 2. 导入 import elformdesign from 'el-form-design' # 因为是基于 element ui 的 所以可能需要用户提前安装 element ui 并全部导入 Vue.use(ElementUI); Vue.use(elformdesign); # 3 使用 # 直接在页面中 使用 标签 即可展示出 表单编辑页面 示列代码 (表单设计页面) <di
基于 ElementUI 的表单设计器
08-26
f-render 是基于 vue-ele-form 开发的可视化表单设计工具, 适用于 各种流程引擎和动态表单项目，大大节省你的开发时间；
vue-form-builder:使用Vue.js和Element UI构建并生成表单源代码的拖放表单构建器平台（基于vue和element-ui实现的表单设计平台，生成Element UI的表单源代码）
03-23
形式生成器 简体中文| 简介 一个通过拖拽生成表单页面的平台，基于Vue.js和Element UI开发，并生成表单源代码（WYSIWYG），可以让表单开发简单而高效。 本项目在基础上二次开发，目的是生成表单的Element UI原始代码，然后将生成的源码放在项目中使用，代替手写表单的工作。 在线访问： 特性 可视化配置页面 提供布局布局，并采用flex实现对齐 一键生成代码，立即可运行 提供自定义组件满足用户自定义需求 提供功能强大的高级组件 国际化支持 生成元素UI表单源代码（方便开发者拖拽生成表单，复制源码到项目中快速开发） 提供早期数据接口，方便用户需要异步获取数据加载 支持表单验证 快速获取表单数据 支持 如果你发现了新的bug，或者有新的功能要求，请新建一个问题 浏览器支持 现代浏览器和Internet Explorer 10+。 IE浏览器/边缘 火狐浏览器 Chro
vue-ele-form-generator可视化表单设计工具 v3.1.0.zip
03-27
在毕业设计论文中，"vue-ele-form-generator"可以作为一个实际应用案例，用于探讨前端开发中的动态表单生成技术，或者研究如何通过可视化工具提高软件开发效率。学生可以分析其架构设计，探讨组件化、模块化的实现...
Vue ElementUI 表单设计器 代码生成器
记事本
12-28 6447
界面效果 体验地址 github gitee（国内） 特色： 1、支持ElementUI组件库，未来会持续添加更多组件库支持。 2、支持多达36种控件，满足各种业务场景。 3、组件配置详细，基本1:1还原了组件库的所有配置，当然，不常用的配置为了界面简洁我们放在了高级设置里。 4、支持各种子表单控件，满足复杂的数据格式。 5、支持生成json逆向渲染表单，json格式完全遵循vue render标准，支持透传属性、事件、插槽等给内部控件，灵活度丝毫不亚于直接生成vue代码。 6、支持
基于vue-element-ui的一款表格设计器table-making
weixin_40073115的博客
07-05 9257
简介 如果你的项目中有很多的表格，即使用elment-ui table插件你也必须每次都必须写一遍代码进行开发，如果你使用过表单设计器，你就会希望能得到一款像form表单设计器一样可以通过拖拽配置快速生成一个表格，table-making就是一款不错的表格设计器。参照form-making的源码，并可以集成进form-making中配合表单或其他可视化工具中使用快速设计出表格，并且可以在vue项目中渲染。 该插件包含两个重要组件 TableMaking 表格设计器 GenerateTable 表格渲染器 g
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

叶浩成520

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值