element-ui中的el-table滚动加载事件

问题描述：当表格数据量过多，一次请求回来会很卡，同时又不想分页的情况下，我们想让鼠标滚动到表格底部时再去请求数据。

解决思路：项目用的是element-ui的框架，给el-table添加一个滚动事件，计算滚动条到顶部的距离，容器的高度，以及滚动内容的高度，当 滚动条到顶部的距离+容器的高度=滚动内容的高度时请求数据。注：如果容器有padding和margin的话需要相应增减。

我试过直接在el-table 上加@scoll事件是不生效的，在网上查阅资料后解决方案如下：

1.给table一个ref属性。

2.监听scroll事件。

this.$refs.multipleTable.bodyWrapper.addEventListener('scroll', (res) => {

    let height = res.target;

    let clientHeight = height.clientHeight;
    let scrollTop = height.scrollTop;
    let scrollHeight = height.scrollHeight;

    if(clientHeight + scrollTop + 300 > scrollHeight){
        console.log(clientHeight + scrollTop);
        console.log(scrollHeight);
    }

},true);
复制代码

因为组件中的table是由几个table组合起来的，所以取值时this.$refs.multipleTable.bodyWrapper这样写才能获取到dom节点。

这样大致就可以实现功能了。

过程中遇到个问题

this.$refs.multipleTable.bodyWrapper.addEventListener('scroll', () => {


    let clientHeight = this.clientHeight;
    let scrollTop = this.scrollTop;
    let scrollHeight = this.scrollHeight;

    if(clientHeight + scrollTop + 300 > scrollHeight){
        console.log(clientHeight + scrollTop);
        console.log(scrollHeight);
    }

},true);
复制代码

之前是这样写的，this.clientHeight，this.scrollTop，this.scrollHeight这几个值都能取到，但是赋值却赋不了，没找到是什么原因。

转载于:https://juejin.im/post/5c46e514e51d45518c680388