虚拟列表ant

import { Space, Table, Tag } from 'antd';
import React, { useEffect,useState } from 'react';
import './index.css';
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    render: (text) => <a>{text}</a>,
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
//   {
//     title: 'Tags',
//     key: 'tags',
//     dataIndex: 'tags',
//     render: (_, { tags }) => (
//       <>
//         {tags.map((tag) => {
//           let color = tag.length > 5 ? 'geekblue' : 'green';
//           if (tag === 'loser') {
//             color = 'volcano';
//           }
//           return (
//             <Tag color={color} key={tag}>
//               {tag.toUpperCase()}
//             </Tag>
//           );
//         })}
//       </>
//     ),
//   },
//   {
//     title: 'Action',
//     key: 'action',
//     render: (_, record) => (
//       <Space size="middle">
//         <a>Invite {record.name}</a>
//         <a>Delete</a>
//       </Space>
//     ),
//   },
];
let datas = []
    for(let i=0;i<10000;i++){
            datas.push({
                key:'' + i,
                name: '' + i
            })
}
// const data = [
//   {
//     key: '1',
//     name: 'John Brown',
//     age: 32,
//     address: 'New York No. 1 Lake Park',
//     tags: ['nice', 'developer'],
//   },
//   {
//     key: '2',
//     name: 'Jim Green',
//     age: 42,
//     address: 'London No. 1 Lake Park',
//     tags: ['loser'],
//   },
//   {
//     key: '3',
//     name: 'Joe Black',
//     age: 32,
//     address: 'Sidney No. 1 Lake Park',
//     tags: ['cool', 'teacher'],
//   },
// ];

const Home = () => {
    let allHeight = 500
    let lineHeight = 55
    let pageCount = Math.round(allHeight / lineHeight)
    const [tableData, setTableData] = useState(datas.slice(0, pageCount))
    // setTableData(datas.slice(0, pageCount))
    const handleTableScroll = () => {
        let dom = document.querySelector('.ant-table-body')
        var div = document.createElement("div");  //创建段落元素
        div.style.height= 10000*lineHeight + 'px'
        div.style.position = 'absolute'
        div.style.width = '1px'
        div.className = 'myDiv'
        dom.insertBefore(div,dom.children[0]);
        dom.addEventListener('scroll', () => {
            // // 滚动距离
            let scrollTop = dom.scrollTop
            let startIndex = Math.floor(scrollTop / lineHeight);
            let endIndex = Math.ceil((scrollTop + allHeight) / lineHeight);
            setTableData(datas.slice(startIndex, endIndex))
            // 列表移动距离
            let startOffset = scrollTop - (scrollTop % lineHeight);
            let tableBody = document.querySelector('tbody') 
            tableBody.style.transform =  `translate3d(0,${startOffset}px,0)`
        })
    }
    useEffect(() => {
       handleTableScroll()
    },[])
    return (
        <Table
            columns={columns}
            dataSource={tableData}
            scroll={{ y: 500 }}
           pagination={false}/>
    )
};

export default Home

.ant-table-wrapper{
    overflow: hidden;
}
.ant-table-body{
    position: relative;
}