摸魚神器！開發效率提升 1000% 的 Vue 低代碼表單組件

目錄：

• 一、簡介
• 二、本組件和 Element UI 的表單組件進行對比
• 三、架構設計
• 四、詳細功能描述
  • 4.1 wti-form 全域功能
  • 4.2 wti-form 表單元素功能
  • 4.3 如何一個 JSON 配置生成 3 個表單
• 五、高度支持自動化測驗
  • 5.1 天生支持自動化測驗
  • 5.2 通過簡單的組態檔，自動完成自動化測驗
  • 5.3 更牛逼的自動化測驗支持
• 六、未來將添加的功能
  • 6.1 可視化生成表單
  • 6.2 打通產品經理與前端這條線
  • 6.3 縱向拓展：自動生成后端代碼
  • 6.4 橫向拓展：表格、圖表的自動生成
• 七、總結

一、簡介

作者：

零零水，曾寫過多個 10w+，1w+博客，前阿里巴巴前端開發，現為了 work life balance 于西安某信托國企做技術研發作業，擅長基于公司真實情況，做一些提高效率的優化，

另，從來不當標題黨，

描述

Vue.js 低代碼表單組件，基于 Element UI 二次開發而成，命名為 wti-form

組件高度封裝 js 邏輯的方式，是多表單頁面場景的大殺器，

目前支持的表單元素包括但不限于以下元素，如下圖：

更多支持的功能，見第一章節的結尾給的檔案鏈接

wti-form 特點：

現在就開始試用！網頁上簡單配置，立刻預覽表單生成結果！

優點

1. wti-form 可以極大的提高開發效率，預計最低提升效率 200%，最高提升效率 1000% 以上（都相對于使用 Element UI 來比）；
2. 檔案豐富詳細，有大量示例代碼，并且檔案本身已開源；
3. 支持通過網頁配置，快速生成前端代碼（一整個 Vue 檔案）的功能（見檔案）；
4. 正在開發支持自動化測驗的組件，集成后，可以根據表單配置自動推斷并填寫表單元素（未來會開發 python 支持庫，方便集成進自動化測驗代碼里）；

適用人群

• 表單頁特別多，但人手/預算緊張的技術團隊；
• 不擅長前端的后端開發者，但需要寫前端表單頁面（例如做私活）；
• 原本使用 Element UI ，但想減少重復作業量的開發者；
• 一線開發人員水平層次不齊，想要提高初中級開發的代碼產出率、降低 bug 量的技術負責人；
• 一般開發團隊（基于組件可以自定義值 UI 樣式）；

github 和檔案地址：

• 組件源代碼：https://github.com/qq20004604/wti-form
• 檔案源代碼：https://github.com/qq20004604/wti-form-demo
• 檔案地址：http://lovelovewall.com/wti_form_demo/home.html#/Install

二、本組件和 Element UI 的表單組件進行對比

因為是基于 Element UI 二次開發的，因此，必然要比使用 Element UI 進行開發更方便，功能更強大，否則沒有開發的價值，

因此，將本組件和 Element UI 進行對比，幫助你了解本組件的優勢，

附圖 1，圖中對于核心點已經高亮

目前表單組件支持的功能，附圖 2

三、架構設計

先附源代碼地址：https://github.com/qq20004604/wti-form/tree/main/package

上一個架構分層圖，附圖 3：

再上一個圖 4，組件事件流，

結合圖 3 和圖 4，總的來說，wti-form 的架構可以這么來理解：

• 資料層：核心是【表單資料】和【配置資料】，而其他資料都是基于這 2 個動態計算出來的，并不會單獨存盤；
• UI 層：根據配置資料動態生成 ui，因此假如傳入的配置變更，那么 ui 也會隨著動態變化；
• 事件層：基于生成的 ui，用戶進行操作，則將觸發事件層，而事件層最終影響的是【表單資料】，

因此，整個組件，開發者只需要關心 2 個資料，以及基于資料衍生出來的 ui 和事件，因此并不存在同一個源資料但存盤于多處導致可能的沖突和一致性，因此可以輕松寫出高可靠度的代碼，

而基于這樣的設計，二次開發也是很簡單的一件事情了，

但因為篇幅所限（才怪，是因為我懶），因此上圖還缺少了這些：

• 子表單的事件流，以及父表單與子表單的互動方法；
• 表單與表單元素之間的關聯設計；
• 基于個人需求，二次開發屬于自己的內部組件的方法；

四、詳細功能描述

4.1 wti-form 表單全域功能：

• 通過 json 資料來生成表單；
• 通過 data 資料給表單每個元素賦值；
• 支持表單校驗；
• 表單支持分塊顯示；
• 支持單區塊收起、展開、全部收起、全部展開；
• 支持將表單顯示模式切換：長表單/帶 tab 切換的短表單；
• 支持表單元素全域禁用（例如提交時）；
• 支持給表單加一個外框，增加區分度；
• 支持將表單模式切換為純文本顯示模式；
• 支持設定表單為一行四列/兩列/一列；
• 二次開發自定義表單元素難度極低；
• 其他懶得寫了；

