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

 

最近才接触到vue和element.ui，发现element.ui里的dialog有一个问题不知道该怎么解决。
1、例如我在dialog里写了一个表单组件，给表单组件设置了ref为form,在打开dialog的时候需要对里面的表单组件进x行this.$ref['form'].resetFields(),来重置表单。
2、现在发现第一次打开dialog的时候，this.$ref['form']为undefined，关闭dialog，第二次打开之后就可以使用了。
3、有次在打开dialog的事件里写了ajax请求，把重置表单的代码写在success回调里，就没有问题了。
4、尝试用了this.$nextTick()，没有什么用。
 

dialog部分：

<el-dialog :visible.sync="dialogFormVisible" width="35%">
    <span slot="title" class="el-dialog__title">{{dialogTitle}}</span>
    <el-form :model="form" ref="roomForm" label-position="left" size="small">
    ...
    </el-form>
    <div slot="footer" class="dialog-footer">
    <el-button size="small" @click="dialogFormVisible = false;$refs['roomForm'].resetFields();">取 消</el-button>
    <el-button size="small" type="primary" @click="submitRoom('roomForm')">确 定</el-button>
    </div>
</el-dialog>

点击事件js代码：

modifyRoom(flag, data) {
let self = this;
self.dialogFormVisible = true; //控制dialog 显示
...
// self.$refs[formName].resetFields(); //就是这句代码，可以重置表单（让表单内容回到初始化状态，并清除验证信息）
}

 

就是我的页面会有新建和修改两个内容，是用同一个dialog实现的，如果点击了修改，就会把已有的数据填入表单内，如果点击新建，就需要重置表单，将表单回复初始状态，但是第一次点击新建的时候，他无法找到表单元素，就无法实现resetFields事件。只要打开一次dialog，第二次就不会报错了。
但是如果我把重置表单那句代码放到ajax请求的success回调函数里，第一次也不会出错。

 

接下来是解决办法

 

setTimeout(() => {

self.$refs[formName].resetFields()
}, 0)

vue setTimeout--延迟操作

有时候我们在查询后要做某些事情，例如我查询的时候要根据某个值再去查询某些东西并和这些值一起显示的时候，我们可以对渲染数据的操作进行延迟，因为代码执行的速度是很快的而访问数据的操作相对于渲染的速度慢得多，所以往往数据还没查询到而数据就渲染完成了

 

setTimeout(() =>{

    要延迟的代码

},延迟时间);

 

完美解决！！！！！

如果我的内容对你有帮助，欢迎投食（dashang）。