项目中在表格中用到了无限加载,可用的实现方法有3种,三种方法各有优缺点。
1、使用element的InfiniteScroll 无限滚动
妄想加在表格内,失败了。加在表格外层,表头会跟着移动,不是特别理想。
https://element.eleme.cn/#/zh-CN/component/infiniteScroll
<div
v-infinite-scroll="loadMore"
infinite-scroll-disabled="loading"
infinite-scroll-distance="20"
style="height:500px;overflow: auto;"
>
<el-table :data="tableData" >
<el-table-column prop="name" label="名称"></el-table-column>
</el-table>
<p v-if="tableData.length&&loading" class="list-loading">加载中...</p>
<p v-if="tableData.length&&isEnd" class="list-end">没有更多了</p>
</div>
2、监听表格滚动
在main.js中注册全局事件,监听表格滚动位置是否到底,触发绑定方法。
在需要无限加载的表格中绑定事件v-loadmore="loadMore"(表格滑动到底部触发loadMore)
https://www.jianshu.com/p/4f0142d737a0
Vue.directive('loadmore', {
bind(el, binding) {
var p = 0;
var t = 0;
var down = true;
var selectWrap = el.querySelector('.el-table__body-wrapper')
selectWrap.addEventListener('scroll', function () {
//判断是否向下滚动
p = this.scrollTop;
if (t < p) {
down = true;
} else {
down = false;
}
t = p;
//判断是否到底
const sign = 10;
const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
if (scrollDistance <= sign && down) {
binding.value()
}
})
}
})