vue element dialog弹框 表单新增后再点击新增表单无法重置问题

刚才为了解决这问题，百度了一大圈，好几种都不生效，亲测有效的方法如下：
思路：在dialog打开的时候重置表单的值。
故在dialog中添加open方法，如下：

<!-- 新增弹框 -->

 <el-dialog title="新增sql" :visible.sync="dialogFormVisible" @open="resetForm('addForm')">

     <el-form ref="addForm" :model= "addForm" :inline="true" @keyup.enter.native="handelAddConfirm()">

         <el-form-item label="sql名称" prop="sqlName">

            <el-input v-model="addForm.sqlName" autocomplete="off"></el-input>

         </el-form-item>

         <el-form-item label="目标数据库、表名称" prop="tableId">

         <div class="cascaderBox">

             <el-cascader

             size="mini"

             v-model="addForm.tableId"

             :options="cascaderOptionsLevel2"

             :props="optionProps"

             filterable

             collapse-tags

             clearable

             @change="handleChange"

             ></el-cascader>

         </div>

         </el-form-item>

     </el-form>

     <div slot="footer" class="dialog-footer">

         <el-button @click="dialogFormVisible = false">取 消</el-button>

         <el-button type="primary" @click="handelAddConfirm">确 定</el-button>

     </div>

 </el-dialog>

然后在method中添加 resetForm方法：

//点击新增按钮 重置表单

resetForm(formName) {

 if (this.$refs[formName]!==undefined) {

        this.$refs[formName].resetFields();

 }

},