antd表格如何使用懒加载

Antd表格支持懒加载，可以通过设置`pagination`的`onChange`属性来实现。具体步骤如下：

1. 安装`react-lazyload`库，用于实现懒加载。

npm install react-lazyload --save

2. 在组件中引入`react-lazyload`和`antd`库。

import React, { useState } from "react";
import { Table } from "antd";
import LazyLoad from "react-lazyload";

3. 在`columns`中添加需要懒加载的列，并将其包裹在`LazyLoad`组件中。

const columns = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name",
    render: (text, record) => {
      return (
        <LazyLoad height={50}>
          <div>{text}</div>
        </LazyLoad>
      );
    }
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age"
  },
  {
    title: "Address",
    dataIndex: "address",
    key: "address"
  }
];

4. 在`Table`组件中设置`pagination`的`onChange`属性，并在`onChange`回调函数中更新表格数据。

const [data, setData] = useState([]);

const handleTableChange = (pagination, filters, sorter) => {
  // 获取新的表格数据，这里使用了异步请求模拟获取数据
  fetchData({
    results: pagination.pageSize,
    page: pagination.current
  }).then(res => {
    setData(res.data);
  });
};

return (
  <Table
    columns={columns}
    dataSource={data}
    pagination={{ pageSize: 10, onChange: handleTableChange }}
  />
);

这样就实现了`antd`表格的懒加载。