昨天，朋友說有個新需求，需要在短時間內做 100 多個不同并且很復雜的表單（類似于下圖，但可能更復雜），有沒有什么好的解決方案呢。對于少量的復雜表單，手動編寫尚可接受，但面對如此龐大的數量，逐個實現顯然不是明智之選。因此，推薦使用可視化表單生成器來實現。這類工具允許用戶通過簡單的拖拽和配置快速生成復雜表單，極大提升了工作效率。

通常，可視化表單生成器包含兩大核心組件：表單設計器和表單渲染器。表單設計器負責提供直觀的可視化界面，讓用戶能夠方便地搭建表單，并生成對應的JSON配置文件；而表單渲染器則負責讀取這些JSON配置，并將其轉換成實際可用的表單界面。

本文就來推薦 6 個相見恨晚的開源可視化表單生成器，這些工具將幫助你快速生成復雜的表單，提升工作效率，讓你在面對大量表單制作任務時也能游刃有余！

圖片

Formily

Formily 是一款面向中后臺復雜場景的數據+協議驅動的表單框架，它也是阿里巴巴的統一表單解決方案。借助 Formily 可以完成復雜的表單頁面需求，同時 Formily 提供的表單設計器可以快速搭建表單。

圖片

Github：https://github.com/alibaba/formily

Variant Form

Variant Form 是一款高效的 Vue 低代碼表單、工作流表單，包含表單設計器和表單渲染器，可視化設計，一鍵生成源碼。它支持在 Vue 2 和 Vue 3 中使用，支持 Element UI 組件庫。

圖片

預覽效果：

圖片

Github：https://github.com/vform666/variant-form

form-create

form-create 是一個可以通過 JSON 生成具有動態渲染、數據收集、驗證和提交功能的表單生成組件。支持 5 個UI框架，并且支持生成任何 Vue 組件。內置20種常用表單組件和自定義組件，再復雜的表單都可以輕松搞定。

圖片

圖片

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

Everright-formEditor

Everright-formEditor 是一個開源的可視化低代碼編輯器，只需簡單的操作即可創建出表單，擁有靈活的交互界面，PC端依賴Element Plus，Mobile 依賴 Vant，內部有一套適配器，適配 Element 和 Vant 的組件。

圖片

邏輯控制器：

圖片

Github：https://github.com/Liberty-liu/Everright-formEditor

form-generator

form-generator 是一款 Element UI 表單設計及代碼生成器，可將生成的代碼直接運行在基于 Element UI 的 Vue 項目中；也可導出 JSON 表單，使用配套的解析器將 JSON 解析成真實的表單。

圖片

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

EpicDesigner

EpicDesigner 是一款功能強大、開箱即用的拖拽式低代碼設計器。它基于 Vue3 開發，兼容多套 UI 組件庫，除了基礎的頁面設計功能，EpicDesigner 還提供了強大的擴展功能，可以讓開發者根據自己的需求自由擴展和定制組件。此外，EpicDesigner使用 JSON 配置來生成頁面，可幫助開發者快速生成頁面，提高開發效率。它提供了兩個重要組件：e-designer 設計器和 e-builder 生成器。

圖片

Github：https://github.com/Kchengz/epic-designer