antd组件Table表格实现懒加载

目录

前言：

效果：

代码实现：

完整代码：

前言：

对Table表格实现懒加载，懒加载也称按需加载，初次渲染时只渲染部分数据，用户下滑到一定区域的时候再在请求下一页的数据

效果：

antd组件Table表格实现懒加载

代码实现：

使用Table的表头固定样式，并将pagination属性设置成false。

import { Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import React, { useRef, useState } from 'react';

interface DataType {
    key: React.Key;
    name: string;
    age: number;
    address: string;
}

const columns: ColumnsType<DataType> = [
    {
        title: 'Name',
        dataIndex: 'name',
        width: 150,
        className: 'tableItem'
    },
    {
        title: 'Age',
        dataIndex: 'age',
        width: 150,
    },
    {
        title: 'Address',
        dataIndex: 'address',
    },
];

const App: React.FC = () => {
    // 数据构造
    const [data, setData] = useState<any>(new Array(20).fill(0).map((_, index) => (
        {
            key: index,
            name: `Edward King ${index}`,
            age: 32,
            address: `London, Park Lane no. ${index}`,
        }
    )))


    return (
            <Table
                columns={columns}