Element-ui中弹层close事件重置表单数据

目标:在弹层隐藏时(点了表单上的:取消,确定,点了弹层中右上角的关闭,点了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()
    }

上一篇:JAVA之IO流,mysql主从复制原理简书


下一篇:div中移除和添加元素