el-loading加载无法使用在el-dialog上

在一个file1.vue文件中引入引入另一个file2.vue文件（通过v-if来选择是否展示这个组件），file2.vue文件中模板元素是一个el-dialog，

但是通过服务方式调用的el-loading无法加载在这个el-dialog上，而是加载到了file1.vue上。

你把v-loading写在file2.vue里的最外层div上,不要用this.$loading这种方式调用

//在main.js中将实例挂载到vue原型上
Vue.prototype.openLoading = function(target) {
  const loading = this.$loading({           // 声明一个loading对象
    lock: true,                             // 是否锁屏
    text: '正在加载...',                     // 加载动画的文字
    spinner: 'el-icon-loading',             // 引入的loading图标
    background: 'rgba(0, 0, 0, 0.3)',       // 背景颜色
    target: target,                    // 需要遮罩的区域
    body: true,                              
    customClass: 'mask'                     // 遮罩层新增类名
  })
  setTimeout(function () {                  // 设定定时器，超时5S后自动关闭遮罩层，避免请求失败时，遮罩层一直存在的问题
    loading.close();                        // 关闭遮罩层
  },5000)
  return loading;
}

//在任意组件中这样调用
const rLoading = this.openLoading(".test1");

//要将遮罩层加到的地方
    <el-dialog
      class="test"
      width="1200px"
      :title="current.title"
      :visible="current.visible"
      :close-on-click-modal="false"
      @close="onClose"
    

用settimeout可以解决，哪怕延迟0秒都行，应该是开启加载时计算异步计算层级的原因