vue+element-ui：vue自定义指令监听el-table的滚动事件，达到滚动条滚动到底部加载新数据。

1.首先在vue项目中的main.js文件添加一个监听el-table滚动条事件的自定义指令，以供全局使用。

// 准备一个滚动加载指令
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()
        }
      })
    }
  })

// 在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()
        }
      })
    }
  })

2.在el-table标签上加上定义在全局的滚动指令，v-loadmore=“自定义名”

// 准备一个滚动加载指令
   
          ...

//v-loadmore为自定义指令
  <!-- 图片列表 -->
         <el-table
          ref="tableData"
           v-loadmore="loadMore"
           v-loading="loading"
           :data="tableData"
           border
           stripe
         >...</el-table>

3.在使用到el-table的页面中的methods方法中使用该自定义指令对应的函数名。

// 表格滚动加载事件
    loadMore() {
         console.log('触发滚动加载事件')
    }

// 表格滚动加载事件
    loadMore() {
     console.log('触发滚动加载事件')
    }

4.坑！！！本篇在某些电脑上可能会遇到触发不了loadMore的情况，可以输出main.js自定义指令的中的scrollDistance(如下图),
观察其滚到最底部的距离是否是0，如果不是0，可以修改sign值大于滚到最底部距离的值即可。