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

2024-06-14 02:03:16

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

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的开发者完成基本的表单代码搭建任务，减少重复的劳动。

2. 基于vue+ant-design-vue的表单设计器

k-form-design

设计器布局参考form-generator项目，基于vue和ant-design-vue实现的表单设计器，样式使用less作为开发语言，主要功能是能通过简单操作来生成配置表单，生成可保存的JSON数据，并能将JSON还原成表单，使表单开发更简单更快速。

github仓库：https://github.com/Kchengz/k-form-design

演示地址：http://cdn.kcz66.com/form-design.html

组件

KFormDesign 表单设计器（基于可视化操作快速设计出表单页面，生成配置json或页面）
KFormBuild 表单构建器（根据设计器中获取的配置json数据，快速构建出表单页面）

安装

# 使用yarn
yarn add k-form-design# 使用npm
npm i k-form-design --save

引入组件

// 在main.js引入import KFormDesign from 'k-form-design'
import 'k-form-design/lib/k-form-design.css'
Vue.use(KFormDesign)

使用组件

<template><div><k-form-design /></div>
</template>

3.基于vue的表单生成器（支持iview，element-ui,ant-design-vue）

form-create

form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持3个UI框架，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件。

安装

iview

npm install @form-create/iview

iview

npm install @form-create/iview4

element-ui

npm install @form-create/element-ui

ant-design-vue

npm install @form-create/ant-design-vue

4.基于vue+ElementUI的表单设计器

form-designer

码云仓库：https://gitee.com/wurong19870715/formDesigner

演示地址：http://wurong19870715.gitee.io/formdesigner

基于vue的表单设计器（拖拽生成表单）相关推荐

js html表单设计器,可视化表单设计器拖拽生成表单(原创)
插件描述:可以通过拖拽的方式快速创建表单,提高开发者对表单的开发效率,节省开发者的时间. 更新时间:2021-04-11 21:56:01 form-create-designer form-crea ...
html5拖拽表单设计器,require+jquery+backbone实现拖拽式报表设计器-拖拽式表单设计器...
HTML我帮您-拖拽式报表设计器-拖拽式表单设计器是一个可视化设计器,基于require+jquery+backbone+underscore+bootstrap实现的表单设计器.思想来源于 Layo ...
多款顶级好用的 Vue 表单设计器测评推荐，可拖拽生成表单
本文完整版:<多款顶级好用的 Vue 表单设计器测评推荐,可拖拽生成表单> Vue 表单设计器 form-generator - 适配 Element Plus UI 框架的表单设计器 f ...
基于Vue3，Element Plus的一款表单设计器，支持生成Element和Antd样式的表单
简介 FormMaking v3 是基于 Vue 3.x 和 Element Plus 开发的可视化/低代码表单设计器,可以生成 Element 和 Antd 样式的表单. FormMaking 目前 ...
vuedraggable能实现自由拖拽功能吗?_基于 vue.js 仿禅道主页拖拽效果
今天给大家分享一个超不错的Vue仿禅道首页拖拽布局VueDndKon. vue-dnd-kon 基于vuedraggable实现的仿禅道首页拖拽项目.支持模块上下及左右自由拖动布局. 主页分为左右两栏 ...
基于vue的移动端Icon图标拖拽（改变定位和使用transform）
功能介绍: 1.icon拖拽位移 2.边界判断 (仅在可视区域滑动,防止Icon丢失) 3.吸边处理(仅处理X轴方向) 开发遇到的问题: 1.ios 上拖拽时,body跟随滚动: 解决办法:在move ...
基于vue Ant-Design 的表单设计器，快速开发
基于vue Ant-Design 的表单设计器,快速开发https://gitee.com/kcz66/k-form-design/ 表单设计器 k-form-design image 简介参考项目 ...
vue自定义表单设计器思路
Vue是一种流行的JavaScript框架,用于构建Web应用程序.Vue的灵活性使得它成为一种非常适合创建自定义表单设计器的框架.本文将介绍如何使用Vue实现一个自定义表单设计器,并最终实现单据自定 ...
怎么选工作流表单设计器？
随着业务量的扩大,很多企业都想选择一款优良的工作流表单设计器来提升工作效率和质量.在大数据时代,操作简单.维护便利的工作流表单设计器确实能为企业的发展带来更大的帮助,也是企业实现数字化转型的得力帮手. ...
SpringBoot +LayUI 实现表单设计器
在设计OA开发时会涉及流程动态绑定表单,基于这种情况,我集成了网上开源的LayUI 表单设计器:layui-form-create: layui表单生成器效果展示: 默认展示页面: 修改页面: 项目 ...

最新文章

热门文章