基于vue的 表单设计器（拖拽生成表单）

最新推荐文章于 2024-08-14 10:36:35 发布
最新推荐文章于 2024-08-14 10:36:35 发布
阅读量2w 收藏 145
点赞数 21
分类专栏： 前端 html 文章标签： vue.js npm node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54854317/article/details/123220673
版权
本文介绍了四个基于Vue的表单设计器，包括基于vue+elementui、vue+ant-design-vue的设计器，以及支持iview、element-ui、ant-design-vue的表单生成器。这些设计器允许开发者通过拖拽方式快速创建表单，生成可运行的代码，提高开发效率。
摘要由CSDN通过智能技术生成

日常开发时想要快速构建节省时间或者功能需求需要拖拽生成表单，推荐使用以下表单设计器。

1.基于vue+elementui 的表单设计及代码生成器

Form Generator

Element UI表单设计及代码生成器，可将生成的代码直接运行在基于Element的vue项目中；也可导出JSON表单，使用配套的解析器将JSON解析成真实的表单。

码云仓库：form-generator: Element UI表单设计及代码生成器

演示地址：form-generator

安装依赖：

npm install

JSON解析器：

// 安装
npm i form-gen-parser

vscode插件form-generator-plugin

此项目将form-generator的vscode-plugin分支封装为一个vscode插件，拓展了form-generator的文件写入能力； 帮助使用element UI的开发者完成基本的表单代码搭建任务&

最低0.47元/天 解锁文章
KF_19924636653
关注
专栏目录
自定义表单（拖拽式表单）
08-16
通过拖放的方式创建表单jQuery formBuilder，基于jQuery formBuilder 略作修改，
拖拽式表单设计器
04-17
1.将项目发布到tomcat后，直接访问 localhost:8080/formDesign/bootstrap/formDesign.jsp 2.表单设计好之后，点击下载--保存表单文件(.html)到本地 3.将保存的文件放入项目中，并在lay.jsp中指定位置包含表单文件 4.访问lay.jsp即可看到渲染之后的表单文件
vue-draggable入门拖拽生成简单的表格
最新发布
qq_51272399的博客
08-14 303
通过拖拽字段自动生成表格内容，实现数据实时分析的效果。
基于vue和element-ui实现的表单设计器 通过拖拽方式快速生成一个表单页面
06-08
基于vue和element-ui实现的表单设计器。通过拖拽方式快速生成一个表单页面，表单可以导出json格式,也可以将其他人绘制的表单通过json导入方式进行还原。针对选择性控件（radio，select，checkbox）提供选择后触发调用，支持表达式。对选择性控件支持数据联动功能，通过此功能可以做多级联动。动态表格提供单独的弹框进行填写和编辑。布局方式多样化，提供栅格，表格等多种布局方式。支持表单预览模式，表单内容全部非组件化，全部文本显示。针对选择性控件（radio，select，checkbox）选择后将对应的label进行单独存储，方便展示
动态表单生成Demo(Vue+elment)
yue200403的博客
10-31 647
本文将介绍如何使用vue和elment ui组件库实现一个简单的动态表单生成的Demo。主要涉及两个.vue文件的书写，一个是动态表单生成的组件文件，一个是使用该动态表单生成的组件。
vue自定义表单设计器思路
acheng
03-14 3941
在Vue中，可以使用自定义组件实现表单设计器。自定义组件允许我们在Vue应用程序中创建可复用的组件。这些组件可以在多个Vue组件中使用，使我们能够将应用程序拆分成可维护的部分。为了实现表单设计器，我们将创建两个Vue组件：FormBuilder和FormRenderer。现在，我们已经了解了自定义表单设计器所需的两个Vue组件的功能。让我们开始实现它们。我们将使用Vue CLI创建一个新的Vue项目。在项目中，我们将创建两个Vue组件：FormBuilder和FormRenderer。
vueeleformgenerator是专为vueeleform开发的可视化表单设计工具
08-10
vue-ele-form-generator是专为vue-ele-form开发的可视化表单设计工具, 让表单开发的效率更上一层楼
Vue表单设计器
MMKJSH的博客
10-31 809
Vue表单设计器
vue-ele-form-generator可视化表单设计工具 v3.1.0
08-14
为您提供vue-ele-form-generator可视化表单设计工具下载，vue-ele-form-generator是专为vue-ele-form开发的可视化表单设计工具，并且支持vscode 插件、cli 本地启动、在线设计多种方式，让表单开发的效率更上一层楼！vue-ele-form-generator特性：1、提供vscode 插件更贴近日常开发2、可视化配置页面3、提供 vue-ele-form 全部基础组件 和 全部扩展组件4、支持组件属性点选配置5、支持本
vue拖拉拽生成表单
xy19950125的博客
08-23 8600
拖拉拽快速生成页面
vue_form_design:基于Vue3.0的表单设计器
03-27
vue_form_design 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
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-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的在线拖拽生成表单页面的可视化表单制作工具
11-04
"基于vue+element的在线拖拽生成表单页面的可视化表单制作工具"正是这样一款高效解决方案，它允许开发者通过简单的拖放操作快速构建复杂的表单界面，同时支持属性设置实时响应，大大提升了开发者的生产力。...
一款基于Vue3.0的低代码可视化表单设计器工具，轻松搞定表单
2401_85161170的博客
05-20 3181
基于Vue的低代码可视化表单设计器工具，通过数据驱动表单渲染 用户可以通过可视化界面快速高效地创建表单，提高开发者对表单的开发效率，节省开发者的时间
完整的项目源码！在线考试完整系统源码（可接私活）
m0_68103666的博客
04-11 970
最近有一些读者问我有没有完整的，今天给大家整理了一下，并且录制了搭建的教程，分享给大家。
基于vue的拖拽表单生成页面
05-26
你可以使用一些现成的 Vue 组件库来实现拖拽表单生成页面的功能，例如 Element UI 或者 Ant Design Vue。 具体实现的步骤如下： 1. 定义表单项的数据结构，包括表单项的类型、名称、默认值、选项等信息。 2. 使用拖拽组件库实现拖拽表单项的功能。例如，可以使用 Element UI 的 `el-draggable` 组件实现拖拽功能。 3. 在拖拽表单项时，动态渲染表单项组件，并将表单项的数据绑定到组件上。 4. 将表单项数据保存到一个数据模型中，以便后续使用。 5. 使用数据模型动态生成表单页面。可以使用 Vue 的动态组件 `component` 标签来实现。 6. 提供保存表单数据的功能，并将数据提交到后端服务器进行处理。 7. 可以使用 Vuex 管理表单数据状态，以便在不同组件之间共享数据。 以上是基本的实现步骤，具体的实现细节需要根据具体的需求进行调整。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值