vue element 右上角×关闭弹窗并清空表单校验信息

先上图

需求：点击取消按钮和右上角的的×都要清空form表单的信息。
首先：点击取消按钮清空按钮的实现方法比较简单，不多说贴代码：

模板中代码：
<el-button @click="close('form')">取 消</el-button>

js代码：
  close(formName){
     var _this = this;
     _this.$refs[formName].resetFields();
     _this.dialogFormVisible = false;
  },

然后右上角element官方弹框组件给出的是，不多说贴代码：

<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>

<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <span>这是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

<script>
  export default {
    data() {
      return {
        dialogVisible: false
      };
    },
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  };
</script>

好了，为了把formName引入我们把:before-close="handleClose"改成:before-close="handleClose(‘form’)"带来的是项目报错。原因是handleClose里不可传参。那么该怎么办？？？？
本人研究了好久最终搞定：不多说贴代码：

模板如下：
<el-dialog
      width="700px"
      style="text-align:left"
      :title="titleText"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      @close="reset('form')"
    >
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="父专题" label-width="80px">{{form.parentName}}</el-form-item>
        <el-form-item label="名称" label-width="80px" prop="name">
          <el-input v-model="form.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="次序" label-width="80px" prop="orderNum">
          <el-input-number
            style="width:40%"
            v-model="form.orderNum"
            @change="numberChange"
            :min="0"
            :max="100"
          ></el-input-number>
        </el-form-item>
        <el-form-item prop="picture" label-width="80px" label="图片">
          <el-upload
            class="avatar-uploader"
            action="/api/api/upload"
            :show-file-list="false"
            :headers="myheaders"
            :on-success="handleAvatarSuccess1"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="form.picture" :src="form.picture" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <span>{{form.tips}}</span>
        </el-form-item>

        <el-form-item label="关联菜品" prop="foodId" label-width="80px">
          <el-select
            style="width:100%;"
            class="serviceCharge"
            v-model="form.foodId"
            placeholder="请选择"
          >
            <el-option
              v-for="item in foods"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button @click="dialogFormVisible = false">取 消</el-button> -->
        <el-button @click="close('form')">取 消</el-button>
        <el-button type="primary" @click="handleAdd('form')">{{buttonText}}</el-button>
      </div>
    </el-dialog>
脚本代码如下：
 reset(formName){
     var _this = this;
    this.$refs[formName].resetFields();
  }

不使用官方文档给出的before-close属性，而是使用close事件，问题迎刃热解！！！！！
搞定******搞定******搞定******搞定******搞定******搞定******搞定******搞定******搞定******搞定******搞定