element的Loading 加载设置“加载“的位置始终居中

问题描述：给页面设置加载中的样式，但是由于数据量很大，数据在逐步渲染的同时，页面高度也随之变化，出现竖向滚动条，这时候的加载中的那个“圈圈”也跟着页面滚走了，显示如下

解决办法：我是投机取巧的方法，如果有更好的方法，欢迎留言告诉我~

首先，我设置一个没什么用的div，接着让它的高度和宽度正好盖住页面；

最后，将v-loading的事件放在这个div上，将div的设为position: absolute，这样不占用空间，不影响页面其他布局，设置绝对布局又会影响到自身高度，所以我又多加个了v-show,当加载好后直接隐藏这个无用的div,避免它把我的操作按钮给挡住点击不了，你们也可试试设置z-index能不能解决。

<template>
  <div class="add-base">
    <div 
       v-show="loading"
       class="loading-div" 
       v-loading="loading" 
       :style="{height:windowHeight + 'px'}>        
    </div>
    <div>我才是页面显示的内容</div>
  </div>
</template>

export default {
  data () {
    return {
        windowHeight: document.documentElement.clientHeight, // 实时屏幕高度
    }
  }
}


.loading-div {
  width: 100%;
  position: absolute;
}