Element ui关闭el-dialog时如何清除数据

element ui关闭el-dialog时清除数据

如果是按叉叉关闭或者点表单以外空白处关闭的话

可以给el-dialog添加   

:before-close="closeForm"

在methods里添加函数

    closeForm(){
      this.$refs.form.resetFields();//清除数据
      this.dialogFormVisible=false;//关闭对话框
    }

如果是按取消按钮清除数据，也可以给取消按钮绑定点击事件，点击取消则调用closeForm函数。

注意：

1.要为每个 form-item 加上 prop 属性，要不然无法清空

2.resetFields() 方法是重置表单，重置为初始值，而不是设置为空值

element ui对话框el-dialog关闭事件,清空填写的数据

通常会有需求，在关闭弹框后需要清空填写的数据，这时候就需要关闭事件了

<el-dialog title="标题" :visible.sync="bind" size="small" @close='closeDialog'>
</el-dialog>

在标签中加入@close='closeDialog'

mothods中加入

   //关闭弹框的事件
    closeDialog(){
      this.xxx = '';//清空数据
    },

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。