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

                           }

                        }

                    })

            }

        })

        }

}

1、首先打开myeclipse获取idea这样的编辑器，在编辑器中写一个table标签，这里给出table的值。

2、然后可以在页面中看到此时展示的是没有样式的table样板，此时所有的数据没有经过渲染，比较紧凑，也不是一个页面展示。

3、可以在table中引入样式标签style来设计table的样式。

4、还可以使用内部元素，使用jquery ,在jquery中首先给table一个class属性，在JavaScript中通过.class属性获取这个table，给出样式设计。

5、根据上面的设计再经过背景、宽度、高度的设计，可以设计出一个比较好看的table。

---