react中使用antd Table组件滚动加载数据的实现

废话不多说，直接上代码。一目了然。

import React, { Component } from "react";
import { Table } from "antd";
import PropTypes from "prop-types";

class TableBar extends Component {
  constructor(props) {
    super(props);
    this.onScrollEvent = this.onScrollEvent.bind(this);
  }

  onScrollEvent() {
    if (this.scrollRef.scrollTop + this.scrollRef.clientHeight ===         
      this.scrollRef.scrollHeight) {
        console.info('到底了！');
        // 这里去做你的异步数据加载
    }
  }

  render() {
    const {
      dataSource,
      columns,
      loading,
      pagination,
      isBordered,
      onRowClickCb,
      scroll,
      titleCb,
      footerCb,
      rowSelection,
      rowKey
    } = this.props.config;

    return (
      <div
        onScrollCapture={() => this.onScrollEvent()}
        style={{ height: '200px', overflowY: 'scroll' }}
        ref={c => {
          this.scrollRef = c;
        }}
      >
      <Table
        dataSource={dataSource}
        columns={columns}
        rowKey={rowKey?rowKey:record => record.id}
        loading={loading}
        pagination={pagination}
        rowSelection={rowSelection}
        bordered={isBordered}
        scroll={scroll}
        onRowClick={onRowClickCb}
        title={titleCb}
        footer={ footerCb}
      />
      </div>
    );
  }
}

TableBar.propTypes = {
  config: PropTypes.shape({
    dataSource: PropTypes.array,
    columns: PropTypes.array.isRequired,
    loading: PropTypes.bool,
    isBordered: PropTypes.bool,
    scroll: PropTypes.object,
    onRowClickCb: PropTypes.func,
    titleCb: PropTypes.func,
    footerCb: PropTypes.func,
    rowSelection: PropTypes.object,
    pagination: PropTypes.oneOfType([PropTypes.object, PropTypes.bool])
  })
};

export default TableBar;
   

借鉴地址：https://segmentfault.com/q/1010000016507297/a-1020000016507798

转载于:https://www.cnblogs.com/zyl-Tara/p/9767303.html