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参数变成一个可配置的变量便可。