element-UI 组件 dialog 中 ref 获取不到 dom 的问题解决方案

场景：

• vue + elementUI的项目。
• dialog弹窗内包含表单，表单需要必填校验。
• 关闭弹窗或者再次打开弹窗前需要重置表单和重置校验（不显示上次的红色提示）

遇到的问题：

当直接使用 this.$refs[ref].resetFields()  会报错

官方解释：

Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 ref 获取相应组件，请在 open 事件回调中进行。

解决方法： 

在关闭弹窗的回调方法内处理：

<!-- 全部驳回弹窗 -->
<el-dialog title="批量驳回" :visible.sync="visible"  @close="close('allForm')">
    <el-form ref="allForm" :model="allForm" :rules="batchRules" label-width="110px" size="mini">
       <el-form-item label="驳回理由" prop="reason">
          <el-select v-model="allForm.reason" size="mini" placeholder="">
             <el-option label="全部" value="" />
             <el-option label="理由1" value="1" />
             <el-option label="理由2" value="0" />
         </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
       <el-button size="mini" @click="allVisible = false">取 消</el-button>
       <el-button size="mini" type="primary" @click="allSubmit()">确 定</el-button>
    </div>
</el-dialog>

export default {
    methods: {
        close(ref) {
          this.$refs[ref].resetFields()
        }
    }
}

希望能帮到大家，有问题请留言，共同探讨。