哈嘍哈嘍撮奏，大家好。
今天和大家分享一下当宴，在vue中畜吊，如果高效的開發(fā)表單。
首先我們來確定表單的功能户矢，表單主要是用來收集用戶數(shù)據(jù)的信息玲献，然后提交后臺。也就是需要在頁面上提供一些列的輸入框梯浪，用戶完成輸入后捌年，通過提交按鈕，觸發(fā)表單驗證挂洛，驗證不通過則提示錯誤礼预，驗證通過則將收集的信息發(fā)送給后臺，后臺處理完成后抹锄，提示前端成功還是失敗逆瑞。按照業(yè)務功能來說，表單分為新建和編輯兩種伙单，其中數(shù)據(jù)驗證获高，提交的邏輯都是一樣的，只是編輯的場合吻育，事先需要根據(jù)記錄的ID加載待編輯的數(shù)據(jù) 來填充表單念秧。然后 編輯的提交 通常 是增量修改，就是只提交變化的部分布疼。
以往我們開發(fā)表單摊趾，需要完成以下步驟。
1. 構建layout游两，就是準備各種輸入框砾层，備選項（單選按鈕、復選按鈕贱案、下拉列表）肛炮，確定報錯消息展示的位置。
2.? 表單驗證
3. 表單數(shù)據(jù)提交，提交之前可能需要對待提交的數(shù)據(jù)做一下處理侨糟，以滿足接口要求碍扔。
在vue環(huán)境中，大家可能首先會想到用element-ui秕重，因為它美化了輸入組件不同，定義來標準form的開發(fā)模式，提供了表單驗證的功能溶耘，使用element-ui可以幫大家開發(fā)出簡約大方的form表單二拐。
下圖是一個典型的element-ui的form
這里是上面表單的layout部分的代碼截圖
下面是它的表單驗證的部分
具體請參考element-ui的官方文檔
https://element.eleme.cn/#/zh-CN/component/form
可以說element-ui在很大程度上，幫大家用最少的代碼 完成了產品級表單頁面的開發(fā)汰具。但是我們依然要處理大量的layout的代碼卓鹿，而這些代碼看起來都是重復的代碼菱魔，自己寫雖然靈活度高留荔，但是有沒有辦法自動完成呢。而且使用element-ui我們依然是要處理表單提交澜倦，以及編輯時候的數(shù)據(jù)拉取聚蝶，這些事實上在各個表單中，也都是雷同的工作藻治，不同的表單碘勉，處理方式應該都是一樣的，僅僅是 提交數(shù)據(jù)的接口不一樣桩卵，基于這個總結验靡，我們可以做一個 表單組件，通過url指定要提交數(shù)據(jù)的位置雏节，通過inputs傳入表單輸入項目的定義胜嗓，然后讓這個form組件 自動完成layout繪制，數(shù)據(jù)拉取钩乍，表單驗證辞州，數(shù)據(jù)提交等一些列動作。
tsyvue中定義的 sy-form表單就完成了我上面描述的工作寥粹。
http://tsy.zone/tsyvue/sy-form
tsyvue是為了進一步簡化項目開發(fā)变过，根據(jù)多年的開發(fā)經(jīng)驗，提煉出項目中大量的共通代碼形成的擴展組件庫涝涤，通過npm發(fā)布媚狰，大家可以在自己的vue工程下運行 npm install tsyvue -S 來安裝。
通過tsyvue的sy-form構建一個用來 新建數(shù)據(jù)據(jù)的表單阔拳，layout的部分只要提供如下代碼即可崭孤。
sy-form(:inputs='formInputs' url='/example/form/url')
這里模板部分使用的pug語言，相較html更加簡潔。
可以看到裳瘪，sy-form僅僅接收了一個url土浸，表示最終數(shù)據(jù)要提交的位置。以及inputs彭羹，定了表單輸入項目黄伊，剩下繪制表單，驗證數(shù)據(jù)派殷，提交數(shù)據(jù)还最，就都交給sy-form來完成了。
下面時input定義的例子
目前sy-from能夠滿足大部分場景的需求毡惜，下圖時基于sy-form繪制的表單的例子拓轻。
可以看到支持input radio select checkbox datepicker等多種輸入框，這里面的 單選按鈕 多選按鈕 下拉框 都是 tsyvue 的 sy-options組件渲染的经伙，具體如何使用扶叉，請參考tsyvue的文檔，并下載例子調試
sy-options是備選項帕膜，可以通過type指定外觀枣氧，外觀 支持 下拉列表，單選按鈕垮刹，復選按鈕等达吞，有單選和多選模式，至此從接口獲取備選項荒典，或者前端提供備選項酪劫。詳細用法請參考?
