From 5570dcf734574be2c0d9a85cead65f20131a420c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=95=E7=BB=A7=E9=BE=99?= <1006325823@qq.com>
Date: Wed, 9 Apr 2025 17:52:32 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=BA=E8=A1=A8=E6=A0=BC=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E6=87=92=E5=8A=A0=E8=BD=BD=E5=8A=9F=E8=83=BD=EF=BC=8C=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E8=A1=A8=E6=A0=BC=E5=8F=8A=E8=AF=A6=E6=83=85=E6=9F=A5?=
 =?UTF-8?q?=E7=9C=8B=E9=80=9F=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DataView.js | 80 ++++++++++++++++++++++++++++----------
 1 file changed, 60 insertions(+), 20 deletions(-)

diff --git a/src/components/DataView.js b/src/components/DataView.js
index bcb9fc9..85a0c7a 100644
--- a/src/components/DataView.js
+++ b/src/components/DataView.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { Table, Input, Spin } from 'antd';
 import { SearchOutlined } from '@ant-design/icons';
 
@@ -11,6 +11,44 @@ const DataView = ({
   searchText, 
   loading
 }) => {
+  // 用于跟踪当前显示的数据条数
+  const [displayCount, setDisplayCount] = useState(50);
+  // 用于存储表格容器的引用
+  const tableContainerRef = useRef(null);
+  // 当前显示的数据
+  const displayedData = projects.slice(0, displayCount);
+  
+  // 监听滚动事件
+  useEffect(() => {
+    const handleScroll = (e) => {
+      if (!tableContainerRef.current) return;
+      
+      const { scrollTop, scrollHeight, clientHeight } = e.target;
+      // 当滚动到距离底部20px以内时，加载更多数据
+      if (scrollHeight - scrollTop - clientHeight < 20) {
+        // 如果当前显示的数据少于总数据，则加载更多
+        if (displayCount < projects.length) {
+          setDisplayCount(prevCount => Math.min(prevCount + 50, projects.length));
+        }
+      }
+    };
+    
+    const tableContainer = tableContainerRef.current;
+    if (tableContainer) {
+      // 找到表格的滚动容器
+      const scrollContainer = tableContainer.querySelector('.ant-table-body');
+      if (scrollContainer) {
+        scrollContainer.addEventListener('scroll', handleScroll);
+        return () => scrollContainer.removeEventListener('scroll', handleScroll);
+      }
+    }
+  }, [displayCount, projects.length]);
+  
+  // 当projects改变时，重置显示数量
+  useEffect(() => {
+    setDisplayCount(50);
+  }, [projects]);
+  
   // 表格列定义
   const columns = [
     {
@@ -113,25 +151,27 @@ const DataView = ({
           <Spin />
         </div>
       ) : (
-        <Table
-          columns={columns}
-          dataSource={projects}
-          rowKey="id"
-          rowSelection={{
-            type: 'checkbox',
-            selectedRowKeys: selectedProjects,
-            onChange: onSelect,
-          }}
-          pagination={false}
-          scroll={{ y: 'calc(100vh - 150px)', x: 'max-content' }}
-          size="small"
-          bordered
-          onRow={(record) => ({
-            onClick: () => onClick(record), // 点击行时调用传入的onClick函数
-            style: { cursor: 'pointer' } // 鼠标悬停时显示指针样式
-          })}
-          style={{ margin: '10px' }}
-        />
+        <div ref={tableContainerRef}>
+          <Table
+            columns={columns}
+            dataSource={displayedData}
+            rowKey="id"
+            rowSelection={{
+              type: 'checkbox',
+              selectedRowKeys: selectedProjects,
+              onChange: onSelect,
+            }}
+            pagination={false}
+            scroll={{ y: 'calc(100vh - 150px)', x: 'max-content' }}
+            size="small"
+            bordered
+            onRow={(record) => ({
+              onClick: () => onClick(record), // 点击行时调用传入的onClick函数
+              style: { cursor: 'pointer' } // 鼠标悬停时显示指针样式
+            })}
+            style={{ margin: '10px' }}
+          />
+        </div>
       )}
     </div>
   );