1.首先监听表格的滚动对象
document.querySelector('.el-table .el-table__body-wrapper').addEventListener('scroll', this.bodyEvent)
2.监听到滚动事件后触发函数bodyEvent
- bodyEvent(e) {
- const { target } = e
- const { scrollHeight, scrollTop, scrollLeft, clientHeight } = target
- const tobody = document.querySelector('.el-table .el-table__body-wrapper .el-table__body')
- // console.log('监听', e, e.target.scrollTop, tobody.clientHeight)
- if (scrollTop > 0 && scrollTop + clientHeight + 1 >= tobody.clientHeight) {
- console.log('滚动到底部了', this.loading, this.isEnd);
- if (!this.loading && !this.isEnd) {
- this.currentPage += 1;
- this.getTableData();
- }
- }
- },
主要在于这个判断:scrollTop > 0 && scrollTop + clientHeight + 1 >= tobody.clientHeight
判断滚动距离+滚动对象高度>=所有行高,+1给一个差不多的像素好触发
- getTableData(){
- this.loading=true;
- axios.get(url).then(res=>{
- if(res.data){
- //pageSize为页码,isEnd 判断是否请求完所有数据了
- if(res.data.length==this.pageSize){
- this.isEnd = false;
- }else{
- this.isEnd = true;
- }
- }
-
-
- }).finally(()=>{
- this.loading=false;
- })
-
-
-
- }