el-table表格监听滚动是否到底部

 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;
    })
       
        

}

你可能感兴趣的:(vue.js,javascript,前端,elementui)