feat: 虚拟列表完成 list

src/components/CommonComponents/VirtuallyList/index.tsx

+import { useEffect, useState, useRef } from "react";
+import MyCircularProgress from "@/components/mui/MyCircularProgress";
 import { List } from "react-virtualized";
 
 interface IVirtuallyListProps {
 	list: Array<any>;
 	renderRow: any;
+	rowHeight: Number | Function;
+	listStyle?: Object;
+	loading?: boolean;
+	onScroll?: Function;
 }
 
 const VirtuallyList = (props: IVirtuallyListProps) => {
-	const { list, renderRow } = props;
+	const {
+		list,
+		renderRow,
+		rowHeight,
+		listStyle,
+		loading = false,
+		onScroll,
+	} = props;
+
+	const [width, setWidth] = useState(0);
+	const [height, setHeight] = useState(0);
+
+	const virtuallyListBoxRef: any = useRef(null);
+
+	const getTableWidthHeight = () => {
+		setWidth(virtuallyListBoxRef?.current?.offsetWidth || 1000);
+		setHeight(virtuallyListBoxRef?.current?.offsetHeight || 300);
+	};
+
+	useEffect(() => {
+		getTableWidthHeight();
+	}, []);
+
+	window.onresize = () => {
+		getTableWidthHeight();
+	};
+
 	return (
-		<List
-			width={300}
-			height={300}
-			rowCount={list.length}
-			rowHeight={20}
-			rowRenderer={renderRow}
-			overscanRowCount={20}
-		/>
+		<div
+			ref={virtuallyListBoxRef}
+			style={{ width: "100%", height: "100%", position: "relative" }}
+		>
+			<MyCircularProgress loading={loading} />
+			<List
+				width={width}
+				height={height}
+				rowCount={list.length}
+				rowHeight={rowHeight}
+				rowRenderer={renderRow}
+				overscanRowCount={20}
+				style={listStyle}
+				onScroll={onScroll}
+			/>
+		</div>
 	);
 };
 export default VirtuallyList;

src/components/CommonComponents/VirtuallyTable/index.tsx

-import React from "react";
 import { useCallback, useEffect, useState, useRef } from "react";
 import { Column, Table } from "react-virtualized";
 import style from "./index.module.scss";
@@ -91,7 +90,6 @@ const VirtuallyTable = (props: IVirtuallyTableProps) => {
 	} = props;
 
 	const virtuallyTableBoxRef: any = useRef(null);
-	const virtuallyTableRef: any = useRef(null);
 
 	const [width, setWidth] = useState(0);
 	const [height, setHeight] = useState(0);
