1、前提基礎(chǔ)

• 熟悉vue.js以及element-ui。
• 已經(jīng)創(chuàng)建好的vue項(xiàng)目。

2、功能描述

頁面效果如下：

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

按鈕功能描述：

• 點(diǎn)擊添加按鈕，添加一個(gè)問題的表單，出現(xiàn)收起按鈕；
• 點(diǎn)擊清除按鈕，清除所有的問題表單，收起按鈕消失；
• 點(diǎn)擊收起按鈕，表單收起，文案變成展開；點(diǎn)擊展開，表單展開，文案變成收起；
• 每個(gè)表單都有一個(gè)刪除按鈕，點(diǎn)擊刪除，刪除對應(yīng)的問題表單，問題1、問題2、等重新排序。當(dāng)刪除所有問題表單之后，收起按鈕消失；

3、代碼講解

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

創(chuàng)建一個(gè)form表單：

添加子表單部分：

對添加和清除按鈕添加點(diǎn)擊事件：

點(diǎn)擊添加按鈕出現(xiàn)收起按鈕，點(diǎn)擊清除清空表單：

給收起按鈕添加點(diǎn)擊事件：

點(diǎn)擊收起按鈕，表單收起，文案變成展開；點(diǎn)擊展開，表單展開，文案變成收起；通過isShow參數(shù)來控制問題表單的height實(shí)現(xiàn)收起與展開的效果。

給每個(gè)問題表單的刪除添加點(diǎn)擊事件：

到此頁面邏輯已經(jīng)基本實(shí)現(xiàn)?，F(xiàn)在我們來給表單添加驗(yàn)證規(guī)則，添加submitForm方法。

此時(shí)只是添加了父表單的驗(yàn)證方法，當(dāng)問題列表表單有問題的時(shí)候也需要驗(yàn)證問題表單，給自表單添加驗(yàn)證規(guī)則：

先檢驗(yàn)父級表單，如果父表單驗(yàn)證通過，繼續(xù)驗(yàn)證子表單，返回子表單的驗(yàn)證結(jié)果,頁面效果如下，如果此時(shí)處于收起狀態(tài)，頁面將自動(dòng)展開，并拋出錯(cuò)誤:

如果子表單也驗(yàn)證通過，點(diǎn)擊保存將會(huì)提交成功：

到此我們的功能已經(jīng)全部實(shí)現(xiàn)。

4、功能擴(kuò)展

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。