ElementUI dialog弹框退出时重置表单数据

需求

进行项目开发，用到了ElementUI的dialog弹出框，当再次点击弹出框时发现，原本数据的还存在

解决

查阅了ElementUI的文档，发现一个好东西

就是这个方法，解决了问题，分享一下用法

直接上代码吧，根据代码进行讲解


<template>
    <div>
        <el-dialog
            title="弹框的标题（可以根据需求自己定义）"
            :visible.sync="dialogVisible"
            width="80%"
            @close ='resetForms(点击事件名称，自定义)' > // 官方提供的回调方法
        
            <el-form ref="form" :model='form' label-width="200px"  :inline="true"  class="demo-form-inline" :rules="rules">
                <el-form-item label="区划编码" prop="QHBM">  
                    <el-input v-model="form.QHBM" style="width:150px;"></el-input>
                </el-form-item>
            </el-form>
        </el-dialog>

    </div>
</template>
<script>
    export default{
        date(){
            return {
                form:{
                    QHBM:'',
                }
            }
        },
        methods :{
            resetForms(){
                this.$refs['form'].resetFields();   // form是绑定数据,一定记得加prop参数，不加的话无法重置弹框表单数据
            },

        }
    }
</script>

代码展示

总结

按照这个方法，可以实现退出弹框时，数据重置的效果