Vue數(shù)據(jù)驅(qū)動表單渲染,輕松搞定form表單
form-create
具有動態(tài)渲染、數(shù)據(jù)收集、校驗和提交功能的表單生成器，支持雙向數(shù)據(jù)綁定、事件擴展以及自定義組件，可快速生成包含有省市區(qū)三級聯(lián)動、時間選擇、日期選擇等17種功能組件。
form-create 是基于 Vue開發(fā)的開源項目，可快速生成 iviewUI 的表單元素。目的是節(jié)省開發(fā)人員在表單頁面上耗費的時間，從而更專注于功能開發(fā)。使用 form-creae 可快速、便捷的生成日常開發(fā)中所需的各種表單。
下面向大家介紹一下 form-create 使用方法和生成原理
演示
生成器
如何優(yōu)雅的創(chuàng)建動態(tài)生成一個 input 輸入框。
內(nèi)置了規(guī)則生成器，用來生成組件規(guī)則的助手方法，通過鏈式操作即可快速生成對應的組件規(guī)則。
json
使用 json 數(shù)據(jù)生成。可通過后端返回生成規(guī)則，進行渲染。
php 表單生成器，這是我的另外一個開源項目。通過php生成表單規(guī)則，前端可使用 form-create 可直接根據(jù)參數(shù)進行表單渲染。這樣可以很好的做到前后端分離，同時后端也可以很簡便的控制表單中的組件和字段。
動態(tài)渲染
當生成規(guī)則發(fā)生變化時，頁面也會實時更新。1.5版本新增組件緩存功能,會按需對組件進行更新，很大的提升了渲染速度和性能。
動態(tài)渲染實例1
動態(tài)渲染實例2
自定義組件
form-create 支持生成任意自定義組件，包括嵌套使用 form-create。
舉例
在表單中生成一個 iview 按鈕組件
生成 elementUI 組件 參考案例
使用自定義組件可提升表單的靈活性,也可以實現(xiàn)功能更復雜的表單。
實現(xiàn)原理
form-create 組件渲染/更新機制圖
form-craete 動態(tài)渲染表單機制圖
以上就是如何使用 form-create 生成表單生成、動態(tài)渲染、自定義組件的說明和演示，以及form-create 項目的生成原理和內(nèi)部結(jié)構(gòu)。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
解決elementui中NavMenu導航菜單高亮問題(解決多種情況)
這篇文章主要介紹了解決elementui中NavMenu?導航菜單高亮問題(解決多種情況)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue雙向綁定是指數(shù)據(jù)模型和視圖之間的數(shù)據(jù)同步，通過Object.defineProperty()方法實現(xiàn)數(shù)據(jù)劫持，利用觀察者模式實現(xiàn)數(shù)據(jù)更新和視圖更新的自動同步，實現(xiàn)方式包括指令、計算屬性、v-model等，優(yōu)化方法包括使用虛擬DOM、合理使用computed和watch等2023-04-04
在開發(fā)后臺管理系統(tǒng)的時候,很多地方都要用到導出excel表格,比如將table中的數(shù)據(jù)導出到本地,下面這篇文章主要給大家介紹了關(guān)于Vue導出Excel文件的相關(guān)資料,需要的朋友可以參考下2021-09-09
前端vue3打印功能實現(xiàn)(多頁打印、不使用插件)
在Vue項目中實現(xiàn)打印功能是前端開發(fā)中常見需求之一,這篇文章主要介紹了前端vue3打印功能實現(xiàn)的全部過程,文中介紹的方法實現(xiàn)了多頁打印并且不使用插件,需要的朋友可以參考下2024-09-09
Vue3路由進階實戰(zhàn)教程之參數(shù)傳遞與導航守衛(wèi)核心技術(shù)
本文介紹了路由參數(shù)傳遞的進階應用技巧,包括路由配置與參數(shù)驗證、組件參數(shù)接收、查詢參數(shù)傳遞、導航守衛(wèi)以及性能優(yōu)化與最佳實踐,感興趣的朋友一起看看吧2025-03-03
防抖和節(jié)流的作用都是防止函數(shù)多次調(diào)用，下面這篇文章主要給大家介紹了關(guān)于vue函數(shù)防抖與節(jié)流的正確使用方法，需要的朋友可以參考下2021-05-05
vue跳轉(zhuǎn)頁面攜帶參數(shù)并且立即執(zhí)行方法
這篇文章主要介紹了vue跳轉(zhuǎn)頁面攜帶參數(shù)并且立即執(zhí)行方法,首先定義跳轉(zhuǎn)函數(shù),結(jié)合實例代碼給大家介紹的非常詳細,需要的朋友參考下吧2023-10-10
vue3使用particles插件實現(xiàn)粒子背景的方法詳解
這篇文章主要為大家詳細介紹了vue3使用particles插件實現(xiàn)粒子背景的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
關(guān)于vue狀態(tài)過渡transition不起作用的原因解決
這篇文章主要介紹了關(guān)于vue狀態(tài)過渡transition不起作用的原因解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
vue對storejs獲取的數(shù)據(jù)進行處理時遇到的幾種問題小結(jié)
這篇文章主要介紹了vue對storejs獲取的數(shù)據(jù)進行處理時遇到的幾種問題小結(jié),需要的朋友可以參考下2018-03-03