el-table中的数据滚动加载实现

第一步：

获取到当前滚动加载的el-table表格节点

注意的是 如果存在多个表格，用ref获取dom节点，需要指定为第一个，

并且是当前dom节点下的bodyWrapper元素，

然后给这个元素添加滚动事件

this.$nextTick(function(){

var dom =this.$refs[`personTable_${that.scrollTableId}`];

    var tableBodyEle = dom[0].bodyWrapper;

    tableBodyEle.addEventListener('scroll', that.onPersonScroll);

})

滚动加载的判断条件：

let inner = that.$refs['personTable_'+that.scrollTableId][0].bodyWrapper;

let scrollTop = inner.scrollTop，//当前元素区域的滚动条高度

// 变量windowHeight是可视区的高度

let windowHeight = inner.clientHeight || inner.clientHeight

// 变量scrollHeight是滚动条的总高度

let scrollHeight = inner.scrollHeight || inner.scrollHeight

if (scrollTop + windowHeight === scrollHeight) {//滚动条滚出的高度加上可视区高度 等于滚动条的总高度，则需要加载

    if (that.scrollPersonFlag) {

        //设置一个滚动加载的开关，默认为true

        //滚动一次变为false

        //滚动一次如果当前数据数量小于总数，要置为true；

        that.scrollPersonFlag =false

        var signatoryNo = that.scrollTableId;

        var pageSize =40;

        that.startPersonRow +=40;

        that.loading =true;

        _getPersonSignatory({signatureId:this.signatureId,startRow:that.startPersonRow,pageSize,signatoryNo}).then(res=>{//请求数据的接口

        that.loading  =false;

        if(res.data.success){

                that.ruleFormSigner.personSignerList.frontendData.forEach(item=>{

                    if(item.signatoryId == that.scrollTableId){

                        if(item.memberList.length < res.data.result.total){//如果当前滚动加载的盒子中的成员变量小于总数，则开关还是打开状态  否则是关闭状态

                            that.scrollPersonFlag =true;

                           }

                        }

                    })

            }

        })

        }

}