一款基于 vue 及 element ui 的 可拖拽的 表单编辑器

最新推荐文章于 2024-05-20 15:09:32 发布
置顶 最新推荐文章于 2024-05-20 15:09:32 发布
阅读量5.1k 收藏 39
点赞数 7
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34164252/article/details/105918969
版权

 

前段时间做的一个项目需要用表单设计器，调研了一下没有找到很合适的，就自己撸了一个 。

由于写的比较仓促，代码比较混乱，后来发现表格功能也忘记做了，想加的时候也不太好加了，

而且有很多小伙伴也在找表单编辑器，找我要源码参考，我就索性决定重做了一个.

欢迎star 0.0

有任何意见建议或者问题请给我留言 或者提 issues 我将尽最大努力解决

源码地址

Demo地址

博客地址

前端小白请多指教
关注
  • 7
    点赞
  • 踩
  • 39
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
vue 表单拖拽生成器_基于 Avue 拖拽式表单设计器AvueFormDesign
weixin_42350470的博客
01-26 6076
前段时间有分享一个基于ElementUI可视化表单生成器。今天继续给大家分享一款优秀的表单设计器AvueFormDesign。avue-form-design 基于Avue构建的多功能表单设计器。拖拽式操作让您快速制作一个FORM表单。安装依赖$ npm i element-ui -S$ npm i @smallwei/avue -S安装表单组件$ npm i @sscfaith/avue-for...
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-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
一款基于Vue3.0的低代码可视化表单设计器工具，轻松搞定表单
最新发布
2401_85161170的博客
05-20 1156
基于Vue的低代码可视化表单设计器工具，通过数据驱动表单渲染 用户可以通过可视化界面快速高效地创建表单，提高开发者对表单的开发效率，节省开发者的时间
vue表格实现拖拽功能
不甜呐的博客
09-29 4897
嗨害嗨，简洁易上手的表格拖拽。
基于vue的 表单设计器（拖拽生成表单）
weixin_43765747的博客
02-18 2万+
日常开发时想要快速构建节省时间或者功能需求需要拖拽生成表单，推荐使用以下表单设计器。 1.基于vue+elementui 的表单设计及代码生成器 Form Generator 码云仓库：form-generator: Element UI表单设计及代码生成器 演示地址：form-generator ...
Project 3 :挖掘数据集中的关联商品
AwesomeDong的博客
09-08 520
三种方式 import pandas as pd import numpy as np from efficient_apriori import apriori #加载数据 data = pd.read_csv('Market_Basket_Optimisation.csv', header = None) data = data.fillna(0) #print(data) #将数据整理成Transaction列表 transaction = [] for i in range(data.shape[
基于vue和element-ui实现的表单设计器 通过拖拽方式快速生成一个表单页面
06-08
基于vue和element-ui实现的表单设计器。通过拖拽方式快速生成一个表单页面，表单可以导出json格式,也可以将其他人绘制的表单通过json导入方式进行还原。针对选择性控件（radio，select，checkbox）提供选择后触发...
el-form-design:一个基于element ui的可拖拽生成表单的表单设计器
05-10
一个基于element ui的可拖拽生成表单的表单设计器 有任何意见建议或者问题请在我 下留言 或者提 issues 我将尽最大努力解决 使用方法 # 1.安装 npm install el-form-design # or yarn install el-form-design # 2...
基于vue+element的在线拖拽生成表单页面的可视化表单制作工具
11-04
"基于vue+element的在线拖拽生成表单页面的可视化表单制作工具"正是这样一款高效解决方案，它允许开发者通过简单的拖放操作快速构建复杂的表单界面，同时支持属性设置实时响应，大大提升了开发者的生产力。...
vue-element-nocode-admin:element-ui 的代码可视化编辑
05-06
element-ui 的代码可视化编辑器，自动生成表单代码，列表代码。不是一个可视化解决方案，更像是生成模板的工具 :house: 网页版本，在preview分支 Install npm install -g ele-cli How to Use 服务端占用 3000 端口 ...
vuedraggable+element ui实现页面控件拖拽排序效果
10-17
主要为大家详细介绍了vuedraggable+element ui实现页面控件拖拽排序效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
基于vue+element的在线拖拽生成表单页面，支持属性设置实时响应
04-09
【标题】中的“基于vue+element的在线拖拽生成表单页面，支持属性设置实时响应”指的是一个使用Vue.js框架和Element UI库开发的Web应用。Vue.js是目前非常流行的前端JavaScript框架，它以轻量级、高性能和易用性著称...
vue实现H5拖拽可视化编辑器
CodingNoob
12-27 2526
一款专注可视化呵护哈平台工具，功能强大，高可扩展的HTML5可视化编辑器，致力于提供一套简单易用、高效创新、无限可能的解决方案。技术栈采用vue和typescript开发, 专注研发创新工具。
[开源]MIT开源协议，基于Vue3.x可视化拖拽编辑，页面生成工具
欧菲丽的博客
10-18 1758
基于Vue可视化拖拽编辑，页面生成工具。src / components / sliderassembly / index.vue // 左侧组件大全文件。src / layout / home / index.vue // 编辑页面文件。src / components / componentscom // 左侧组件目录。src / components / rightslider // 右侧组件目录。
vue3.0项目实现表单拖拽
qq_39189369的博客
07-21 1127
项目采用vue3.0+ts+elementPlus去开发管理后台，但element没有提供表单拖拽的功能，这里可以借用第三方库（SortableJS）来实现次需求。 github地址：https://github.com/SortableJS/Sortable 中文文档：http://www.sortablejs.com/index.html# 使用方式： 1. npm install sortablejs --save 2.在单页面使用importSortablefrom'sorta...
手把手带你写 Vue 可视化拖拽页面编辑器
weixin_53777231的博客
02-01 1万+
可视化页面编辑器，听起来可望不可即是吧，先来张动图观摩观摩一番！ 实现这功能之前，在网上参考了很多资料，最终一无所获，五花八门的文章，都在述说着曾经的自己！ 那么，这时候就需要自己去琢磨了，如何实现？ 需要考虑到： 拖拽的实现 数据结构的定义 组件的划分 可维护性、扩展性 对象的引用：在这里是我感觉最酷的技巧了，来一一讲解其中的细节吧！！ 拖拽实现 拖拽事件 这里使用 H5的拖拽事件 ，主要用到： dragstart // 开始拖拽一个元素时触发 draggable
vue可视化拖拽组件模板_又一款基于Vue的数据可视化组件库，Github上star超1.4k，太酷炫...
weixin_39738273的博客
12-12 4523
组件库名称：DataV项目地址：https://github.com/DataV-Team/DataVDataV是一个基于Vue的数据可视化组件库(当然也有React版本)提供用于提升页面视觉效果的SVG边框和装饰提供常用的图表如折线图等飞线图/轮播表等其他组件npm安装$ npm install @jiaminghi/data-view使用import Vue from 'vue'import ...
基于 SpringBoot + Vue 实现的可视化拖拽编辑的大屏项目
askuld的博客
05-09 795
组件介绍大屏设计（AJ-Report）是一个可视化拖拽编辑的，直观，酷炫，具有科技感的图表工具全开源项目。内置的基础功能包括数据源，数据集，报表管理，项目部分截图如下。
element中表单验证不生效
10-09
在Element中，表单验证通常需要使用表单验证规则（rules）来指定验证条件。如果表单验证不生效，可能有以下几个原因： 1. 表单项没有设置正确的验证规则。请确保在表单项上设置了正确的验证规则。验证规则可以使用自定义的函数或预定义的验证规则。 2. 表单没有正确引入Validator组件。Validator组件是用于处理表单验证的核心组件，它负责执行验证规则并显示错误消息。请确保在表单中正确引入了Validator组件。 3. 表单项没有绑定v-model指令。v-model指令用于双向绑定表单项的值和表单数据。请确保表单项正确使用了v-model指令来绑定数据。 4. 表单项的值没有被更新。在进行表单验证时，需要确保表单项的值被正确更新。如果表单项的值没有被更新，可能导致验证不生效。请检查表单项的值是否被正确更新。 5. 其他可能的原因。如果以上步骤都没有解决问题，请检查控制台是否有任何错误消息，并仔细查看代码逻辑是否正确。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值