el-table滚动加载更多

main.js里注册指令

Vue.directive('loadmore', {
      bind(el, binding) {
        const selectWrap = el.querySelector('.el-table__body-wrapper')
        selectWrap.addEventListener('scroll', function() {
          let sign = 0
          const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
          if (scrollDistance <= sign) {
            binding.value()
          }
        })
      }
    })

scrollHeight：指元素的总高度，包含滚动条中的内容。只读属性。不带px单位。就是下图中，54条数据的高度，但是因为有滚动条，所以屏幕看不到这么高
scrollTop：当元素出现滚动条时，向下拖动滚动条，内容向上滚动的距离。可读可写属性。不带px单位。如果该元素没有滚动条，则scrollTop的值为0，该值只能是正值。就是下图中红色框的高度
clientHeight：元素客户区的大小，指的是元素内容及其边框所占据的空间大小，实际上就是可视区域的大小。就是下图红色箭头的高度
scrollHeight-scrollTop-clientHeight=0，这个时候可以就是滚动条滚到底部的时候了。（如果表格有padding,margin值，需要减去）

使用自定义的事件

<el-table
    :data="build"
    :height="tableheight"
    style="width: 100%"
    v-loadmore="loadMore"
  >
</el-table>

在methods中调用loadMore

//表格滚动加载
tableloadMore () {
  if (this.currentPage < this.totalPage) {
    //当前页数小于总页数就请求 
    //当前页数自增
    this.currentPage++；
    this.$axios({
            method:'get',
            url:this.api+'admin/StockLevel',
            params:{
                enabled:this.value1,
                page:this.page,
                    limit:this.limit
            }
        }).then(res=>{
            this.build = res.data.data.arr
        })
  }else{
      console.log('到底了', this.page)
  }
}