掘金長文談Schema配置驅動的Vue3動態表單：柵格布局與彈框組件的實作輪廓

一篇發布於2026年10月18日掘金平臺的技術文章，記錄了一名自稱在IT人力外包公司任職十餘年的開發者「鵬飛」，在為某保險平臺升級數據中臺前端架構時，自研基於Vue3的動態表單渲染引擎的實作心得。文章標題為「面向Schema配置編程，Vue3動態表單支持彈框組件」，署名帳號為「全棧小卷」。

依文章自述，作者目前的工作是為某知名保險平臺做核心數據中臺的前端架構升級，並已初步完成一個支持複雜表單內字段聯動的版本，引擎命名為JuanForm。

為何選擇自研而非低代碼平臺

作者在文中說明選型背景。數據維護類後臺管理系統需要開發大量表單頁面，手寫維護成本高；市面上的低代碼工具多以雲服務形式提供，要求客戶將數據遷移至其平臺，後續升級維護也需依賴第三方。基於這些考量，其所在團隊選擇自行封裝動態表單，透過Schema配置編程簡化表單開發。

文中未指明所評估的低代碼產品名稱，這段屬於作者個人經驗陳述，本臺無法獨立核實。

Schema結構與柵格布局設計

文章以保險投保場景為例：表單包含投保人、被保人與受益人資訊三個部分，「同投保人」開關控制被保人欄位的顯隱聯動，受益人列表可增刪。整個表單以TypeScript檔案維護Schema配置，再由JuanForm組件接收schema屬性渲染。

配置結構上有幾項設計要點。最外層配置對象引入「層（Layer）」的概念，作用類似Vue的作用域層級，可在層配置上設置dependsOn監聽該層數據變化。欄位渲染採行列布局，置於children配置項之下。

柵格布局方面，行總列數做到行級可配置，默認16柵格，也可指定如15、18等數值。列寬按佔比計算，欄位可設為auto自動分配剩餘寬度；若數字列寬合計超出總列數，則自動換行，以滿足流式布局需求。

items中可配置的類型包括與字段對應的基礎控件、Group組類型、Dialog彈框類型，以及用戶自定義擴展。文章示例中，投保人與被保人各以Group類型封裝，內部再以cols: 18等配置組織姓名、電話、年齡、地址等欄位。

可核實資訊的邊界

該文屬個人技術分享，發布當日統計顯示閱讀量352次，全文約11分鐘讀完。文中所稱的保險平臺項目、公司背景與引擎實際運行效果，均僅見於作者單方敘述；JuanForm是否對外開源、授權方式與完整代碼，截稿前未在文中或公開渠道得到確認。原文內容可在掘金該篇帖文查閱。

近年前端社羣對Schema驅動表單的討論並不罕見，此篇的特定脈絡在於將彈框組件納入Schema配置體系，並以保險投保單作為完整示例。至於該方案在實際專案中的維護性與可擴展性表現，尚需更多使用案例佐證。