element中el-dialog点击关闭或确认按钮清除里面的内容和验证

代码：

<template>
  <div>
    <el-button type="primary" @click="dialogFormVisible = true">打开嵌套表单的Dialog</el-button>
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" :rules="rules" :before-close="closeDiv">
        <el-form-item label="姓名" prop="Name">
          <el-input v-model="form.Name" placeholder="请输入真实姓名"/>
        </el-form-item>
        <el-form-item label="手机号码" prop="Mobile">
          <el-input v-model="form.Mobile" placeholder="请输入手机号码" maxlength="11"/>
        </el-form-item>
        <el-form-item label="身份证号" prop="idCardNo">
          <el-input v-model="form.idCardNo" placeholder="请输入身份证号" maxlength="20"/>
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input v-model="form.address" type="textarea" placeholder="请输入详细地址"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="Submit">提交 </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogFormVisible:false,
      form: {},
      // 表单校验
      // 表单校验 pattern可以做正则验证
      rules: { 
        Name: [
          { required: true, pattern:/^[\u4e00-\u9fa5a-zA-Z]{1,20}$/, message: "请输入中英文姓名", trigger: "blur" }
        ],
        address:[
          {required: true, message: "请输入详细地址", trigger: "blur" }
        ],
        Mobile: [
          {
            required: true, 
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        idCardNo: [
          {
            required: true,
            pattern: /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|[xX])$/,
            message: "请输入正确格式身份证号",
            trigger: "blur"
          }
        ],
      },
    }
  },
  methods: {
    // 点击提交
    Submit() {
      this.$refs['form'].validate(valid => {
        if(valid) { // 请求后台接口  表示验证通过
          // 请求后台接口  进行操作
          // 请求成功之后 清除输入框汇中的内容
          this.$nextTick(() => {
            // form对应你写的<el-form ref="form"></el-form>
            this.$refs["form"].resetFields();
          });
        }
      })
    },
    cancel() {
      this.dialogFormVisible = false
      // 点击取消按钮的时候清除输入框中的内容 清除验证
      //  this.$nextTick获取了节点之后进行操作
      this.$nextTick(() => {
        // form对应你写的<el-form ref="form"></el-form>
        this.$refs["form"].resetFields();
      });
    },
    // 右上角 × 取消按钮
    closeDiv() {
      this.$nextTick(() => {
        // form对应你写的<el-form ref="form"></el-form>
        this.$refs["form"].resetFields();
      });
    }
  }
}
</script>

如有错误或者改善之处 欢迎指出矫正