element ui 大屏_表单

在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"
>

dialog中表单resetFields并没有清空表单

常见的出行情况为 表单回显的时候 并没有清空 而是重置为上一次的值

按照文档的说法

resetFields	对整个表单进行重置，将所有字段值重置为空并移除校验结果

但是实际上resetFields是清空validateMessage，然后将值重置为上一次初始化的值。

解决办法:

这个问题的本质是因为你编辑时，第一次打开对话框的时候给表单绑定的模型赋值了，
这时候这个模型的初始值就变成了你所赋值的值，所以resetFields的时候，替换模型对应的每个值重置到初始值，
这时候的初始值就是你编辑时赋值的那个值，而不是在数据里声明的初始值，解决方式是，等dialog已经初始化安装之后再给模型赋值，也就是
this.$nextTick(() => { // 这里开始赋值 this.formData = xxx; })

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错误 ,所以在使用弹窗的时候一定要注意异步操作等所有操作完毕才可以关闭弹框