基于Vue,ElementUI开发的一款表单设计器

介绍

基于Vue,ElementUI开发的一款表单设计器，提高表单开发效率的利器，让开发者从枯燥的表单代码编写中解放出来

工具地址：http://form.making.link

GitHub地址：https://github.com/GavinZhuLei/vue-form-making

特性

可视化配置页面
提供栅格布局，并采用flex实现对齐
一键预览配置的效果
一键生成配置json数据
一键生成代码，立即可运行
提供自定义组件满足用户自定义需求
提供远端数据接口，方便用户需要异步获取数据加载
提供功能强大的高级组件
支持表单验证
快速获取表单数据

CDN

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/form-making/dist/FormMaking.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/form-making/dist/FormMaking.umd.js"></script>

Install

npm install form-making -S

Quick Start

import FormMaking from 'form-making'
import 'form-making/dist/FormMaking.css'
Vue.use(FormMaking)// or
import {GenerateForm
} from 'form-making'
import 'form-making/dist/FormMaking.css'Vue.component(GenerateForm.name, GenerateForm)

Template

<fm-generate-form></fm-generate-form>

功能介绍

通过在线地址生成的JSON，用于表单渲染

下面就是加载对应的数据用于展示，假设你已经正确加载组件

<fm-generate-form :data="jsonData" :remote="remoteFuncs" :value="values"ref="generateForm">
</fm-generate-form><script>
new Vue({...data () {return {jsonData: {}, // 表单配置中生成的json数据values: {}, // 表单需要显示的表单数据remoteFuncs: {// 组件配置时配置的远端方法,保持和配置时输入的名称一致func_test (resolve) {// 模拟接口请求setTimeout(() => {const options = [{id: '1', name: '1111'},{id: '2', name: '2222'},{id: '3', name: '3333'}]// 获取到的值和标签可以通过配置页远端配置// 值:id  标签：nameresolve(options) // 将后端获取的数据放入回调函数中}, 2000)},func_test2....}}},methods: {...{// 调用此方法验证表单数据和获取表单数据this.$refs.generateForm.getData().then(data => {// 数据校验成功// data 为获取的表单数据}).catch(e => {// 数据校验失败})}}
})
</script>

问题交流

QQ群：985558286

基于Vue,ElementUI开发的一款表单设计器相关推荐

activiti表单设计器_基于Vue,ElementUI开发的一款表单设计器
介绍基于Vue,ElementUI开发的一款表单设计器,提高表单开发效率的利器,让开发者从枯燥的表单代码编写中解放出来工具地址: http://tools.xiaoyaoji.cn/form Gi ...
基于Ant Design和jQuery UI的表单设计器
基于Ant Design 和jQuery UI 的表单设计器 GitHub 地址概念 Comonent 组件 Layout 布局,一种特殊的Component Component Editor 组件 ...
基于Vue3，Element Plus的一款表单设计器，支持生成Element和Antd样式的表单
简介 FormMaking v3 是基于 Vue 3.x 和 Element Plus 开发的可视化/低代码表单设计器,可以生成 Element 和 Antd 样式的表单. FormMaking 目前 ...
FormMaking表单设计器的使用
在开发过程中有一个可以让客户自己来设计表单的需求,看了多个动态表单生成的,最后选择了FormMaking,主要是这个基于vue和elmenet-ui的一款表单设计器,跟我们的项目更贴合. FormMa ...
哪家软件公司的表单设计器好？
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.先了解IBPS快速开发平台二.表单设计器有哪些优势? 总结前言企业要记录业务数据,做好管理,表单可以说是做好 ...
基于VUE的ElementUi可视化表单设计器布局器
码农苦码农懂的个人空间工作日志正文基于VUE的ElementUi可视化表单设计器布局器顶原码农苦码农懂发布于 09/11 15:35 字数 1187 阅读 41 收藏 0 点赞 1 评论 ...
基于vue Ant-Design 的表单设计器，快速开发
基于vue Ant-Design 的表单设计器,快速开发https://gitee.com/kcz66/k-form-design/ 表单设计器 k-form-design image 简介参考项目 ...
基于 vue + Element-ui 开发的后台管理系统
基于 vue + Element-ui 开发的后台管理系统引文思考快速上手项目结构介绍引入 ElementUI 登录功能设计项目演示地址:https://git.io/fp9UM 项目仓库 ...
基于springboot+element ui+vue的java快速开发平台，集成html5工作流设计器，flowable， element ui 表单设计器
前后端分离.maven多模块开发,方便多人协同开发后端选型:springboot2 + mybatis + shiro + jwt token + flowable 前端选型:vue + eleme ...