elementUI 表格滚动分页加载请求数据

需求：elementui Table表格滚动分页（不使用分页组件），请求数据。

1、自定义加载更多数据的指令，在utils文件夹中创建 loadMore.js

/**
 * 加载更多数据的指令
 */
export default {
  install(Vue) {
    Vue.mixin({
      directives: {
        loadmore: {
          bind(el, binding) {
            let bindTime = null
            clearTimeout(bindTime)
            // eslint-disable-next-line space-before-function-paren
            bindTime = window.setTimeout(function () {
              var selectWrap = el.querySelector('.el-table__body-wrapper')
              selectWrap.addEventListener(
                'scroll',
                // eslint-disable-next-line space-before-function-paren
                function () {
                  if (this.scrollTop == 0) {
                    binding.value('up', this)
                    return false
                  }
                  if (this.clientHeight + this.scrollTop + 1 >= this.scrollHeight) {
                    binding.value('down', this)
                  }
                },
                false
              )
            }, 200)
          }
        }
      }
    })
  }
}

2、在main.js中添加以下代码

import loadMore from './utils/loadMore';
Vue.use(loadMore);

3、组件中使用

// 该处涉及项目，其他属性参考elementui文档 v-loadMore即自定义指令
<template>
	<el-table :loading="isLoading" v-loadmore="getData"></el-table>
</template>

data() {
	return {
		isLoading:false,
		pageSize: 30,
      	pageNum: 1,
      	total: 0,
      	tableData: []
	}
}

methods: {
    // 请求数据
    async getData(a) {
      this.pageNum += 1
      if (a === 'down') {
        this.isLoading = true
        var params = {
          page: this.pageNum,
          pageSize: this.pageSize,
          // 其他参数
          ...
        }
        var res = await getDataApi(params)
        this.isLoading = false

        if (res) {
          this.total = res.panelData.total
          if (this.total >= this.tableData.length) {
            this.tableData = this.tableData.concat(res.panelData.records)
          }
        }
      }
    }
  }