el-table滚动加载更多

el-table滚动加载更多 — vue技术交流群（864583465)

废话不多说直接上代码！

<template>
  <div class="infiniteScrollTable">
    <el-table
      :data="tableData.slice(0, rangeNumber)"
      :height="300"
      v-load-more.expand="{func: loadMore, target: '.el-table__body-wrapper', distance: 20, delay: 50}"
      style="width: 100%;">
      <el-table-column
        prop="date"
        label="日期"
        min-width="180"/>
      <el-table-column
        prop="name"
        label="姓名"
        min-width="180"/>
      <el-table-column
        prop="address"
        label="地址"
        min-width="180"
      />
    </el-table>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'

const debounce = function (func, delay) {
  let timer = null
  return function () {
    if (timer) clearTimeout(timer)
    timer = null
    let self = this
    let args = arguments
    timer = setTimeout(() => {
      func.apply(self, args)
    }, delay)
  }
}
@Component({
  directives: {
    'load-more': {
      bind(el, binding, vnode) {
        console.log(binding)
        /**
           * target 目标DOM节点的类名
           * distance 减少触发加载的距离阈值，单位为px
           * func 触发的方法
           * delay 防抖时延，单位为ms
           *
           */
        let { target, distance, func, delay = 50 } = binding.value
        if (typeof target !== 'string') return
        let targetEl = el.querySelector(target)
        if (!targetEl) {
          console.log('找不到容器')
          return
        }
        binding.handler = debounce(function () {
          const { scrollTop, scrollHeight, clientHeight } = targetEl
          if (scrollHeight <= scrollTop + clientHeight + distance) {
            func && func()
          }
        }, delay)
        targetEl.addEventListener('scroll', binding.handler)

      }
    }
  }
})
export default class extends Vue {
  private num: number = 123
  private tableData = []
  private rangeNumber = 10


  created(){
    this.getList()
  }

  loadMore() {
    console.log('滚动到底部了');
    if(this.rangeNumber <= this.tableData.length) {
      this.rangeNumber += 10;
    }
    console.log(this.rangeNumber)
  }

  getList(){
    for (let i =0;i<100;i++) {
      this.tableData.push({
        date: '2016-05-03 ' + i,
        name: '王小虎' + i,
        address: '上海市普陀区金沙江路 1516 弄'
      })
    }
  }

}
</script>

<style lang="scss">
.infiniteScrollTable {

}
</style>