antd Table下拉加载组件： 1、普通下拉加载， 2、 结合virtuallist-antd实现虚拟列表下拉加载

普通下拉加载

调用方式 跟Table 一样

import { Table } from 'antd';
import { useCallback } from 'react';

const ScrollTable = (props) => {
    const { loading, onLoad } = props;
    const handleScroll = useCallback(
        (e) => {
            const target = e.target as HTMLDivElement;
            if (!loading && target.scrollTop + target.clientHeight >= target.scrollHeight) {
                onLoad && onLoad();
            }
        },
        [loading, onLoad],
    );

    return (
        <div style={{ width: '100%' }} onScrollCapture={handleScroll}>
            <Table {...props} rowKey="key" loading={loading} />
        </div>
    );
};

export default ScrollTable;

// 跟table 一样正常调用

结合virtuallist-antd实现虚拟列表下拉加载

import React, { useState, useMemo, useCallback } from "react";
import { render } from "react-dom";
import { Table } from "antd";
import { VList } from "virtuallist-antd";

import "./styles.css";

const columns: any = [
  {
    title: "序号",
    key: "id",
    fixed: "left",
    render(text, record, index) {
      return index + 1;
    },
    width: 100
  }
];

for (let i = 0; i < 40; i += 1) {
  columns.push({
    title: `公司${i + 1}`,
    dataIndex: `company_name${i + 1}`,
    width: 200
    // render: () => {
    //   return `I am doing test.${i + 1}`
    // }
  });
}

const generateData = () => {
  let tempDataSource = [];
  for (let i = 0; i < 50; i++) {
    let obj: any = {
      company_name: `company_name${i}`
    };
    columns.forEach((c, index) => {
      obj[c.dataIndex] = `${index}-${i} 我唱的不够动人 你别皱眉`;
    });

    tempDataSource.push(obj);
  }

  return tempDataSource;
};

function App() {
  const [dataSource, setDataSource] = useState(generateData());

  const [loading, setLoading] = useState(false);

  const handleReachEnd = useCallback(() => {
    setLoading(true);
    console.log("执行了");
    setDataSource((pre) => {
      const temp = generateData();
      return [...pre, ...temp];
    });
    setTimeout(() => {
      setLoading(false);
    }, 1000);
  }, []);

  const vc = useMemo(() => {
    return VList({
      height: 500,
      onReachEnd: handleReachEnd
    });
  }, [handleReachEnd]);

  return (
    <>
      <Table
        columns={columns}
        dataSource={dataSource}
        pagination={false}
        loading={loading}
        scroll={{ y: 500 }}
        rowKey={"company_name"}
        components={vc}
        rowSelection
      />
    </>
  );
}

const rootElement = document.getElementById("root");
render(<App />, rootElement);