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

需求

进行项目开发，用到了El飞行员打一成语ementUI的dialog弹出框，当再次点击弹出框时发现，原本数据的还存在

解决

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

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

<template>    <div>        <el-dialog            title="弹框的标题（可以根据需求自己定义）"            :visible.sync="dialogVisible"            width="80%"            @clo ='retForms(点击事件名称，自定义)' > // 官方提供的回调方法                    <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 :{            retForms(){                this英语提分.$refs['form'].retFields();   // form是绑定数据,一定记得加prop参数，不加的话无法重置弹框表单数据            },        }    }</script>

代码展示

总结

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

本文地址：https://blog.csdn.net/weixin_45139342/article/details/107367989