在開發表單時常見的有兩種做法:一種是透過配置程式碼的方式,而另一種則是透過元件組合的方式。透過配置程式碼生成的表單,我們稱之為動態表單(Dynamic Form),而透過元件組合生成的表單,我們稱之為普通表單。
對於動態表單來說,我們只需要定義一套統一的配置模板,之後新增表單或者輸入項時,只需要修改配置檔案即可,十分簡單便捷。與組合的方式相比也少了許多重複的 HTML 模板程式碼。
生成動態表單的配置程式碼(一般就是一個大json),一般來說會儲存在後端,並透過 API 提供給前端使用。也可以將配置程式碼儲存在前端
小結
說了這麼多,最後讓我們再來總結一下動態表單的適用場景以及選擇動態表單應該考慮的問題:
- 動態表單適合擁有大量相似表單需求的場景:輸入控制元件的型別比較固定,UI 和佈局相對統一。這樣方便定義 Schema,並透過簡單迴圈直接生成表單
- 選擇動態表單不應該只從技術角度去決策,還需要考慮業務需求和 UI 設計。不要只為了幾行重複的 HTML 程式碼就選擇動態表單方案,要知道有些重複是「必要的」,錯誤選擇動態表單方案反而會降低你的開發效率
- 一旦敲定了動態表單方案,靈活性方面就應該做出一些妥協,不再接受千變萬化的 UI 設計。這一點要開發、業務、設計多個角色溝通配合
- 不要透過配置檔案配置特別細節的 CSS 樣式。你可以封裝一些固定的樣式,比如兩列布局/三列布局,然後透過配置項去切換。
參考
動態表單(1)—— 別再濫用動態表單了
【vue系列】優雅地用 vue 生成動態表單(一)