基于之前element form二次封装的组件 element ui 拖拽表单生成器

本文介绍了将ElementUI的表单进行二次封装,并使用ZX-Form实现拖拽生成表单的功能。已实现的功能包括查看JSON数据、设置JSON数据、导出Vue文件、复制代码及在线预览。待优化点包括将单选框和复选框的数据结构改为动态数组,以及添加更多属性。项目已开源,提供在线预览和源码下载。
摘要由CSDN通过智能技术生成

之前将element ui 的form表单进行了二次封装

详细内容请看链接: element-ui form表单,table二次封装

现基于zx-form实现拖拽生成表单

现在先来看一下页面效果
在这里插入图片描述
其中大部分效果已经实现,有时间会继续优化

包含的一些逻辑

1.查看json数据 拖拽后的表单可查看json数据,Json数据支持导出与复制
在这里插入图片描述
2.设置Json数据 可直接设置json数据来展示表单
3.导出vue文件 设计好表单后可直接导出vue文件,放入对象项目中,可以直接使用
4.复制代码 表单设计好后,可以直接复制代码,放入自己的vue文件中使用
5.在线预览 可以直接在线预览

暂时未完成功能

1.现在radio checkBox 都还是使用的字符串来代替数组,有时间改成动态添加数组数据
2.现在只添加了一些重要属性,还有很多属性没有添加,后续会慢慢更改

现已经将项目放到github

项目地址
在线预览地址

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值