el-table的自定义滚动加载指令以及踩到的坑

创建自定义指令，命名为loadmore

directives: {

    loadmore: {

        bind(el, binding) {

            const selectWrap = el.querySelector('.el-table__body-wrapper')

            selectWrap.addEventListener('scroll', function() {

                let sign = 200;

                const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight

                if( this.scrollHeight == this.clientHeight ) return //没有滚动条

                 if ( scrollDistance <= sign) {

                      binding.value()

                 }

            })

        }

    }

},

在要滚动的区域绑定指令

声明一个布尔值，默认为true，即表示可以滚动加载，滚动加载暂时关闭防止多次滚动一起请求数据，如果当前页加1后大于总页数或者当前数据只有一页，提示已经加载完毕并返回，否则的话，设置一个定时器，调用list，并再次允许滚动

loadMore() {

    if (this.busy) {

        this.busy = false;

        this.currentPage++;

        if(this.currentPage > this.totalPage || this.totalPage == 0){

            this.$message.warning('已经到底了~')

            return

        }

        setTimeout(() => {

            this.getList()

            this.busy = true

        }, 100)

    }

}

调用list的时候，由于一次性只请求固定条数的数据，相当于是分页模式但是把最新请求的数据追加到表格中，所以要给table绑定的data重新赋值，然后渲染showList就可以了

this.showList = this.showList.concat(res.varList)