4.2 wti-form 表單元素功能：

• 支持設定默認禁用、默認隱藏、默認值；
• 支持設定必填；
• 不同表單支持不同的校驗規則，也可以自定義校驗規則（同 Element UI）；
• 支持當某一個表單元素的值為指定值時，聯動設定另一個表單元素的值/設定隱藏/設定禁用/設定必填；
• 支持自定義樣式；
• 支持自定義 placeholder；
• 支持文本輸入框、數字輸入框、金額輸入框、日期輸入框、日期范圍輸入框、動態下拉框（自動請求資料字典）、普通下拉框、時間輸入框、單選框、百分比輸入框、文本域輸入框等；
• 其他懶得寫了；

4.3 一個 JSON 配置生成 3 個表單

再貼一遍圖 4：

也就是說，開發者一般來說只需要提供描述表單結構的 json，以及呼叫校驗方法，就可以完成一個完整的表單，

如果需要初始化資料（比如說表單編輯頁面），這個初始化資料和提交的資料結構是一模一樣的，

如果是需要查看內容（比如說是詳情查看頁），那么和編輯模式使用方法一樣，再將傳入組件的 text-model 這個值變為 true 即可（表示開啟純文本模式），在純文本模式下，即使是字典下拉框的介面，回傳的值是字典嗎，也會被自動翻譯成 label 的，

有人可能會有疑問，這樣的話，表單結構JSON 會不會很復雜？

當然不可能，具體可以參考檔案這個頁面：http://lovelovewall.com/wti_form_demo/home.html#/demo/Status
，你可以在打開這個頁面時，先試想一下自己實作這樣的功能（各種聯動、三個不同的表單再加互動功能），需要寫多少行代碼，

然后再看這個頁面的源代碼 https://github.com/qq20004604/wti-form-demo/blob/main/src/page/home/component/demo/status.vue

毫無疑問，本表單，至少減少了至少 80~90% 的開發作業量，所以標題中的提高 1000% 效率，并未夸張，只是單純陳述事實，

五、高度支持自動化測驗

5.1 天生支持自動化測驗

在測驗一個表單頁時，往往存在幾個常見難題：

1. 表單太大，元素太多時：如果是手工測驗，每次要填寫很多表單項，非常浪費時間，如果是自動化測驗，那么要一個一個抓表單元素，然后給里面填值，也非常浪費時間；
2. 表單太多：每個頁面都要寫一遍自動化測驗邏輯，很浪費時間；
3. 表單元素變化：當表單要素變化時，要改自動化邏輯代碼，也很浪費時間；

所以，在面對大量表單頁場景時，往往測驗復雜度最少也是 O(n2)，還很容易漏測，

針對這種情況，wti-form 對于支持自動化測驗，則非常友好，

5.1.1 表單元素定位

對于第一個問題，如果表單元素太多，我們需要一個快速定位每個元素的辦法，

對于這種情況，提供了一個解決方案：用一個唯一 class 來定位，

具體來說，假如下面是一個輸入框的 html

<div data-v-14c4e670="" data-v-74ae480c="" class="form-input-box form-item-box form-unqiue-name">
	<div data-v-14c4e670="" class="el-input el-input--suffix">
		<input type="text" autocomplete="off" placeholder="請輸入用戶名稱" class="el-input__inner">
	</div>
</div>

在我的設計里，每個元素，只要有 key，那么他必然有一個 class 是form-unqiue-${key}，因此，可以通過這個唯一 class，找到頁面里的該元素，

因此，可以封裝一個類，通過入參 class 通過這個唯一 class 找到對應的表單元素，便可以獲取值\修改值，示例代碼如下：

class ElementManager:
    # 找到表單元素
    def findEle(self, key, type):
        ele = None
        if type == "input":
            ele = self.findInputEle(key)
        ## some other element type
        else:
            ele = self.findXXEle(key)
        return ele

    # 1、找到輸入框表單元素
    def findInputEle(self, key):
        ## find element and return
        pass

    # 找他各種表單元素（略）
    def findXXEle(self, key):
        pass

    # 設定元素的值
    def setVal(self, ele, type, val):
        pass

    # 獲取元素的值
    def getVal(self, ele, type):
        pass

使用的時候，只需要傳入元素的 key、型別（甚至可以不需要型別），就可以獲取到表單元素、獲取表單元素的值、設定表單元素的值，

無論需求怎么改，只需要改入參就可以了，于是，表單元素太多，需要一個一個獲取表達元素，增加測驗作業量的問題解決了，

5.2 通過簡單的組態檔，自動完成自動化測驗

基于 5.1 的方法，我們可以解決表單獲取元素的問題，

下來我們要面臨的就是如何進行各種測驗，例如必填的沒有填能否提交，有長度限制的過長或者過短能否通過校驗等，

于是，基于前端的 JSON 配置，通過寫一個工具類，我們可以通過每個表單元素的規則，自動推斷出其各種測驗場景的資料是什么，

如果能做到這一點，那么表單太多，寫測驗腳本麻煩的問題，也自然便解決了，

