<div
? ? style="width: 100%; overflow: hidden; position: relative"
? ? id="container"
? ? ref="container"
? ? @mousewheel="handleScroll"
? ? :style="{ height: pageHeight + 'px' }">
? <!-- ? ?表格-->
? <div class="loading-bottom" v-show="visibleLoading">
? ? ? <a-spin :spinning="visibleLoading" style="margin-right: 10px"></a-spin>正在加載數(shù)據(jù)
? ? </div>
</div>

data() {
? return {
? ? visibleLoading: false,
? }
},
mounted() {
? //ref指向?qū)?yīng)div，不建議對(duì)window全局監(jiān)聽，會(huì)影響子div的滾動(dòng)
? this.$refs.container.addEventListener('scroll', this.handleScroll);
},
beforeUnmount() {
? this.$refs.container.removeEventListener('scroll', this.handleScroll);
},
methods:{
? //滾輪監(jiān)聽
? handleScroll() {
? ? let listAllHeight =
? ? ? document.documentElement.scrollTop ||
? ? ? document.body.scrollTop + document.documentElement.scrollHeight ||
? ? ? document.body.scrollHeight;
? ? let containerHeight = document.querySelector('#container').scrollHeight;
? ? //46 + 62 + 75是表格距離頁面頂部的剩余距離，跟個(gè)人布局有關(guān)
? ? let fieldHeight = document.querySelector('#left-field').scrollHeight + 46 + 62 + 75;
? ? if (
? ? ? (fieldHeight >= containerHeight && this.pageHeight !== fieldHeight) ||
? ? ? (containerHeight > fieldHeight && this.pageHeight !== containerHeight)
? ? ) {
? ? ? this.visibleLoading = true;
? ? }

? ? setTimeout(() => {
? ? ? if (listAllHeight === this.pageHeight && this.pageHeight < containerHeight) {
? ? ? ? this.pageHeight = this.pageHeight + 750;
? ? ? }
? ? ? if (this.pageHeight > containerHeight && containerHeight > fieldHeight) {
? ? ? ? this.pageHeight = containerHeight;
? ? ? }
? ? ? if (this.pageHeight > fieldHeight && fieldHeight >= containerHeight) {
? ? ? ? this.pageHeight = fieldHeight;
? ? ? }
? ? ? this.visibleLoading = false;
? ? }, 500);
? },
}

.loading-bottom {
? position: absolute;
? left: 255px;
? bottom: 0;
? height: 30px;
? padding: 5px 0;
? background-color: #d3dae6;
? width: calc(100% - 270px);
? text-align: center;
? font-size: 14px;
? font-weight: 500;
? border-radius: 2px;
}