表单设计器: 基于vue+element的在线拖拽生成表单页面，支持属性设置实时响应

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

工具地址：http://tools.xiaoyaoji.cn/form

![](https://user-gold-cdn.xitu.io/2018/9/27/1661a6cd60454273)

下拉多选框，级连绑定因为返回json如下
![](https://i.loli.net/2019/05/22/5ce4e3968184c63021.png)

所以数据源字段设置哪里这样设置
![](https://i.loli.net/2019/05/22/5ce4e39635b5924815.png)
预览结果
![](https://i.loli.net/2019/05/22/5ce4e4310686462661.png)

## 特性

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

## 文档

* [快速使用](https://www.yuque.com/zhulei-sbpfz/ua9nar/mdgwki)
* [组件](https://www.yuque.com/zhulei-sbpfz/ua9nar/vtebqs)

## 高级字段使用

* [自定义扩展](https://github.com/GavinZhuLei/vue-form-making/blob/master/doc/blank.md "自定义扩展")
* [图片上传](https://github.com/GavinZhuLei/vue-form-making/blob/master/doc/imgupload.md "图片上传")

## 社区资料笔记

* [Vue.Draggable](https://note.youdao.com/share/?id=f525c8897d9d7f6648bc28d59f5d03f4&type=note#/) （by @[jianhunxia](https://github.com/jianhunxia) 提供)

* [jsonEditor、ace和clipboard](https://note.youdao.com/share/?id=4cb3b53c76cb9f5f733f171529f71501&type=note#/) （by @[jianhunxia](https://github.com/jianhunxia) 提供)

## 支持

* 如果你发现了新的 bug，或者有新的 feature request，请新建一个 issue

## 捐赠

如果觉得还不错，请作者喝杯咖啡吧 ☺

![](https://i.loli.net/2019/05/22/5ce4a2525828e99228.png)
![](https://i.loli.net/2019/05/22/5ce4a25275a1575517.png)
## 开源协议

[LGPL](https://opensource.org/licenses/LGPL-3.0)

## 商业许可

开源版本遵循 LGPL 条款发布，如果您不能接受 LGPL，并且需要将该项目用于商业用途且不想保留版权信息（底部“Powered by GavinZhuLei”版权及链接），为保障您的合法权益，需购买[商业授权](http://tools.xiaoyaoji.cn/form/#/price)

yunmeng/表单设计器

简介

发行版

贡献者

近期动态