el-table触底加载更多

 <el-table
          v-loading="loading"
            // 这个是触底事件注册
          v-load-more.expand="{func: loadmore, target: '.el-table__body-wrapper', delay: 300}"
          element-loading-text="正在加载"
          :data="tableData"
          style="width: 100%"
          height="355"
          :show-header="false"
          :cell-style="{ textAlign: 'center' }"
          :load-more-disabled="disabledLoad"
  >

<script>
const debounce = function(func, delay) {
  let timer = null
  return function() {
    if (timer) clearTimeout(timer)
    timer = null
    const self = this
    const args = arguments
    timer = setTimeout(() => {
      func.apply(self, args)
    }, delay)
  }
}
export default {
  name: 'SalesRanking',
  // 下拉触底事件
  directives: {
    'load-more': {
      bind(el, binding, vnode) {
        const { expand } = binding.modifiers
        // 使用更丰富的功能，支持父组件的指令作用在指定的子组件上
        if (expand) {
          /**
           * target 目标DOM节点的类名
           * distance 减少触发加载的距离阈值，单位为px
           * func 触发的方法
           * delay 防抖时延，单位为ms
           * load-more-disabled 是否禁用无限加载
           */
          const { target, distance = 1, func, delay = 200 } = binding.value
          if (typeof target !== 'string') return
          const targetEl = el.querySelector(target)
          if (!targetEl) {
            console.log('Container Not Found')
            return
          }
          binding.handler = debounce(function() {
            const { scrollTop, scrollHeight, clientHeight } = targetEl
            let disabled = el.getAttribute('load-more-disabled')
            disabled = vnode[disabled] || disabled

            if (scrollHeight <= scrollTop + clientHeight + distance) {
              if (disabled) return
              func && func()
            }
          }, delay)
          targetEl.addEventListener('scroll', binding.handler)
        } else {
          binding.handler = helper.debounce(function() {
            const { scrollTop, scrollHeight, clientHeight } = el
            if (scrollHeight === scrollTop + clientHeight) {
              binding.value && binding.value()
            }
          }, 200)
          el.addEventListener('scroll', binding.handler)
        }
      },
      unbind(el, binding) {
        const { arg } = binding
        // 使用更丰富的功能，支持父组件的指令作用在指定的子组件上
        if (arg === 'expand') {
          /**
           * target 目标DOM节点的类名
           * offset 触发加载的距离阈值，单位为px
           * method 触发的方法
           * delay 防抖时延，单位为ms
           */
          const { target } = binding.value
          if (typeof target !== 'string') return
          let targetEl = el.querySelector(target)
          targetEl && targetEl.removeEventListener('scroll', binding.handler)
          targetEl = null
        } else {
          el.removeEventListener('scroll', binding.handler)
          el = null
        }
      }
    }
  },
  data() {
    return {
      loading: false,
      form: {
        user: 'shanghai'
      },
      billingPageNum: 1,
      billingPageSize: 8,
      tableData: []
    }
  },
  computed: {
    disabledLoad() {
      return false
    }
  },
  watch: {
  },
  created() {
    this.loadmore()
  },
  methods: {
    loadmore() {
      console.log('触底了')
      this.loading = true
      // this.visibleCount += 10
      // if (this.visibleCount >= this.tableData.length){
      //   this.content = '暂无更多数据'
      // }
    },
}

el-table触底加载更多