在应用elementUI时遇到的谬误,在网上找了很久,解决办法都没用,官网文档也不够具体。

场景

在对话框敞开或者勾销时要重置表单,而Vue编译不通过,网上说是因为form表单未渲染进DOM,导致找不到此表单对象,导致:
"TypeError: Cannot read property 'resetFields' of undefined"
网友提供的解决办法:
如果是第一次非空验证一下:

          if (this.$refs['dictForm'] !== undefined) {              this.clearForm();//封装了清空操作          }

或者利用Vue的自带个性(DOM渲染后执行):

        this.$nextTick(()=>{            this.$refs.addForm.resetFields(); })

本次解决

试过上述计划后还是没用,那么大概率是代码设计有问题了。
官网提供了一个close的函数(摘自官网):

before-close 仅当用户通过点击敞开图标或遮罩敞开 Dialog 时起效。如果你在 footer 具名 slot 里增加了用于敞开 Dialog 的按钮,那么能够在按钮的点击回调函数里退出 before-close 的相干逻辑。

因为我了解谬误,将close函数与before-close属性混用,导致Vue编译不通过,下边间接贴上代码:
Vue代码:

      <el-dialog        :title="title"        :close-on-click-modal="false"//避免正点退出        :visible.sync="centerDialogVisible"//管制是否显示        @close="clearForm"//对话框右上角自带的敞开按钮事件        width="30%"        center        >

Js代码:

      clearForm(){        //暗藏对话框        this.centerDialogVisible = false;        //表单验证还原        if (this.$refs['bookForm'] !== undefined) {           this.$refs['bookForm'].resetFields();        }else{          this.$nextTick(()=>{            this.$refs['bookForm'].resetFields();          });        }        //还原可编辑        this.flag = false;      }