@@ -185,7 +183,6 @@ const VirtuallyTable = (props: IVirtuallyTableProps) => {
 				<MyCircularProgress loading={loading} />
 				{width && height && (
 					<Table
-						ref={virtuallyTableRef}
 						width={width}
 						height={height}
 						headerHeight={headerHeight}

src/views/demo/VirtuallyListDemo/index.tsx

-import { useCallback, useEffect, useState, useRef, useMemo } from "react";
 import VirtuallyList from "@/components/CommonComponents/VirtuallyList";
-import VirtuallyTable from "@/components/CommonComponents/VirtuallyTable";
-import MyButton from "@/components/mui/MyButton";
 
 const VirtuallyListDemo = () => {
 	let listData: Array<any> = [];
@@ -26,6 +23,9 @@ const VirtuallyListDemo = () => {
 						display: "flex",
 						justifyContent: "space-between",
 						alignItems: "center",
+						boxSizing: "border-box",
+						height: "100%",
+						border: "1px solid red",
 					}}
 				>
 					<div>{listData[index].name}</div>
@@ -40,82 +40,14 @@ const VirtuallyListDemo = () => {
 		);
 	};
 
-	const rows = [
-		{
-			a: "啊手动阀建行卡实际付款啦即使对方卢卡库上的飞机啊离开解放了；拉萨的飞机拉萨酱豆腐啊肌肤抵抗力就",
-			b: "werewrw",
-			c: "asdfasf",
-			d: "asdfasdf",
-			e: "asd4534",
-			id: "a1",
-		},
-	];
-	for (let i = 0; i < 10000; i++) {
-		rows.push({
-			a: "xcgh",
-			b: "sdf",
-			c: "sdfg",
-			d: "sdfg",
-			e: "wertwe",
-			id: String(i),
-		});
-	}
-	const buttonHeadCells = [
-		{
-			id: "a",
-			label: "属性a",
-			width: 150,
-		},
-		{
-			id: "b",
-			label: "属性b",
-			width: 150,
-		},
-		{
-			id: "c",
-			label: "属性c",
-			width: 150,
-			// flexGrow: 2,
-		},
-		{
-			id: "d",
-			label: "属性d",
-			width: 200,
-			flexGrow: 2,
-		},
-		{
-			id: "caozuo",
-			label: "操作",
-			width: 150,
-			cellRenderer: (data: any) => {
-				return (
-					<MyButton
-						text="删除"
-						onClick={() => {
-							// handleDelete(row.id);
-						}}
-					></MyButton>
-				);
-			},
-		},
-	];
-
-	const [selectItems, setSelectItems] = useState([]);
-
 	return (
 		<div>
 			<div>
-				{/* <VirtuallyList list={listData} renderRow={renderRow}></VirtuallyList>; */}
-			</div>
-			<div style={{ height: "600px" }}>
-				<VirtuallyTable
-					selectItems={selectItems}
-					setSelectItems={setSelectItems}
-					rows={rows}
-					// rows={[]}
-					headCells={buttonHeadCells}
-					activeId="8"
-				/>
+				<VirtuallyList
+					list={listData}
+					renderRow={renderRow}
+					rowHeight={40}
+				></VirtuallyList>
 			</div>
 		</div>
 	);

src/views/demo/VirtuallyTableDemo/index.tsx

+import { useState } from "react";
+import VirtuallyTable from "@/components/CommonComponents/VirtuallyTable";
+import MyButton from "@/components/mui/MyButton";
+
+const VirtuallyTableDemo = () => {
+	const rows = [
+		{
+			a: "啊手动阀建行卡实际付款啦即使对方卢卡库上的飞机啊离开解放了；拉萨的飞机拉萨酱豆腐啊肌肤抵抗力就",
+			b: "werewrw",
+			c: "asdfasf",
+			d: "asdfasdf",
+			e: "asd4534",
+			id: "a1",
+		},
+	];
+	for (let i = 0; i < 10000; i++) {
+		rows.push({
+			a: "xcgh",
+			b: "sdf",
+			c: "sdfg",
+			d: "sdfg",
+			e: "wertwe",
+			id: String(i),
+		});
+	}
+	const buttonHeadCells = [
+		{
+			id: "a",
+			label: "属性a",
+			width: 150,
+		},
+		{
+			id: "b",
+			label: "属性b",
+			width: 150,
+		},
+		{
+			id: "c",
+			label: "属性c",
+			width: 150,
+			// flexGrow: 2,
+		},
+		{
+			id: "d",
+			label: "属性d",
+			width: 200,
+			flexGrow: 2,
+		},
+		{
+			id: "caozuo",
+			label: "操作",
+			width: 150,
+			cellRenderer: (data: any) => {
+				return (
+					<MyButton
+						text="删除"
+						onClick={() => {
+							// handleDelete(row.id);
+						}}
+					></MyButton>
+				);
+			},
+		},
+	];
+
+	const [selectItems, setSelectItems] = useState([]);
+
+	return (
+		<div style={{ height: "600px" }}>
+			<VirtuallyTable
+				selectItems={selectItems}
+				setSelectItems={setSelectItems}
+				rows={rows}
+				headCells={buttonHeadCells}
+				activeId="8"
+			/>
+		</div>
+	);
+};
+
+export default VirtuallyTableDemo;

src/views/demo/index.module.scss

-.box {
-	background-color: red;
-}

src/views/demo/index.tsx

@@ -3,13 +3,17 @@ import QueueSelectDemo from "./QueueSelectDemo";
 import IconfontDemo from "./IconfontDemo";
 import CardTableDemo from "./CardTableDemo";
 import VirtuallyListDemo from "./VirtuallyListDemo";
+import VirtuallyTableDemo from "./VirtuallyTableDemo";
 import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
 import { useState } from "react";
 import styles from "./index.module.css";
-import style from "./index.module.scss";
 
 const Demo = () => {
 	const radioOptionsArr = [
+		{
+			value: "virtuallyTableDemo",
+			label: "virtuallyTableDemo",
+		},
 		{
 			value: "virtuallyListDemo",
 			label: "virtuallyListDemo",
@@ -51,6 +55,9 @@ const Demo = () => {
 				{selectDemo === "virtuallyListDemo" && (
 					<VirtuallyListDemo></VirtuallyListDemo>
 				)}
+				{selectDemo === "virtuallyTableDemo" && (
+					<VirtuallyTableDemo></VirtuallyTableDemo>
+				)}
 				{selectDemo === "cardTable" && <CardTableDemo></CardTableDemo>}
 				{selectDemo === "iconfont" && <IconfontDemo></IconfontDemo>}
 				{selectDemo === "队列选择器" && <QueueSelectDemo></QueueSelectDemo>}