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

Posted 2023-03-15

参考技术A 获取到当前滚动加载的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;

                           

                        

                    )

            

        )