el-table 通过自定义指令下拉分页

参考网上的el-select下拉框下拉分页，使用自定义指令方式实现table的下拉分页

Vue.directive('loadMoreTable', {
  inserted(el, binding) {
    // 获取element-ui定义好的scroll盒子

    const SELECTWRAP_DOM = el.querySelectorAll('.el-table__body-wrapper')[0]

    SELECTWRAP_DOM.addEventListener('scroll', debounce(function() {
 
      const CONDITION = parseInt(this.scrollHeight - this.scrollTop) <= this.clientHeight
      if (CONDITION) {
        binding.value()
      }
    }, 100))
  }
})

debounce.js

export function debounce(func, delay) {
  let timer = null;
  return function (...args) {
    if (timer) { clearTimeout(timer) }
    timer = setTimeout(() => {
      func.apply(this, args)
    }, delay)
  }
};

引用

<el-table :data="tableData" border  highlight-current-row height="360" style="width: 100%"  v-loadMoreTable="loadMore">
   <el-table-column type="index" label="行号" width="180">
   </el-table-column>
   <el-table-column prop="code" label="编码" width="180">
   </el-table-column>
   <el-table-column prop="name" label="名称">
   </el-table-column>
 </el-table>

loadMore方法

loadMore(){
   if (this.pageNo < this.totalPage) {
     this.pageNo++;
     this.getDiseasesChina();
   }
 }