ElementUI组件Dialog弹窗再次打开表单仍显示上次数据的问题
短信预约 -IT技能 免费直播动态提醒
ElementUI组件Dialog弹窗再次打开表单仍显示上次数据
问题描述：在使用vue+element开发Dialog嵌套表单的时候，表单交数据关闭之后再次打开表单没有重置，仍显示上次输入的数据。
点击新增，显示弹窗
添加后，数据显示在页面中。当再次点击新增时出现以下界面：仍保留上次的数据，而且若修改表单中数据页面中的数据也会被修改。
根本原因是 form表单对象保留了上次的数据，应该将其置空。
重置方法
嵌套表单的弹窗的代码：
<el-button type="text" @click="dialogFormVisible = true"
@open="resetForm">弹窗</el-button> //@open事件绑定打开表格时重置
<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
<el-form :model="form" ref="form" :rules="rules">
<el-form-item prop="id" label="编号" :label-width="formLabelWidth">
<el-input v-model="form.id" autocomplete="off"></el-input>
</el-form-item>
<el-form-item prop="name" label="名称" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item prop="type" label="型号" :label-width="formLabelWidth">
<el-input v-model="form.type" autocomplete="off"></el-input>
</el-form-item>
<el-form-item prop="company" label="厂家" :label-width="formLabelWidth">
<el-input v-model="form.company" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
</div>
</el-dialog>
<script>
export default {
form:{
id:'',
name:'',
type:'',
company:''
}
methods:{
resetForm(){
this.form={}; //重置表格对象
}
}
}
};
</script>将Dialog弹窗的打开事件绑定方法，然后在方法中使用this.form={}进行重置。
this.form={}这个的意思是把表单初始化为一个空对象，后期可以往这个对象里赋值。
关闭element UI的弹窗，再次打开显示表单验证提示
打开弹窗，没有填写任何信息，点击保存按钮，触发了表单的验证提示，没有进行任何操作，点击【关闭按钮】或者【取消按钮】关闭弹窗，再次打开弹窗，仍然显示表单的验证提示信息，
解决方法
给el-dialog添加@close事件，给取消按钮添加点击事件，在事件中对表单进行重置操作，即可解决
重置表单
this.$refs.dialogForm.resetFields();
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
