本文完整版:《多款顶级好用的 Vue 表单设计器测评推荐,可拖拽生成表单》

Vue 表单设计器

  • form-generator - 适配 Element Plus UI 框架的表单设计器
  • form-render - 阿里团队开源表单设计器,自家 Antd UI 框架友好
  • form-create - 支持Vue3 及 ElementPlusUI、AntDesign、iview 框架
  • 卡拉云 - 低代码开发工具,表单设计器的超集,拖拽表单直接连接后端数据,即搭即用

Vue 前端开发中,表单组件是排在前三的高频使用的组件,如何快速构建表单,节省力气,避免重复造轮子呢,选择一款适合自己的前端表单设计器就非常重要了。本文介绍 4 款顶级好用的 Vue 表单设计器,其中最后一款卡拉云,是新一代低代码开发工具,不仅能自动生成各类表单,还可以拖拽生成其他常见的前端组件,一行代码连接前后端数据,可快速接入数据库/api。它是表单设计器的超集,可直接生成属于你的后台管理工具,无敌好用。

本文介绍 4 款各有特点的表单设计器,一定有一款适合你

  • form-generator - 适配 Element Plus UI 框架的表单设计器
  • form-render - 阿里团队开源表单设计器,自家 Antd UI 框架友好
  • form-create - 支持Vue3 及 ElementPlusUI、AntDesign、iview 框架
  • 卡拉云 - 低代码开发工具,表单设计器的超集,拖拽表单直接连接后端数据,即搭即用

form-generator - 适配 Element Plus UI 框架的表单设计器

Github:https://github.com/JakHuang/form-generator

form-generator 适配国内 Top 的 Element Plus UI 框架的表单设计器,可在线拖拽生成组件直接用于 Element 框架的项目中。也可导出 JSON 表单,使用配套的解析器将 JSON 解析成真实的表单。

form-generator 功能特点

  • 可私有部署,可内置在项目中,在线可视化表单生成器
  • 一键生成 Vue 组件代码
  • 可内置在项目里,用户可在你的工具后台使用此组件生成表单
  • 有表单验证功能
  • 官方文档清晰详实

form-render - 阿里团队开源表单设计器,自家 Antd UI 框架友好

Github:https://github.com/alibaba/x-render

FormRender 是阿里旗下的飞猪 app 的表单生成方案,从 2017 年在内部开始使用到 2019 年正式对外开源,FormRender 经历了多个阿里大项目的迭代和升级,细节已经相当全面。

FormRender 开源期间支持了阿里旗下的阿里云、淘宝、阿里人工智能实验室等多条产品线的数十个应用场景。

form-render 功能特点

  • 支持阿里旗下的 Ant Design 和 Alibaba Fusion Design
  • 功能逻辑清晰,快速部署
  • 阿里旗下 20 多个业务线正在使用
  • 支持表格校验、自定义嵌套、样式,可拖拽生成表单

form-create - 支持Vue3 及 ElementPlusUI、AntDesign、iview 框架

Github:https://github.com/xaboy/form-create

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

form-create 功能特点

  • 全面支持 Vue 3
  • 支持市面上 3 种主流框架 ElementPlusUI、AntDesign、iview
  • 支持使用 json 数据生成表单
  • 支持生成任何组件,提升表单的灵活性,可以实现功能更复杂的表单
  • 内置组件缓存功能,提升渲染速度
  • 双向数据绑定,生成规则变化后,页面会实时更新

卡拉云 - 低代码开发工具,表单设计器的超集,拖拽表单直接连接后端数据,即搭即用

官网:https://kalacloud.com

卡拉云可帮你快速搭建企业内部工具,下图为使用卡拉云搭建的内部广告投放监测系统,仅需拖拽组件,10 分钟搞定。你也可以快速搭建一套属于你的后台管理工具,了解更多

卡拉云是新一代低代码开发平台,与前端框架 Vue、React等相比,卡拉云的优势在于不用首先搭建开发环境,直接注册即可开始使用。开发者完全不用处理任何前端问题,只需简单拖拽,即可快速生成所需组件,可一键接入常见数据库及 API,根据引导简单几步打通前后端,数周的开发时间,缩短至 1 小时。立即免费试用卡拉云。

扩展阅读:

  • Video.js 使用教程 - 手把手教你基于 Vue 搭建 HTML 5 视频播放器
  • 最好的 6 个免费天气 API 接口对比测评
  • 12 款最棒 Vue 开源 UI 库测评 - 特别针对国内使用场景推荐
  • 最棒的 7 个 Laravel admin 后台管理系统推荐
  • Retool 是什么,怎么样? —— Retool 低代码工具测评
  • 最好用的 5 个 Vue select 单选多选下拉组件
  • 最好用的 7 款 Vue admin 后台管理框架测评

