iView监听table的滚动条

前言

最近有个需求，客户要求iView table不能使用分页，而是直接展示全部数据。这样诚然可以，但是数据量一大，会造成table组件渲染缓慢甚至卡死的情况，因此最好将table中的数据按需加载。可以为table设置一个高度，数据太多时监听table的滚动条，当下拉至底部时加载数据。

iView目前版本（4.0）并未提供table下拉加载数据的相关接口，iView自带的无限滚动组件也并不能很好的满足需求，因此我决定自己写一个监听，步骤如下：

步骤

1. 在控制台中挖出table内容所在的div：

   
   
   
   

   由图可见，ivu-table-body便是table内容外层包裹的div。

2. 为table内容所在的div绑定滚动条监听，这里是通过class进行的绑定：

document.getElementsByClassName('ivu-table-body')[0].addEventListener('scroll', this.myScroll);

3. 实现监听函数

myScroll() {
    let scrollTop = document.getElementsByClassName('ivu-table-body')[0].scrollTop;
    let clientHeight = document.getElementsByClassName('ivu-table-body')[0].clientHeight;
    let scrollHeight = document.getElementsByClassName('ivu-table-body')[0].scrollHeight;
    if (scrollTop + clientHeight === scrollHeight) {//判断滚动条是否滚动到底部
     //要实现的内容
    }
},

关于代码中的scrollTop、clientHeight、scrollHeight详解可见这篇文章搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop