目标:在弹层隐藏时(点了表单上的:取消,确定,点了弹层中右上角的关闭,点了ESC,点了弹层的遮罩区域),将表单数据恢复到之前的状态
两种方法:
1. v-if
<el-dialog :visiable="showDialog" v-if="showDialog"></el-dialog>
当弹层隐藏时,组件会被v-if销毁,从而清空表单数据
注意:v-if的方法虽然非常简单,但组件的销毁和重建会消耗性能
2.用<el-dialog>组件的close事件
在关闭弹层时,showDialog的值会变成false,它会触发弹层(el-dialog组件)的close事件
<el-dialog :visible.sync="showDialog" title="弹层标题" @close="close">
在方法中清空表单:
close () {
// 1. 把表单的数据项清空
this.directoryAdd = {
subjectID: '',
directoryName: ''
}
// 2.清空校验
this.$refs.form.resetFields()
}