vue如何使用element-ui實現循環嵌套的表單

一、前提基礎

• 熟悉vue.js以及element-ui。
• 已經建立好的vue項目。

二、功能描述

1. 頁面效果以下：

   

2. 功能點介紹：這是一個描述產品信息的頁面，總體是一個form表單，須要驗證產品名稱和描述。針對這個產品須要問題列表，用於收集用戶對這個產品的反饋信息。問題列表能夠不填，可是一旦添加了問題，問題的標題和描述都是必填的。
3. 按鈕功能描述：

• 點擊添加按鈕，添加一個問題的表單，出現收起按鈕；
• 點擊清除按鈕，清除全部的問題表單，收起按鈕消失；
• 點擊收起按鈕，表單收起，文案變成展開；點擊展開，表單展開，文案變成收起；
• 每一個表單都有一個刪除按鈕，點擊刪除，刪除對應的問題表單，問題一、問題二、等從新排序。當刪除全部問題表單以後，收起按鈕消失；

三、代碼講解

1. 新建一個FormExample.vue的頁面,添加到項目路由並打開此頁面（省略css樣式部分）。
2. 建立一個form表單：

   

   

3. 添加子表單部分：

   

   

4. 對添加和清除按鈕添加點擊事件：

   

5. 點擊添加按鈕出現收起按鈕，點擊清除清空表單：

   

6. 給收起按鈕添加點擊事件：

   

7. 點擊收起按鈕，表單收起，文案變成展開；點擊展開，表單展開，文案變成收起；經過isShow參數來控制問題表單的height實現收起與展開的效果。

   

8. 給每一個問題表單的刪除添加點擊事件：

   

   

9. 到此頁面邏輯已經基本實現。如今咱們來給表單添加驗證規則，添加submitForm方法。

   

   

10. 此時只是添加了父表單的驗證方法，當問題列表表單有問題的時候也須要驗證問題表單，給自表單添加驗證規則：

    

11. 先檢驗父級表單，若是父表單驗證經過，繼續驗證子表單，返回子表單的驗證結果,頁面效果以下，若是此時處於收起狀態，頁面將自動展開，並拋出錯誤:

    

12. 若是子表單也驗證經過，點擊保存將會提交成功：

    

13. 到此咱們的功能已經所有實現。

四、功能擴展

• 思考：當咱們不單單隻有一個問題列表，而是同時有多個相似的子表單時該怎麼實現呢？
• 頁面效果以下：

  

• 能夠先自行思考，若是想不明白的能夠@我，我將會在後續解答。tips: 此時咱們須要子表單的驗證方法，childList，childForm參數變成一個可配置的變量便可。