antd Table 上拉加载更多数据

背景

table不分页 然而数据又很多，所以数据需要做分页加载

查找antd 没找到上下拉加载对应的API

故自己实现

原来的实现方式：
在table外加一层div 监听table与div的位置变化来控制数据加载
但这样实现会在table滑动的时候 表头页滑上去了

下面为优化后的实现：

代码

import React, { Component } from "react";
import { Table } from "antd";

let lastScrollTop = 0;
class KKTable extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    const count = document.getElementsByClassName('ant-table-body').length
    for (let index = 0; index < count; index++) {
      // 给当前页面内的每个table添加滑动监听事件
      document.getElementsByClassName('ant-table-body')[index].addEventListener('scroll', this.onScrollEvent);
    }
  }

  componentWillUnmount() { }

  onScrollEvent = e => {
    // console.log(e.path[6].className); //通过这个获取对应的table
    const loadHeight = 150;
    if (e.target.scrollTop + e.target.clientHeight > e.target.scrollHeight - loadHeight) {
      // 这里去做你的异步数据加载
      const pullDown = e.target.scrollTop - lastScrollTop > 0
      const { loadMore } = this.props;
      if (loadMore && pullDown) {
        loadMore(e.target.scrollTop, e.target.clientHeight, e.target.scrollHeight);
      }
    }
    lastScrollTop = e.target.scrollTop
  }

  render() {
    const { loadMore, ...config } = this.props;

    return (
      <div>
        <Table {...config} />
      </div>
    );
  }
}

export default KKTable;

调用

 <KKTable loadMore={this.loadMore} className={key} rowKey={record => record[rowKey]} id={key} dataSource={dataSource} columns={columns} pagination={pagination} scroll={{ y: scroll_y, x: info.scroll_x }} loading={loading} bordered small />

  loadMore = () => {
    console.log('上拉加载更多');
    const { childKey } = this.state;
    this.fetchData(childKey);
  }

支持同一页面内多个表格

以上为本人的开发笔记，如有问题或其他实现方式请留言交流。
谢谢！