vue中element-ui 重置表单对话框

1.给表单添加一个 ref 引用属性,通过this.$refs来调用

2.@close="addDialogClosed" 表示：当对话框关闭的时候触发此事件，所以把这个事件添加在el-dialog上

<el-dialog
      title="添加用户"
      :visible.sync="addDialogVisible"
      width="30%"
      @close="addDialogClosed"//-
-----------------------------------------2.添加监听对话框关闭触发事件
>
 
      <!-- 内容主体区域 -->
      <el-form
        :model="addForm"
        :rules="addFormRules"
        ref="addFormRef"//---------------1.给表单添加ref属性
        label-width="70px">

        <el-form-item label="用户名" prop="username">
          <el-input v-model="addForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="addForm.password" show-password></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="phone">
          <el-input v-model="addForm.phone"></el-input>
        </el-form-item>

</el-form>
</el-dialog>

3.在addDialogClosed（）函数中输入this.$refs.addFormRef.resetFields();初始化表单数据

  methods:{

//监听用户对话框关闭事件

    addDialogClosed() {
      this.$refs.addFormRef.resetFields();//3.重置表单
    },

}