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();
 }
},