vue+element-ui table实现滚动加载（自定义指令实现）

vue+element-ui 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值，需要减去）

第二步：在组件中，使用自定义的事件：

v-loadmore=“loadMore”

<el-table
              :data="build"
              :height="tableheight"
              style="width: 100%"
              :header-cell-style="rowclass"
              :row-class-name="tableRowClassName"
              :cell-style="{'text-align':'center'}"
              border
              fit
              v-if="tabindex == 0 && isPower == '煤电'"
              ref="tableright1"
              v-loadmore="loadMore"
              tooltip-effect="dark"
            >
</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)
      }
    }