1、前提基礎

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

2、功能描述

頁面效果如下：

功能點介紹：這是一個描述產品信息的頁面，整體是一個form表單，需要驗證產品名稱和描述。針對這個產品需要問題列表，用于收集用戶對這個產品的反饋信息。問題列表可以不填，但是一旦添加了問題，問題的標題和描述都是必填的。

按鈕功能描述：

• 點擊添加按鈕，添加一個問題的表單，出現收起按鈕；
• 點擊清除按鈕，清除所有的問題表單，收起按鈕消失；
• 點擊收起按鈕，表單收起，文案變成展開；點擊展開，表單展開，文案變成收起；
• 每個表單都有一個刪除按鈕，點擊刪除，刪除對應的問題表單，問題1、問題2、等重新排序。當刪除所有問題表單之后，收起按鈕消失；

3、代碼講解

新建一個FormExample.vue的頁面,添加到項目路由并打開此頁面（省略css樣式部分）。

創建一個form表單：

添加子表單部分：

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

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

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

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

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

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

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

先檢驗父級表單，如果父表單驗證通過，繼續驗證子表單，返回子表單的驗證結果,頁面效果如下，如果此時處于收起狀態，頁面將自動展開，并拋出錯誤:

如果子表單也驗證通過，點擊保存將會提交成功：

到此我們的功能已經全部實現。

4、功能擴展

• 思考：當我們不僅僅只有一個問題列表，而是同時有多個類似的子表單時該怎么實現呢？
• 頁面效果如下：
• 可以先自行思考，如果想不明白的可以@我，我將會在后續解答。tips: 此時我們需要子表單的驗證方法，childList，childForm參數變成一個可配置的變量即可。

總結

以上是生活随笔為你收集整理的vue如何使用element-ui实现循环嵌套的表单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。