antd表格如何使用懒加载

Antd表格可以使用懒加载来优化性能，减少初始化时的渲染时间，实现懒加载主要是通过分页和滚动加载两种方式。

1. 分页加载

Antd表格提供了分页组件，可以通过设置 `pagination` 属性来实现分页加载。在每次翻页的时候，表格会重新请求数据并渲染，从而实现了懒加载的效果。

2. 滚动加载

滚动加载是指在表格的滚动区域内，当滚动条滚动到底部时，自动加载下一页数据。可以通过监听表格的 `onScroll` 事件来实现滚动加载。在事件处理函数中，判断滚动条是否到达底部，如果到达底部则触发请求数据的方法，并将新数据合并到已有数据中。

示例代码：

import React, { useState, useEffect } from 'react';
import { Table } from 'antd';
import axios from 'axios';

const PAGE_SIZE = 10;

function LazyTable() {
  const [data, setData] = useState([]);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    fetchData();
  }, [page]);

  const fetchData = async () => {
    setLoading(true);
    const res = await axios.get(`/api/data?page=${page}&pageSize=${PAGE_SIZE}`);
    setData([...data, ...res.data.list]);
    setTotal(res.data.total);
    setLoading(false);
  };

  const handleScroll = (e) => {
    const tableBottom = e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight;
    if (tableBottom && data.length < total && !loading) {
      setPage(page + 1);
    }
  };

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
    },
  ];

  return (
    <Table
      dataSource={data}
      columns={columns}
      pagination={false}
      bordered
      onScroll={handleScroll}
      scroll={{ y: 400 }}
      loading={loading}
    />
  );
}

export default LazyTable;

这样就实现了一个简单的懒加载表格。需要注意的是，每次请求数据时需要将新数据合并到已有数据中，否则会丢失之前已经加载的数据。同时需要判断数据是否全部加载完毕，防止无限加载。