【el-dialog关闭前重置表单】

问题描述

el-dialog的before-close能接收一个回调函数，在对话框关闭前执行需要的动作，例如我需要的是重置对话框中的表单。
如果只有一个对话框，或者说回调函数不需要额外参数，那么对话框可以这么写：

<el-drawer
  :before-close="handleClose"
>
......

handleClose可以这么写：

handleClose(done) {
  this.$confirm('确认关闭吗？').then(_ => {
    this.$refs.formName.resetFields();
    done()
  }).catch(_ => {})
}

但如果有多个对话框共用这一个关闭前的回调函数，就需要指定要重置的表单了。
对话框可以这么写：

<el-drawer
  :before-close="handleClose('formName')"
>
......

handleClose需要写成闭包，闭包中接收对表单参数的处理：

handleClose(formName) {
 console.log(111, formName)
  return (done) => {
    this.$confirm('确认关闭吗？').then(_ => {
       this.$refs[formName].resetFields();
       done()
     }).catch(_ => {
     })
    console.log(222)
    done()
  }
}

区别解释

before-close本身是一个回调函数，它执行完了才会关闭对话框。如果不是函数，那就直接关闭对话框。源码：

closeDrawer() {
 if (typeof this.beforeClose === 'function') {
    this.beforeClose(this.hide);
  } else {
    this.hide();
  }
},
handleClose() {
  // This method here will be called by PopupManger, when the `closeOnPressEscape` was set to true
  // pressing `ESC` will call this method, and also close the drawer.
  // This method also calls `beforeClose` if there was one.
  this.closeDrawer();
}

页面加载时:before-close="xxxx"就会执行，可以通过添加打印发现。
:before-close="handleClose"并没有真的执行handleClose方法，这里只是一个指向，在真的触发对话框close时才会执行，
而:before-close="handleClose('formName')"是立即执行了handleClose(‘formName’)方法，并将方法的返回值给before-close属性，如果不把handleClose方法改成闭包，那么:before-close="handleClose('formName')"执行后before-close就变成了一个确切的值而不是一个函数，那么对话框在触发关闭时会直接关闭，就没有什么关闭前的操作了。
而写成闭包就不一样了。按照闭包的写法，handleClose('formName')的返回值是一个函数，也就是说before-close属性是一个函数 ，即handleClose中return的以done为参数的函数。再结合源码 if (typeof this.beforeClose === 'function') {this.beforeClose(this.hide);}，触发关闭时，会先执行这个函数，函数执行完再执行this.hide()

原文地址：https://blog.csdn.net/weixin_43846196/article/details/144372823

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！