取消element-ui el-dialog懒渲染

843 阅读1分钟

element-ui el-dialog 懒渲染导致第一次el-dialog内部内容不渲染

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

el-dialog源码

image.png

根据源码,取消懒渲染如下:

<template>
     <div>
          <el-dialog ref="dialog"></el-dialog>
     <div>
</template>
 mounted() {
  try {
            let dialogRef = this.$refs['dialog'];
            dialogRef.rendered = true;
            dialogRef.key++;
            dialogRef = null;
        } catch (error) {
            console.error(error);
        }
 
 }