GRID-FORM 基于 VUE3 可视化低代码表单设计器
本文开源代码在 GRID-FORM，如能帮到您麻烦给个星哈
楔子
大概 4 年前，我做了一个简单的动态表单功能，开发人员通过 UI 界面配置表单（其实就是添加常用的控件，如文本框、下拉框等）就能向用户提供数据查询，反响不错，尤其是偏后端开发的小伙伴。
时至今日，上述功能存在以下问题：
- 不够灵活，无法满足不同场景的定制化需求
- 设计界面简陋，功能有限
- 组件有限，不支持扩展
- 不支持自定义代码（回调函数）
想要什么
- 简单
灵活易用（用户仅需要极低的学习成本） - 支持
VUE3（团队前端技术栈以 vue 为主） 可视化表单设计（所见即所得）- 支持
移动端渲染（团队使用 Vant4，PC端渲染支持 Naive UI、Element Plus） - 支持
回调函数（事件监听） - 数据
联动（某个值变动后影响其他表单项） - 能够
自定义组件（满足定制化需求）
开源产品调研
目前书面上已经有不少优秀开源的同类产品，这里列出可二次开发的, 同时具备表单渲染、表单设计的工具（截止至 2022年底）
| 方案 | 框架 | UI库 | 备注 |
|---|---|---|---|
| formilyjs | React、Vue | AntD、Element、Vant等主流 |
校验、事件交互阿里巴巴开源的表单设计工具体系，能做到一份表单设计多端适配；但是对 vue3 支持不完备（设计器得自己做）
|
| FormMaking | VUE | AntD、Element |
校验、事件交互操作良好，需要高级版本才支持 vue3
|
| form-generator | VUE | Element |
校验 操作良好，预览不友好（不够直接爽快），目前不支持vue3
|
| form-create | VUE | iView、AntD、Element、Naive UI |
校验操作良好，支持多个 UI 框架，对 vue 2/3 均支持，无设计器
|
| VForm | VUE | Element |
校验、事件交互 操作良好，开源版不支持数据源、子表单
|
再造个轮子吧
同类型的开源产品各有千秋，适合不同的应用场景，然而跟我想要的还不够契合。权衡后，还是觉得自己弄一个
GRID-FORM 基于 VUE3 可视化低代码表单设计器相关推荐
- 基于vue Ant-Design 的表单设计器，快速开发
基于vue Ant-Design 的表单设计器,快速开发https://gitee.com/kcz66/k-form-design/ 表单设计器 k-form-design image 简介 参考项目 ...
- 基于Vue3，Element Plus的一款表单设计器，支持生成Element和Antd样式的表单
简介 FormMaking v3 是基于 Vue 3.x 和 Element Plus 开发的可视化/低代码表单设计器,可以生成 Element 和 Antd 样式的表单. FormMaking 目前 ...
- vue3+vite+typescript实现低代码表单编辑器
开源一款可视化动态表单设计器,后期会把该设计器作为h5低代码平台的组件配置表单 废话不多说,直接上干货: 点此立即体验 希望各位大佬能给个鼓励,感谢!!! 源码地址 预览动图 相关技术栈 Vue3 T ...
- 基于VUE的ElementUi可视化表单设计器布局器
码农苦码农懂的个人空间 工作日志 正文 基于VUE的ElementUi可视化表单设计器布局器 顶 原 码农苦码农懂 发布于 09/11 15:35 字数 1187 阅读 41 收藏 0 点赞 1 评论 ...
- 基于 Formily 的表单设计器实现原理分析
编者寄语:本期为大家带来基于 Formily 的拖拽式表单设计器玩法,探索可视化时代表单设计器的可能. 背景 在控制台类 web 应用中,表单是最常见的交互形式.用户在表单中填写信息,点击提交就能完成 ...
- 开源推荐：国内3大主流前端UI表单设计器，千万不要让领导知道
互联网应用架构:专注编程教学,架构,JAVA,Python,微服务,机器学习等领域,欢迎关注,一起学习. 偷得浮生半日闲,自古人生何其乐.开始之前告诉一下大家,距离国庆8天假只剩4天了,先乐呵乐呵. ...
- 布局器 拖拽拖拽表单设计器 厉害了
码农苦码农懂! 您是否有过以下想法: 我是一名element初学者,我想以最短的时间快速进入 element 的大门 我是一名后端工程师,虽能熟练掌握 JS 的写法,但是页面样式布局让我很头疼 我是一 ...
- python开源报表系统_流程设计器、表单设计器和简单报表管理开源OA系统smart-web...
smart-web2是一套相对简单的OA系统:包含了流程设计器,表单设计器,权限管理,简单报表管理等功能: 系统后端基于SpringMVC+Spring+Hibernate框架,前端页面采用JQuer ...
- 智能应用搭建平台——LCHub低代码表单 vs 流程表单 vs 仪表盘
1. LCHub低代码如何选择 「流程表单」:填报数据,并带有流程审批功能,适合报销.请假申请或其他工作流: 「表单」:填报数据,并带有数据协作功能,如修改.删除.导入.导出,并可以给不同的人不同的管 ...
最新文章
- Codeforces Round #265 (Div. 2) E. Substitutes in Number
- motan yar php,motan学习笔记 六 opentracing Brave+zipkin实现-Go语言中文社区
- 线性多播/线性广播/线性扩散/一般线性网络码
- ImportError: cannot import name Namespace
- rapidjson官方教程
- 华为手机怎么隐藏按键图标_mac桌面图标怎么快速隐藏？
- 1304. 和为零的N个唯一整数
- Spring中的Aop底层原理
- npm 私有库开源组件_苹果的ResearchKit，npm私有模块以及更多开源新闻
- [转载] 【汇总】Android知识清单
- A8板卡AM3352移植环境搭建记录
- node.js--尝试做一个crub
- 计算机画图更改,如何用电脑画图功能修改图片与加字
- 2023年美业市场五大消费趋势
- 求每个月的最后一天日期
- 基于python的微博热搜爬取及数据分析
- 小程序头像和昵称填写能力用底部弹框界面实现
- 【高并发】别闹了，这样理解Java的内存模型才正确（八种操作+同步规则）
- 【Python游戏】咱就说Python实现一个蔡徐坤大战篮球的小游戏，可还行？ | 附带源码
- 移动应用界面设计的尺寸规范