vue 中element-ui的表单重置

问题来源:

点击按钮 打开 dialog时需要重置嵌入的表单,

<el-dialog
      title="课程信息修改"
      :visible="courseconfirm"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      @open="resetForm('course')"     //在此使用用open回调,触发重置方法
      @close="courseconfirm=false"
      width="50%"
    >
1 resetForm(formName) {
2         this.$refs[formName].resetFields();
3     },

此时,由于Form 表单嵌入在dialog里还没加载完,调用resetForm() 方法时报错:Cannot read property 'resetFields' of undefined"

解决方案:

1 resetForm(formName) {
2       this.$nextTick(() => {
3         this.$refs[formName].resetFields();
4       });
5     }

this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新

 

posted @ 2020-08-29 19:00  木子李和三点水  阅读(5574)  评论(0编辑  收藏  举报