Vue數據驅動表單渲染,輕松搞定form表單


form-create

具有動態渲染、數據收集、校驗和提交功能的表單生成器,支持雙向數據綁定、事件擴展以及自定義組件,可快速生成包含有省市區三級聯動、時間選擇、日期選擇等17種功能組件。

Github | 文檔 歡迎大家收藏、點贊,多多支持。


form-create 是基於 Vue開發的開源項目,可快速生成 iviewUI 的表單元素。目的是節省開發人員在表單頁面上耗費的時間,從而更專注於功能開發。使用 form-creae 可快速、便捷的生成日常開發中所需的各種表單。



下面向大家介紹一下 form-create 使用方法和生成原理

演示

生成器

如何優雅的創建動態生成一個 input 輸入框。

 

使用生成器生成
 
內置了規則生成器,用來生成組件規則的助手方法,通過鏈式操作即可快速生成對應的組件規則。

 

json

使用 json 數據生成。可通過后端返回生成規則,進行渲染。

使用json生成
 
php 表單生成器,這是我的另外一個開源項目。通過php生成表單規則,前端可使用 form-create 可直接根據參數進行表單渲染。這樣可以很好的做到前后端分離,同時后端也可以很簡便的控制表單中的組件和字段。

 

動態渲染

當生成規則發生變化時,頁面也會實時更新。1.5版本新增組件緩存功能,會按需對組件進行更新,很大的提升了渲染速度和性能。

動態渲染實例1

 

 

動態渲染實例2

 

自定義組件

form-create 支持生成任意自定義組件,包括嵌套使用 form-create。

舉例

在表單中生成一個 iview 按鈕組件

自定義組件1

 

生成 elementUI 組件 參考案例

自定義組件2

 

使用自定義組件可提升表單的靈活性,也可以實現功能更復雜的表單。

實現原理

form-create 組件渲染/更新機制圖

組件渲染

 

form-craete 動態渲染表單機制圖

表單渲染

 

以上就是如何使用 form-create 生成表單生成、動態渲染、自定義組件的說明和演示,以及form-create 項目的生成原理和內部結構。如果您有任何意見或者建議可以通過留言、issue、xaboy2005@qq.com 郵箱來與我聯系。✨✨✨

參考

Vue

iviewUI

Vue渲染函數 & JSX


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM