Vue中動態增加表單項的方法

在我的項目中遇到了兩種動態增加表單項的場景，壹種是對Form的添加，另外壹種是對Table的添加。當初實現這兩種時還有壹點喜悅，現在回過頭來看，發現這兩種實際就是壹種，以後就可以根據個人喜好選擇了。

這裏因為要添加的表單項存在著父子關系，要添加的子代很多，而父代屬性又壹致，用這種方式可以減少重復操作。表單樣式就不再贅述了，具體看圖

這裏 tab 就是我們每次添加子表單時要push進數組tabs的內容。

2、為添加要素按鈕綁定壹個 addTab() 方法，用於在每次添加子表單時，向數組中push壹個元素

3、對表單項的編寫與正常壹樣，只不過在數據綁定上不同，需綁定到tab中的元素

4、如果要刪除多余tab，需要在 <div> 中聲明壹個 removeTab() 的方法，來刪除對應的tab，這點區別於 addTab() ，它是定義在 <div> 之外的，每次新增的tab都會插到整個表單的末尾。

這裏的table也是存在父子關系，只是展示形式的區別。因為後臺的數據還有著展示的需要，所以才選用了表格這種形式來實現。

1、將table組件聲明在壹個 <template> 標簽下，用以根據後臺數據進行動態加載。

2、對表格中需要編輯的內容，可以在 <template> 標簽下聲明壹個輸入框，並使用插槽來實現數據的綁定。

3、與上面相同的，聲明壹個 addRow() 的方法，用於增加表格的行數。

4、刪除不想要的行，需要對應增加壹個 deleteRow() 方法