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 = ({