虚拟滚动

src/view/Manage/Model/Component/ModelTable.jsx

@@ -507,7 +507,7 @@ const ModelTable = (props) => {
         checkable
         columns={columns}
         // rows={Array.from({ length: 10000 }).map((_, i) => ({
-        //   name: 'test',
+        //   name: `test${i}`,
         // }))}
         rows={data||[]}
         rowHeight={51}

src/view/Manage/VirtualTable/index.tsx

-import React, { useCallback, useEffect, useMemo, useState, forwardRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useState, forwardRef, useRef } from 'react';
 import DataGrid, { Column, DataGridProps, Row as GridRow, RowsChangeData, SortColumn, SortIconProps, SelectColumn } from 'react-data-grid';
 import type { DataGridHandle, CheckboxFormatterProps } from 'react-data-grid';
 import { Checkbox, Empty } from 'antd';
@@ -142,6 +142,8 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
   const [pagination, setPagination] = useState({ pageNum: 1, pageSize: defaultPageSize });
   const {pageNum, pageSize} = pagination;
 
+  const prevScrollTopRef = useRef(0)
+
   useEffect(() => {
     if (rows) {
       setPagination(prev => {
@@ -159,7 +161,7 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
   }, [scrollRowIndex])
 
   useEffect(() => {
-    const newRows = [...paginate(rows, pageNum, pageSize)];
+    let newRows = [...rows]
     if (sortColumns.length > 0) {
       newRows
         // .filter(item => item.__type__ !== RowType.Detail)
@@ -175,6 +177,7 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
         })
     }
 
+    newRows = paginate(newRows, pageNum, pageSize);
     (newRows||[]).forEach((item, index) => {
       item.index = `${(pageNum-1)*pageSize+index+1}`;
     })
@@ -216,13 +219,13 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
 
   // 处理滚动
   const handleScroll = useCallback((event: React.UIEvent<HTMLDivElement>) => {
-    if (isAtTop(event)) {
+    if (isAtTop(event) && prevScrollTopRef.current > event.currentTarget.scrollTop) {
       if (pageNum > 1) {
         setPagination(prev => {
           return {...prev, pageNum: prev.pageNum-1}
         })
       }
-    } else if (isAtBottom(event)) {
+    } else if (isAtBottom(event) && prevScrollTopRef.current < event.currentTarget.scrollTop) {
       if (rows?.length > pageNum* pageSize) {
         event.currentTarget.scrollTop = 0;
         setPagination(prev => {
@@ -231,7 +234,7 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
       }
     }
     
-    // loadMoreRows?.(rows.length)
+    prevScrollTopRef.current = event.currentTarget.scrollTop;
   }, [loadMoreRows, rows, pageNum])
 
   return (