element-ui组件dialog遇到form

Vue.js彷佛成了一种潮流。

UI框架element-ui也跟着成了一种潮流，不过得认可，至少我我的仍是很是承认的，element-ui作的是真不错。

用到element-ui，那么在dialog中搭配form就必不可少。

<el-dialog
    :visible.sync="visible"
    title="弹窗"
    :before-close="beforeClose"
    @open="openDialog"
    width="480px"
  >
    <el-form
      :model="form"
      :rules="rules"
      ref="form"
    >
      <el-form-item
        label="操做人"
        prop="operator"
      >
        <el-input
          placeholder="请输入操做人"
          v-model.trim="form.operator"
        ></el-input>
      </el-form-item>
    </el-form>
    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        @click="submit"
        type="primary"
        class="btn-custom"
      >
        <span>确 定</span>
      </el-button>
    </div>
  </el-dialog>

弹窗内有form表单，并且这个表单须要校验，那么若是目前输入框校验报错以后，或者输入以后，关闭弹窗了，在当前页面，再次打开该弹窗，会显示上一次的输入值以及报错提示。

这就产生了一个小需求，弹框打开以后，须要把全部form表单重置为初始状态。需求很小，也很正常，然而解决这个问题，前期走了不少弯路。

查看一下，dialog的事件：

Events

事件名称	说明	回调参数
open	Dialog 打开的回调	——
opened	Dialog 打开动画结束时的回调	——
close	Dialog 关闭的回调	——
closed	Dialog 关闭动画结束时的回调	——

那么只能从这4个事件中考虑，要不在打开弹窗的时候，清除数据。要不在关闭弹窗的时候，清除数据。

比对以后，结合需求，能够考虑open，在弹框打开时清除数据，closed，弹框已经彻底关闭以后，清除数据。

最开始，我是在closed以后，清除form表单的数据的。

在el-dialog标签上添加：

@closed="closeDialog"

添加方法：

closeDialog (formName) {
	this.$refs[formName].resetFields()
}

这里容易产生一个新的问题，若是须要向上层组件传递form表单内用户填充的数据： this.$emit('sendFormData', this.form) 也就是点击Form表单的提交按钮，须要干两件事:sendFormData和resetFields，这时，无论这段代码如何组织，在上层组件当中，接收到的值，必然是resetFields以后的值。

因此，必需要把这两件事分开来干，sendFormData放在close事件当中，或者before-close属性当中，而后在closed事件当中，再进行resetFields。

亦或者，在closed事件中，进行this.$emit('sendFormData', this.form)操做，而后在dialog open的时候，this.$refs[formName].resetFields()。

这里有一点须要注意的是：

在第一次打开弹窗的时候，会产生一个错误提示

产生这么个错误的缘由在于，初次打开弹窗，DOM节点尚未渲染完成，这时是取不到this.$refs[formName]的，那么跟着他调用resetFields这个函数，必然会报错。加一个简单的判断便可，if(this.$refs[formName]) this.$refs[formName].resetFields()。

曾经踩过的坑，或者说还在踩着的坑，但愿对即将会踩到的坑的同窗们，有所帮助。