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

本文介绍: 问题描述，给页面设置加载中的样式，但是由于数据量很大，数据在逐步渲染的同时，页面高度也随之变高，出现竖向滚动条，这时候的加载中的那个“圈圈”也跟着页面滚走了，显示如下解决办法：我是投机取巧的方法，如果有更好的方法，欢迎留言告诉我~首先，我设置一个没什么用的div，然后让它的高度和宽度正好盖住页面；然后，将v–loading的事件放在这个 div上，将d iv的设为position: a bs olut e，这样不占用空间，不影响页面其他布局注意，高度要动态获取，不然换一个显示器，就不能刚好完.

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

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

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

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

&lt;template&gt;
  <div class="add-base"&gt;
    <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;
}