我命由我不禁天，手寫表單費時間

前言

咱們都知道作後臺項目打交道最多的就是表單了，因人而異在表單這塊花費的時間也是不同的，能夠說表單佔據了咱們大部分的頁面開發時間，由於起初團隊裏沒有個統一的頁面表單規範，可謂每一個人都寫得很freestyle了。也許咱們當時只顧敲的一時爽，一直敲一直爽。可是欠下的債早晚有一天是要還的。有一句話這麼說：「不會偷懶的程序員不是好程序員」。對於我這麼一個喜歡偷懶的老程來說，實在是以爲寫重複的東西有點浪費生命，我總以爲生活不該該這樣，應該還有詩和遠方。所謂："我命由我不禁天，手寫表單費時間"。因而乎我要逆天而行了，踏上了重構表單的這條不歸路。

表單進階

•  初級：開發一款表單組件，最好能統一規範表單頁面開發 (element-form-schema 它來了)
•  中級：基於 VS code  Snippets，開發一些element-ui組件的snippets代碼片斷 (element-form-schema.json.code-snippets 它來了)
•  高級：基於 VS code IDE的插件功能，開發一款UI交互的表單拖拽生成頁面文件的插件 (element-form-schema-editor 它來了)

初級：開發一款表單組件，最好能統一規範表單頁面開發 (element-form-schema 它來了)

其實在開發表單組件的時候，調研了一些業界相似的方案，react的方案比較多，好比uform（阿里）、amis（百度）等屬於大公司方案，而對於vue框架下的通用且能知足項目裏業務的表單schema方案不多，即便你找到了也無法一眼看出裏面的坑，除非你對它瞭如指掌，要否則那就是給團隊裏埋坑。我舉幾個form schema必須支持的功能：必須支持全部的組件（自定義組件、全局註冊組件）、組件必須支持相似於v-if複雜條件（聯動須要）、必須支持組件包含數組的狀況、必須支持組件之間任意的slot插槽。再三考慮就開發了 element-form-schema。

element-form-schema 是基於 vue render,  element-ui 開發的一款表單組件，旨在：

• 爲了統一一致form表單標準化開發;
• 爲了提升表單的開發效率;
• 爲了讓表單變得具備可維護性;

element-form-schema 特性：

• 支持 `查詢表單`、`彈框`、`新增表單` 的需求
• 支持 查詢表單的 `展開/隱藏` 需求
• 支持 設置表單組件延用 `element-form-item` 的 `rules` 驗證，能夠經過 `ref`, 調用 `resetFields` 方法
• 【亮點】支持 單獨設置表單組件中的 `inline` 特殊性
• 【亮點】支持 統一設置組件：`size`、`width`
• 【亮點】支持 表單組件之間的簡單、複雜聯動 `隱藏：vif: '條件'`，`禁用：props: { disabled: '條件' }`
• 【亮點】支持 表單中數組的雙向綁定，能夠經過 `{ tag: 'slot', slot: 'slot-name' }` 來處理
• 【亮點】支持 業務組件

其實表單最多出如今2種狀況，能夠概括爲：列表查詢表單、新增頁面表單

element-form-schema 表單組件代碼片斷：

中級：基於 VS code Snippets，開發一些element-ui組件的snippets代碼片斷 (element-form-schema.json.code-snippets 它來了)

可能有人會問，那大家如何作 snippets 的更新了，是複製粘貼嗎？其實咱們是開發了一款內部的 node cli 工具去統一維護更新的（注：若是你們有啥好建議能夠告訴我）

高級：基於 VS code IDE的插件功能，開發一款UI交互的表單拖拽生成頁面文件的插件 (element-form-schema-editor 它來了)

這裏很是感謝JakHuang的插件給我帶來的靈感：github.com/JakHuang/fo…

列表查詢表單：

新增頁面表單：

GIF 演示：

總結：我相信仍是有不少開發者像我這樣，天天還在重複幹着手寫表單的事情，我也但願這篇文章多少能給你們提供一點思路，帶來一點啓發。

都已經2020年了，少年請記住："我命由我不禁天，手寫表單費時間" 。