如果新增和编辑是同一个组件,那么在关闭编辑弹窗并打开新增弹窗时,需要对表单的数据进行重置,同时还需要清除表单验证错误信息。可以按照以下步骤来实现:
1.在表单组件中,定义一个名为resetForm
的方法,用于重置表单的数据和验证信息:
methods: {
resetForm() {
this.$refs.form.resetFields();
this.$refs.form.clearValidate();
}
}
2.在父组件中,定义一个名为handleClose
的方法,用于关闭编辑弹窗并打开新增弹窗,同时调用表单组件的resetForm
方法:
methods: {
handleClose() {
this.editVisible = false;
this.resetForm();
},
resetForm() {
this.$refs.form.resetForm();
}
}
3.在编辑弹窗和新增弹窗的模板中,分别绑定关闭按钮的点击事件,调用父组件的handleClose
方法:
<!-- 编辑弹窗模板 -->
<template>
<el-dialog :visible.sync="editVisible" title="编辑" @close="handleClose">
<!-- 省略表单内容 -->
</el-dialog>
</template>
<!-- 新增弹窗模板 -->
<template>
<el-dialog :visible.sync="addVisible" title="新增" @close="handleClose">
<!-- 省略表单内容 -->
</el-dialog>
</template>
这样,当关闭编辑弹窗并打开新增弹窗时,表单的数据和验证信息就会被重置,从而避免了上述问题。