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

最新推荐文章于 2024-06-17 11:06:44 发布
最新推荐文章于 2024-06-17 11:06:44 发布
阅读量828 收藏 3
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w1725034682/article/details/111695444
版权
本文介绍了一款基于Element UI的表单设计工具，具备可视化设计、一键生成vue代码、在线编辑预览等功能。同时提供VSCode插件，方便开发者直接将代码导入项目。附带QQ交流群和迭代计划，遵循MIT开源协议。
摘要由CSDN通过智能技术生成

简介

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

image

特点

  • 可视化设计表单
  • 一键生成原生的vue单页表单代码，100%拓展性
  • 在线编辑器修改生成的代码，并实时预览
  • 表单栅格化布局
  • 支持表单校验
  • 快速查阅Element UI官方文档
  • 配套vscode插件

插件

vscode-plugin分支配套插件为：form-generator-plugin；
使用插件可右键打开设计器，直接将代码保存到工程中。
安装插件请在vscode中搜索：

jakHuang
或
Form Generator Plugin

文档

源码

最低0.47元/天 解锁文章
new个大佬带我飞
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
elementui可视化设计_基于Vue,ElementUI开发的一款表单设计器
weixin_36116366的博客
01-12 680
介绍基于Vue,ElementUI开发的一款表单设计器，提高表单开发效率的利器，让开发者从枯燥的表单代码编写中解放出来image特性可视化配置页面提供栅格布局，并采用flex实现对齐一键预览配置的效果一键生成配置json数据一键生成代码，立即可运行提供自定义组件满足用户自定义需求提供远端数据接口，方便用户需要异步获取数据加载提供功能强大的高级组件支持表单验证快速获取表单数据CDNInstallnp...
form generator ——Element UI表单设计及代码生成器
yehaocheng520的博客
05-25 1万+
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 一键
form generator 表格编辑下拉选择功能
最新发布
weixin_44815800的博客
06-17 953
formGenerator扩展el-table组件并嵌入行内select功能
python脚本代码大全_【工具】代码生成器-python脚本
weixin_39953236的博客
11-23 129
我觉得造轮子这件事情，是谁都可以做的。只不过做得好或者不好而已，用心了做得就要优雅一点。之前用过java的代码生成器，什么pojodobodbo都能生成，于是我也来自己造一个轮子。造轮子的事情是没必要做得，费神费心，还没人家做得好，那么我还是要做，就当是体验一把了，看看细节是怎么实现的。前期准备：一台装有python、mysql的机器和若干待生成的表。python版本：3.6.4python安装m...
[工具推荐] 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
基于vue-element-ui的一款表格设计器table-making
weixin_40073115的博客
07-05 8968
简介 如果你的项目中有很多的表格，即使用elment-ui table插件你也必须每次都必须写一遍代码进行开发，如果你使用过表单设计器，你就会希望能得到一款像form表单设计器一样可以通过拖拽配置快速生成一个表格，table-making就是一款不错的表格设计器。参照form-making的源码，并可以集成进form-making中配合表单或其他可视化工具中使用快速设计出表格，并且可以在vue项目中渲染。 该插件包含两个重要组件 TableMaking 表格设计器 GenerateTable 表格渲染器 g
基于Vue的Element UI表单设计及代码生成器设计源码
04-09
本项目是基于Vue的Element UI表单设计及代码生成器设计源码，包含179个文件，其中120个JavaScript文件，21个SVG文件，15个Vue文件。该系统旨在提供一个便捷的Element UI表单设计及代码生成解决方案，使用户能够快速...
:sparkles:Element UI表单设计及代码生成器-React开发
05-27
Element UI表单设计及代码生成器，可将生成的代码直接运行在基于Element的vue项目中；也可导出JSON表单，使用配套的解析器将JSON解析成真实的表单。 简介 Element UI表单设计及代码生成器，可将生成的代码直接运行在...
Element UI表单设计及代码生成器-javascript
06-21
这个“Element UI表单设计及代码生成器”工具，专为 Vue.js 开发者设计，旨在简化表单创建过程，通过图形化界面设计表单布局，然后自动生成相应的 Vue.js 代码，这极大地提高了开发效率。 表单设计是Web应用开发中...
elementui的表单可视化编辑器自动生成表单验证代码
08-12
element-ui 的表单可视化编辑器，自动生成表单验证代码。不是一个可视化解决方案，更像是生成模板的工具。为解决笔者记不住 element-ui 表单验证写法而生。
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
vue-formbuilder:ElementUI 表单生成器
05-30
vue-formbuilder2.0 基本代码是从克隆的，并做了一些改进。 项目设置 npm install 为开发编译和热重载 npm run serve 为生产编译和缩小 npm run build 运行你的测试 npm run test Lints 和修复文件 npm run lint 自定义配置 请参阅。
基于 ElementUI 的表单设计器
08-26
f-render 是基于 vue-ele-form 开发的可视化表单设计工具, 适用于 各种流程引擎和动态表单项目，大大节省你的开发时间；
基于 vue 和 element-ui 实现的可视化表单设计器
04-19
基于Vue的可视化表单设计器，让表单开发简单而高效；高级版本目前已支持 Vue3。MakingForm 表单设计器（基于可视化操作快速设计出表单页面）。GenerateForm 表单生成器（根据设计器中获取的配置 json 数据，快速渲染出表单页面
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+Element-UI 使用 Vform 表单设计器
weixin_71933203的博客
08-29 6003
6.2、触发点击事件 使用axios与WebApi接口交互 将设计好的表单 以json的字符串的形式 保存到后台数据库。2、后台.Net Core WebApi增删改查接口照常写 注意添加修改时要通过post,FromBody进行传参。6.3.2、使用 axios 调用 WebApi 接口对组件进行赋值 使用此方法。、如果想要把你存入到数据库中表单数据进行修改。6、将设计好的表单保存到数据库中。5、运行后的页面效果 托拉拽控件。6.3、使用Vform渲染页面。1、表单设计器基础字段建议。......
vue element web 表单设计工具
热门推荐
无
12-07 3万+
工具概述 简介   项目名 dw-form-making，基于 element-ui 组件库的Web端表单设计工具。   项目技术栈vue、vue-cli3，可视化设计element-ui输入框、选择器、单选框等控件组成的Form表单，配置表单字段、标签、校验规则等。   较早版本采用vuex，由于发布npm包以及项目对vuex依赖性较高（即npm安装后还需配置vuex）等原因，故此种方案抛弃。使用vue.observable实现vuex的state、mutations部分。   项目第三方组件包括vue.
Vue ElementUI 表单设计器 代码生成器
记事本
12-28 6123
界面效果 体验地址 github gitee（国内） 特色： 1、支持ElementUI组件库，未来会持续添加更多组件库支持。 2、支持多达36种控件，满足各种业务场景。 3、组件配置详细，基本1:1还原了组件库的所有配置，当然，不常用的配置为了界面简洁我们放在了高级设置里。 4、支持各种子表单控件，满足复杂的数据格式。 5、支持生成json逆向渲染表单，json格式完全遵循vue render标准，支持透传属性、事件、插槽等给内部控件，灵活度丝毫不亚于直接生成vue代码。 6、支持
企业级Element UI表单生成器：配置驱动开发
在实际开发中，为了提高代码复用性和维护性，我们常常会将表单生成逻辑抽象出来，形成一个可配置的组件。文档中的"FromCreator"组件就是这样一种设计，它接受一个名为"config"的配置对象作为输入。这个配置对象包含...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

new个大佬带我飞

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

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

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

打赏作者

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

抵扣说明：

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

余额充值