在后臺管理系統(tǒng)項目中，常常會遇到多樣化、動態(tài)表單的功能需求，比如就合同管理系統(tǒng)中，涉及到的合同種類多達(dá)數(shù)千種，如果采用傳統(tǒng)的前端開發(fā)方式，那么就需要開發(fā)數(shù)千個表單模板來適配這些合同種類，因此中高級前端項目通常使用高度封裝的表單組件，通過傳入JSON配置項給高級表單組件來動態(tài)渲染表單字段，這樣前端僅僅需要完成JSON配置項的設(shè)計即可通用各種業(yè)務(wù)場景，而不需要重復(fù)復(fù)制組件和樣式代碼。

什么是高級表單呢，簡單來說就是將UI框架內(nèi)所有輸入性組件（輸入框、選擇器、單選框、復(fù)選框、表格等）預(yù)先編寫在高級表單組件內(nèi)部，通過傳入?yún)?shù)來自動判斷渲染何種類型的組件和功能。

配置項表單與傳統(tǒng)表單開發(fā)對比

目前，主流的前端框架模板項目基本上都提供了高級表單組件的雛形，比如element plus admin模板項目提供了Form組件：

https://element-plus-admin-doc.cn/

但我建議如果掌握中高級前端開發(fā)水平，最好是自己根據(jù)UI框架的Form組件來封裝適合自己項目的高級表單組件，這樣在使用上更加熟悉并易于擴展。

高級表單組件的設(shè)計核心思想就是通過將配置項數(shù)組傳入組件即可渲染界面，而無需一行一行編寫每個組件，我們只需要操作數(shù)組來改變表單內(nèi)容，而不用操作頁面代碼。如果該配置項數(shù)組存儲在后端數(shù)據(jù)庫中，通過接口返回，那么就實現(xiàn)了低代碼表單的基本原理。

五年前我曾采用vue2 ant-design-vue開發(fā)過一個完整的企業(yè)級低代碼系統(tǒng)，最近我使用最新技術(shù)棧vue3 element plus typescript，結(jié)合公司項目的特點重新開發(fā)了表單設(shè)計器，實現(xiàn)可視化設(shè)計、可拖拽、可分步驟、可分組、自由布局、校驗、生成代碼、讀取代碼等功能。

該表單設(shè)計器一定程度上提升了在編寫高級表單配置項JSON的過程中對布局設(shè)計的效率，畢竟沒有設(shè)計器的時候，你只能面對代碼來想象表單界面，因此需要反復(fù)調(diào)整來保證表單達(dá)到最佳用戶體驗。而可視化的設(shè)計器，提升了這一過程的效率。

同時該設(shè)計器可直接由產(chǎn)品經(jīng)理來完成初步設(shè)計，設(shè)計完成后再交由開發(fā)來完善細(xì)節(jié)。這樣前端的工作效率也將大幅提高，不再需要面對不保真的原型圖或抽象的需求文檔。

如果不需要實現(xiàn)完整的無代碼表單設(shè)計器，就將設(shè)計完成的JavaScript對象復(fù)制到自己的項目代碼中使用。

經(jīng)過簡單的拖拽，調(diào)整寬度占比，配置字段名稱，標(biāo)題，校驗方式等，就可以快速完成表單界面和表單的字段設(shè)計了。

后續(xù)會繼續(xù)更新表單設(shè)計器的具體細(xì)節(jié)，特別是一些難點的功能設(shè)計。希望給各位前端開發(fā)者提供一些有價值的參考。