element表单重置resetFields()方法不生效解决

this.$refs[xxx].resetFields();方法常见于弹出框内搭配表单使用时调用，用于重置表单内容。这里解释一下resetFields()，其本质是初始化数据而不是清空数据，理解这个本质才能想明白在什么时候使用该方法才是正确的。
查看百度很多解决思路都是有问题的，说的半知半解甚至完全不搭边，首先resetFields()生效的前提条件有几点：
1.form上必须有ref属性，例如

<el-form :model="dataForm" :rules="dataRule" ref="dataForm">

这个ref随便定义，但要注意单组件内有多个form时ref不能重名
2.每个el-form-item上都要有prop属性，并且prop应该和绑定值名称保持一致

<el-form-item label="名称" prop="name">
    <el-input
        class="inline-input"
        v-model="dataForm.name"
    ></el-input>
</el-form-item>

重置resetFields()方法不生效的解决方法：弹出框内的表单重置要在每次提交表单，关闭弹框前重置，可以直接在@close回调中写入，能解决弹出内所有情况的重置

<el-dialog :title="id ? '编辑工具' : '新增工具'" width="50%" :visible.sync="visible" @close="handleClose">

//关闭弹出时调用
handleClose() {
    console.log('关闭')
    this.$refs["dataForm"].resetFields(); // 提交后重置，不能打开时重置
}

误区：不要在进入弹出框时执行resetFields()方法来重置，而是在关闭弹出前重置