虚拟滚动

.env

 # PUBLIC_PATH = reactOMS, 默认转发 /cityinterface
-PROXY=/PandaGIS:http://192.168.12.78:8018;/Cityinterface:http://192.168.12.78:8018;/PandaOMS:http://192.168.12.78:8018;/Publish:http://192.168.12.78:8018;/Web4:http://192.168.12.78:8018;/CityTemp:http://192.168.12.78:8018
+PROXY=/PandaGIS:http://59.63.182.50:8200;/Cityinterface:http://59.63.182.50:8200;/PandaOMS:http://59.63.182.50:8200;/Publish:http://59.63.182.50:8200;/web4:http://59.63.182.50:8200;/CityTemp:http://59.63.182.50:8200
+#PROXY=/PandaGIS:http://192.168.12.149:8300;/Cityinterface:http://192.168.12.149:8300;/PandaOMS:http://192.168.12.149:8300;/Publish:http://192.168.12.149:8300;/web4:http://192.168.12.149:8300;/CityTemp:http://192.168.12.149:8300
+#PROXY=/PandaGIS:http://192.168.12.14:8400;/Cityinterface:http://192.168.12.14:8400;/PandaOMS:http://192.168.12.14:8400;/Publish:http://192.168.12.14:8400;/web4:http://192.168.12.14:8400;/CityTemp:http://192.168.12.14:8400
+#PROXY=/PandaGIS:http://192.168.12.116:8018;/Cityinterface:http://192.168.12.116:8018;/PandaOMS:http://192.168.12.116:8018;/Publish:http://192.168.12.116:8018;/web4:http://192.168.12.116:8018;/CityTemp:http://192.168.12.116:8018
+#PROXY=/PandaGIS:http://192.168.12.178:8085;/Cityinterface:http://192.168.12.178:8085;/PandaOMS:http://192.168.12.178:8085;/Publish:http://192.168.12.178:8085;/web4:http://192.168.12.178:8085;/CityTemp:http://192.168.12.178:8085
+#PROXY=/PandaGIS:http://192.168.10.168:8098;/Cityinterface:http://192.168.10.168:8098;/PandaOMS:http://192.168.10.168:8098;/Publish:http://192.168.10.168:8098;/web4:http://192.168.10.168:8098;/CityTemp:http://192.168.10.168:8098
+#PROXY=/PandaGIS:http://192.168.19.103:8288;/Cityinterface:http://192.168.19.103:8288;/PandaOMS:http://192.168.19.103:8288;/PandaConfiguration:http://192.168.19.103:8288;/web4:http://192.168.19.103:8288;/CityTemp:http://192.168.19.103:8288
 #  PROXY=/Cityinterface:http://192.168.12.121:8082;/PandaOMS:http://192.168.12.121:8082;/Web4:http://192.168.12.121:8082;/CityTemp:http://192.168.12.121:8082
 # 可设置第二个代理，test为转发前缀，后面为代理转发的地址
 # PROXY2 = test : http://localhost:8006/
-
+REACT_APP_SERVER=http://59.63.182.50:8200
 # 本地应用启动的host域名
-HOST = 192.168.12.78
+HOST =  192.168.12.154
 
 # 本地应用启动的端口
- PORT = 3001
+
+#PORT = 3002
+PORT = 3003

package.json

@@ -144,6 +144,7 @@
         "react-redux": "7.0.2",
         "react-resizable": "^1.11.0",
         "react-router-dom": "5.1.0",
+        "react-window": "^1.8.9",
         "redux": "4.0.1",
         "redux-saga": "1.0.2",
         "reselect": "4.0.0",
@@ -152,6 +153,7 @@
         "sortablejs": "^1.13.0",
         "styled-components": "4.2.0",
         "use-merge-value": "^1.0.2",
+        "virtuallist-antd": "^0.8.0-beta.1",
         "voca": "^1.4.0"
     },
     "devDependencies": {

src/pages/userCenter/roleManage/SelectUser/NewSelectUser.jsx

-import React, { useState, useEffect, useCallback, useRef } from 'react';
+import React, { useState, useEffect, useCallback, useRef,useMemo } from 'react';
 import { Modal, Input, Button, message, Spin, Pagination, Table, Tooltip, Space } from 'antd';
 import { GetGroupUserTree } from '@/services/messagemanage/messagemanage';
 import { getStationUsers, chooseUserToStation } from '@/services/siteManage/api';
 import { DeleteOutlined } from '@ant-design/icons';
 import styles from './SelectUser.less';
 import CardCheck from './CardCheck';
-
+import { VList } from 'virtuallist-antd';
 const NewSelectUser = props => {
   const { confirmModal, onCancel, visible, itemObj } = props;
   const [allList, setAllist] = useState([]); // 用于展示得数据
@@ -32,6 +32,18 @@ const NewSelectUser = props => {
       setCheckList(newCheckList);
     }
   });
