Element-Dialog 常见问题

在dialog中重置表单的方法

在 dialog取消按钮或者在对话框关闭的 before-colse事件中添加：

closeDiglog(){
    //$nextTick()是一个异步事件
    //弹出窗口打开之后,需要加载DOM,所以不用异步事件,获取不到表单DOM
    this.$nextTick(()=>{
        //清空验证
        this.$refs[‘Form‘].clearValidate();
        //清空表单
        this.$refs[‘Form‘].resetFields()
    })
}

注意:清空表单一定要给el-form-item添加prop属性,不然重置表单无效

<el-form-item label="申请人身份证" prop="id_num">

上面为一种清空方式
还有种清空方式为 ：

<el-dialog 
:close-on-click-modal="false" 
:title="dialogTitle" 
:visible.sync="dialogFormVisible" 
@close="closeDialog">
</el-dialog>				
<!-- ↑监听dialog关闭事件,进行表单清空,无需异步 --> 

最简单粗暴就是在dialog对话框添加v-if，下次打开对话框重新渲染即可。

<el-dialog
  title="事项受理"
  v-if="dialogFormVisible"
  close-on-press-escape
  :before-close="closeDiglog"
  width="430px"
>

form表单里有upload组件时报错

浏览器报错

Uncaught TypeError: Cannot set property ‘status‘ of undefined
    at s.handleProgress (vendor.dll.js:44)
    at Object.onProgress (vendor.dll.js:44)
    at XMLHttpRequestUpload.t.upload.t.upload.onprogress
     (vendor.dll.js:44)

原因很简单，由于这个表单是在一个弹框里面的,所有当弹框关闭时/的所有组件都不能再次引用，比如说操作了file,file-list属性时，就会出现undefined错误 ,所以在使用弹窗的时候一定要注意异步操作等所有操作完毕才可以关闭弹框

Element-Dialog 常见问题

原文：https://www.cnblogs.com/cjh1996/p/12768867.html