表单-重置数据

-表单-重置数据

目标

在弹层隐藏时（点了表单上的：取消，确定，点了弹层中右上角的关闭，点了ESC，点了弹层的遮罩区域），将表单数据恢复到之前的状态。

两种思路

1: 用v-if

```
<el-dialog :visiable="showDialog">
   <子组件 v-if="showDialog" / >
</el-dialog>
```

原理是：当弹层隐藏时，子组件被v-if销毁了，所以子组件中表单数据，验证结果全部没有了。

缺点：子组件的销毁和重建会消耗性能

优点：简单

2: 在弹层隐藏时（close事件）获取子组件的引用，调用其中重置表单的动作

<el-dialog :visiable="showDialog" @close="找到子组件，调用它的resetForm方法">
   <子组件 / >
</el-dialog>

在子组件中，单独准备好resetForm方法

resetForm() {
      // 1. 把表单的数据项清空
  
       this.formData = {
         username: '', // 用户名
         mobile: '', // 手机号
         formOfEmployment: '', // 聘用形式
         workNumber: '', // 工号
         departmentName: '', // 部门
         timeOfEntry: '', // 入职时间
         correctionTime: '' // 转正时间
       }
         // 2.重置表单
​
       this.$refs.addForm.resetFields()
    }

在父组件中

监听close

    <el-dialog
      title="添加员工"
      :visible.sync="showDialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
+     @close="hCloseDialog"
    >
      <!--
        @close 关闭弹层
        @update-empolyee 更新数据
        -->
      <add-employee
        ref="AddEmployee"
        @close="showDialog=false"
        @update-empolyee="loadEmployeeList"
      />
    </el-dialog>

```// 关闭弹层
// 1. 在表单中点击取消（添加成功）
// 2. 弹层上点击 X
hCloseDialog() {
  // 相当于是在父组件中去执行子组件中方法
  // 去清空 子组件中的表单数据和校验结果
  // 子组件.resetForm()
  // console.log('在父组件中获取子组件的引用', this.$refs.AddEmployee)
  this.$refs.AddEmployee.resetForm()
}