完成整個流程，基本沒有什么技術難度，如果不知道具體怎么實作的話，可以加我微信溝通，

5.3 更牛逼的自動化測驗支持

目前正在寫一個自動化測驗組件，效果是：

• 將表單組件傳入到該組件中；
• 該組件會自動根據 json 配置，和組件本身配置，推斷每個 key 應該生成什么樣的資料；
• 目前支持三種資料：【標準合法資料】【合法邊界資料】【非法超限資料】；
• 對于特殊的還支持用戶自定義資料生成；

但因為我懶，目前開發進度只有大約 10%（主要是領導也沒重視這玩意），只支持【文本輸入框】的資料生成，

具體可以參考檔案的這部分：http://lovelovewall.com/wti_form_demo/home.html#/others/AutoTest

六、未來將添加的功能

表單本身功能架構設計，已經比較完善了，二次開發新增更多表單元素型別，也不難，

因此，從表單開始，打通整個開發環節，可以更有效的提高開發效率，

6.1 可視化生成表單

與 C 端場景不同，B 端場景更常見是處理流程，一個流程里會有很多表單，而在這些表單里會有很多相同的表單元素，這就意味著，這些表單元素可以大量復用，

因此我們可以開發一個后端服務，專門用來存盤這些開發好的表單元素，

在開發一個新頁面時，可以通過關鍵詞搜索到之前寫好的表單元素，然后通過勾選/拖拽的模式，直接拖入表單，最后直接生成一個Vue 組件甚至頁面，這就是現在低代碼平臺最常見的使用方式了，

我們目前已經有這種方案的常規版本（比檔案里提供的版本更強），但是仍不夠完美，并不能泛用到所有表單里，

而本表單組件為什么可以稱為低代碼表單組件，也是通過這個來體現的，

不過，因為這個屬于公司業務代碼，因此無法直接給出來相關代碼和示例，

不過檔案里，給了一個【通過網頁直接生成表單】的功能，屬于基礎版，足夠一般開發使用，

http://lovelovewall.com/wti_form_demo/home.html#/demo/FastCreate

6.2 打通產品經理與前端這條線

在 5.1 中，我們還是單純只是前端代碼層面的東西，但對于現代開發，我們完全可以有更多想象，

表單做成什么樣子，是由產品經理定的，他們在把內容傳達給我們時，是要先搞一個 excel，描述表單這里每個元素的具體規則，

所以，我們能不能做一個工具，直接打通產品經理與前端開發呢，我覺得是完全可以的，

簡單設想一下，基于檔案里提供的【快速創建表單】提供的工具，我們再拓展一下，允許配置表單元素的規則，然后再基于這個生成一個 excel，那么這就是產品經理的要素表，

同時，我們將這個資料存盤到后端，然后前端可以基于這個，通過代碼生成工具（檔案里的 FastCreate 的功能），直接生成 Vue 檔案，

于是，并沒有增加產品經理的作業，甚至因為我們提供的工具，產品經理減少了他的作業量，也方便維護，

但同時，前端的作業量被大幅度減少了，前端只需要基于這個已經寫好的 Vue 檔案，二次開發一些特殊功能即可，

這就意味著，團隊對于前端開發的需求量，也許可以減少 50%以上，這帶來的都是研發成本的降低，

6.3 縱向拓展：自動生成后端代碼

當我們打通產品經理和前端時，毫無疑問，也可以打通產品經理和后端開發這條線，

基于當前設計，我們將表單和元素解耦后，完全可以預知這個頁面里，最后要提交給后臺的資料是什么樣子的，

換句話說，哪些元素必填、非必填、長度、型別，都是可以預知的，

而恰好，后端在表單校驗時，也是需要這些東西來校驗表單提交內容，因此，我們可以基于這個，直接生成后端的代碼，可以減少許多后端開發作業量，

因為是自動生成的，所以當產品經理更新他的需求后（表單元素），后端可以通過工具再次生成，而無需手動維護，

更重要的是，通過這種方法生成的前后端代碼，不會存在因為溝通問題，而導致欄位校驗規則不一致的情況，

毫無疑問，這也可以提高工程可靠性，

除此之外，還可以基于已有的 Excel、前端/后端代碼，做型別/資料推斷，在產品經理新增要素時，根據已有資料，智能猜測這個欄位的型別、規則等條件，

6.4 橫向拓展：表格、圖表的自動生成

一般來說，表單提交后，有時候需要通過表格、圖表來預覽，

所以在這種場景比較多的情況下，我們也可以基于穩定可靠的資料源，寫一個自動生成圖表、表格代碼的工具，

甚至，可以復用這個 json 配置，然后寫一個轉換函式，自動生成表格/圖表，

這個難度并不高，

七、總結

總而言之，wti-form，就使用難度、專業度、開發效率來說，完爆市面上大部分表單組件，并且不需要額外學習成本，

并且如果你目前已經在使用 ElementUI，那么使用本組件開發新表單，是毫無成本和風險的，

無論是接私活的后端開發者，成本有限人力不足天天加班的技術負責人，toB 場景需要寫大量表單頁面的中小軟體開發企業，都是最佳選擇，