+  const TdCell = (props) => {
+    // onMouseEnter, onMouseLeave在数据量多的时候，会严重阻塞表格单元格渲染，严重影响性能
+    const { onMouseEnter, onMouseLeave, ...restProps } = props;
+    return <td key={restProps?.key} {...restProps} />;
+  };
+
+    const components = useMemo(() => {
+      // 如果你不用虚拟列表的话可以把这里删掉,直接return一个对象包含body.cell
+      const vRes = VList({ height: 600 });
+      vRes.body.cell = TdCell;
+      return vRes;
+    }, [])
 
   // 监听分页
   const paginationChange = (page, pageSizes) => {
@@ -292,6 +304,7 @@ const NewSelectUser = props => {
             columns={columns}
             dataSource={checkList}
             pagination={false}
+            components={components}
             size="small"
             scroll={{ y: 'calc(100% - 40px)' }}
           />

src/pages/userCenter/roleManage/SelectUser/Table.jsx

+/*
+ * @Author: 634665781 634665781@qq.com
+ * @Date: 2023-07-21 10:11:54
+ * @LastEditors: 634665781 634665781@qq.com
+ * @LastEditTime: 2023-07-21 10:39:32
+ * @FilePath: \maintenance\src\pages\userCenter\roleManage\SelectUser\Table.jsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import { Table } from 'antd';
+import classNames from 'classnames';
+import ResizeObserver from 'rc-resize-observer';
+import React, { useEffect, useRef, useState } from 'react';
+import { VariableSizeGrid as Grid } from 'react-window';
+const VirtualTable = (props) => {
+  const { columns, scroll } = props;
+  console.log(columns, scroll,'columns, scroll');
+  const [tableWidth, setTableWidth] = useState(0);
+ // const { token } = theme.useToken();
+  const widthColumnCount = columns.filter(({ width }) => !width).length;
+  const mergedColumns = columns.map((column) => {
+    if (column.width) {
+      return column;
+    }
+    return {
+      ...column,
+      width: Math.floor(tableWidth / widthColumnCount),
+    };
+  });
+  const gridRef = useRef();
+  const [connectObject] = useState(() => {
+    const obj = {};
+    Object.defineProperty(obj, 'scrollLeft', {
+      get: () => {
+        if (gridRef.current) {
+          return gridRef.current?.state?.scrollLeft;
+        }
+        return null;
+      },
+      set: (scrollLeft) => {
+        if (gridRef.current) {
+          gridRef.current.scrollTo({
+            scrollLeft,
+          });
+        }
+      },
+    });
+    return obj;
+  });
+  const resetVirtualGrid = () => {
+    gridRef.current?.resetAfterIndices({
+      columnIndex: 0,
+      shouldForceUpdate: true,
+    });
+  };
+  useEffect(() => resetVirtualGrid, [tableWidth]);
+  const renderVirtualList = (rawData, { scrollbarSize, ref, onScroll }) => {
+    ref.current = connectObject;
+    const totalHeight = rawData.length * 54;
+    return (
+      <Grid
+        ref={gridRef}
+        className="virtual-grid"
+        columnCount={mergedColumns.length}
+        columnWidth={(index) => {
+          const { width } = mergedColumns[index];
+          return totalHeight > scroll?.y && index === mergedColumns.length - 1
+            ? width - scrollbarSize - 1
+            : width;
+        }}
+        height={scroll.y}
+        rowCount={rawData.length}
+        rowHeight={() => 54}
+        width={tableWidth}
+        onScroll={({ scrollLeft }) => {
+          onScroll({
+            scrollLeft,
+          });
+        }}
+      >
+        {({ columnIndex, rowIndex, style }) => (
+          <div
+            className={classNames('virtual-table-cell', {
+              'virtual-table-cell-last': columnIndex === mergedColumns.length - 1,
+            })}
+            style={{
+              ...style,
+              boxSizing: 'border-box',
+      //        padding: token.padding,
+        //      borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
+        //      background: token.colorBgContainer,
+            }}
+          >
+            {rawData[rowIndex][mergedColumns[columnIndex].dataIndex]}
+          </div>
+        )}
+      </Grid>
+    );
+  };
+  return (
+    <ResizeObserver
+      onResize={({ width }) => {
+        setTableWidth(width);
+      }}
+    >
+      <Table
+        {...props}
+        className="virtual-table"
+        columns={mergedColumns}
+        pagination={false}
+        components={{
+          body: renderVirtualList,
+        }}
+      />
+    </ResizeObserver>
+  );
+};
+export default VirtualTable;
\ No newline at end of file