用的是 vue-infinite-loading 组件
<el-table
:height="380"
v-loading="listLoading"
:key="key"
:data="list"
:empty-text="actionLogPage.isFirstLoad ? '请根据筛选条件搜索筛选!' : '暂无数据'"
element-loading-text="拼命加载中"
stripe fit highlight-current-row>
<el-table-column
type="index">
</el-table-column>
<template slot="append">
<infinite-loading ref="infinite" @infinite="getDataList" :distance="20" forceUseInfiniteWrapper=".el-table__body-wrapper">
<loading></loading>
<span slot="no-more">
—————— 加载完成 ———————
</span>
<span slot="no-results">暂无数据</span>
</infinite-loading>
</template>
</el-table>
上面elmentui的table定义 但是大家注意 <template slot="append"> 是在一层div里面的
下面是生成的html
<div class="el-table__body-wrapper is-scrolling-left" style="height: 336px;">
<table cellspacing="0" cellpadding="0" border="0" class="el-table__body" style="width: 2131px;">
</table><!---->
<div class="el-table__append-wrapper"><!-- 默认找的是这层 -->
<div data-v-3aed59f8="" data-v-3c57fe79="" class="infinite-loading-container">
</div>
</div>
</div>
而 infinite-loading默认是找它的父容器作为滚动窗口
所以用到了 forceUseInfiniteWrapper=".el-table__body-wrapper" 这里是指定了 infinite-loading的滚动窗口
getScrollParent(elm = this.$el) {
let result;
if (typeof this.forceUseInfiniteWrapper === 'string') {
result = elm.querySelector(this.forceUseInfiniteWrapper); // 就是这里 用的是原生的 query
}
if (!result) {
if (elm.tagName === 'BODY') {
result = window;
} else if (!this.forceUseInfiniteWrapper && ['scroll', 'auto'].indexOf(getComputedStyle(elm).overflowY) > -1) {
result = elm;
} else if (elm.hasAttribute('infinite-wrapper') || elm.hasAttribute('data-infinite-wrapper')) {
result = elm;
}
}
return result || this.getScrollParent(elm.parentNode);
},
在 2.3.5版本的官方文档上并没有列出这个属性 看源码找到了, 弄了好几个小时 诶~~~~
网友评论