1、前提基础

• 熟悉vue.js以及element-ui。
• 已经创建好的vue项目。

2、功能描述

1. 页面效果如下：

2. 功能点介绍：这是一个描述产品信息的页面，整体是一个form表单，需要验证产品名称和描述。针对这个产品需要问题列表，用于收集用户对这个产品的反馈信息。问题列表可以不填，但是一旦添加了问题，问题的标题和描述都是必填的。
3. 按钮功能描述：

• 点击添加按钮，添加一个问题的表单，出现收起按钮；
• 点击清除按钮，清除所有的问题表单，收起按钮消失；
• 点击收起按钮，表单收起，文案变成展开；点击展开，表单展开，文案变成收起；
• 每个表单都有一个删除按钮，点击删除，删除对应的问题表单，问题1、问题2、等重新排序。当删除所有问题表单之后，收起按钮消失；

3、代码讲解

1. 新建一个FormExample.vue的页面,添加到项目路由并打开此页面（省略css样式部分）。
2. 创建一个form表单：

3. 添加子表单部分：

4. 对添加和清除按钮添加点击事件：

5. 点击添加按钮出现收起按钮，点击清除清空表单：

6. 给收起按钮添加点击事件：

7. 点击收起按钮，表单收起，文案变成展开；点击展开，表单展开，文案变成收起；通过isShow参数来控制问题表单的height实现收起与展开的效果。

8. 给每个问题表单的删除添加点击事件：

9. 到此页面逻辑已经基本实现。现在我们来给表单添加验证规则，添加submitForm方法。

10. 此时只是添加了父表单的验证方法，当问题列表表单有问题的时候也需要验证问题表单，给自表单添加验证规则：

11. 先检验父级表单，如果父表单验证通过，继续验证子表单，返回子表单的验证结果,页面效果如下，如果此时处于收起状态，页面将自动展开，并抛出错误:

12. 如果子表单也验证通过，点击保存将会提交成功：

13. 到此我们的功能已经全部实现。

4、功能扩展

• 思考：当我们不仅仅只有一个问题列表，而是同时有多个类似的子表单时该怎么实现呢？
• 页面效果如下：

• 可以先自行思考，如果想不明白的可以@我，我将会在后续解答。tips: 此时我们需要子表单的验证方法，childList，childForm参数变成一个可配置的变量即可。