多款顶级好用的 Vue 表单设计器测评推荐,可拖拽生成表单相关推荐

  1. js html表单设计器,可视化表单设计器拖拽生成表单(原创)

    插件描述:可以通过拖拽的方式快速创建表单,提高开发者对表单的开发效率,节省开发者的时间. 更新时间:2021-04-11 21:56:01 form-create-designer form-crea ...

  2. Antd Vue 表单生成快速开发指南,内附强大的表单设计器

    之前发布了一款基于Element的表单设计器,可以快速设计和生成表单,设计器地址:http://form.making.link/.现在我可以告诉大家,Antd表单支持来了,可以使用设计器设计好表单后 ...

  3. 基于vue Ant-Design 的表单设计器,快速开发

    基于vue Ant-Design 的表单设计器,快速开发https://gitee.com/kcz66/k-form-design/ 表单设计器 k-form-design image 简介 参考项目 ...

  4. 6款优秀的在线表单设计器

    JotForm 在线表单设计器 JotForm 易于使用的在线表单设计器,为企业业务数据设计表单和收集数据,例如可设计一些订单信息表.客户信息表等, 是所见所得的 在线定义表单,界面操作比较简单,拖动 ...

  5. 哪家软件公司的表单设计器好?

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 一.先了解IBPS快速开发平台 二.表单设计器有哪些优势? 总结 前言 企业要记录业务数据,做好管理,表单可以说是做好 ...

  6. 使用开源的驰骋表单设计器设计表单案例演示

    我们以客户提供如下原始的word表单样本,使用驰骋表单设计器制作表单的过程介绍如下: 工业设计和创意需求登记表原始表单图 在ccform表单设计器中,设计如下: 驰骋表单设计器,设计表单所见既所得,操 ...

  7. 驰骋表单设计器 设计表单案例演示

    为什么80%的码农都做不了架构师?>>>    我们以客户提供如下原始的word表单样本,使用驰骋表单设计器制作表单的过程介绍如下:工业设计和创意需求登记表原始表单图 在ccform ...

  8. Fixcel电子表单——表单设计器

    概述 表单设计器用于设计业务所需的表单模板或报表模板. 采用与Office Excel的类似的界面显示.编辑方式和.操作方式等,让设计人员更容易地接收和掌握设计器的使用,降低培训难度. 主要功能说明 ...

  9. 基于 Formily 的表单设计器实现原理分析 ​

    编者寄语:本期为大家带来基于 Formily 的拖拽式表单设计器玩法,探索可视化时代表单设计器的可能. 背景 在控制台类 web 应用中,表单是最常见的交互形式.用户在表单中填写信息,点击提交就能完成 ...

最新文章

  1. 问题1-2:能否说:“电路交换和面向连接是等同的,而分组交换和无连接是等同的”? 答:不行。这在概念上是很不一样的。这点可举例说明如下。...
  2. 树莓派(raspberry)启用root账户
  3. 一步一步SharePoint 2007之十四:实现Form认证(4)——创建管理帐户
  4. ASP.NET验证控件祥解
  5. 计算机科学与技术专业热,广东省计算机科学与技术专业最“热”
  6. 【matlab】直方图均衡化
  7. QUIC 协议在蚂蚁落地综述
  8. 【精品课设】经典PID与模糊PID控制的对比与分析(一)
  9. 女儿怎样养才算是富养呢?
  10. PhoneApp的启动过程
  11. HTML5期末大作业:婚庆网站设计——红色的婚庆(18页) HTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作
  12. 如何解决国产TongWeb中间件启动之后无法访问网站管理后台界面
  13. RAP2开发环境部署
  14. 魅族手机里的便签怎么导出转移到新的手机上?
  15. 稿费一般多少钱一千字_编写教材的稿费一般是多少
  16. RunCat 小猫测速cpu
  17. php自动生成网站地图txt,织梦网站地图生成插件+发布文章后自动生成地图
  18. ip地址转换数字函数 iton_IP 地址转换(在点分格式和数字之间相互转换)
  19. 用js代码判断质数_JavaScript判断数字是否为质数的方法汇总
  20. (imx6)添加RT3070 STA AP 支持

热门文章

  1. EHCI主机控制器--异步列表队列头指针
  2. 情侣吃饭去哪最浪漫?
  3. Google 文件系统
  4. 也使得飞鸽传书2007的功能越来越强大!
  5. RGB颜色表示方法,red = (rgb 0x00ff0000) 16是什么意思?
  6. appnium环境搭建
  7. [免费专栏] Android安全之Android奇淫run-as命令,调用系统受UID限制的API
  8. oracle 数据泵介绍,ORACLE-数据泵
  9. WinXP系统下H81、H85、H87等主板网卡无法使用怎么办
  10. Cesium从入门到放弃9:近景天空盒(不改源码)