修复表格滚动高度

src/pages/crontab/index.tsx

@@ -1,4 +1,4 @@
-import React, { PureComponent, Fragment, useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import {
   Button,
   message,
@@ -388,6 +388,7 @@ const Crontab = () => {
   const [cronViews, setCronViews] = useState<any[]>([]);
   const [enabledCronViews, setEnabledCronViews] = useState<any[]>([]);
   const [moreMenuActive, setMoreMenuActive] = useState(false);
+  const tableRef = useRef<any>();
 
   const goToScriptManager = (record: any) => {
     const cmd = record.command.split(' ') as string[];
@@ -874,12 +875,15 @@ const Crontab = () => {
       sorter: {},
       filters: {},
     });
-    setTimeout(() => {
-      setTableScrollHeight(getTableScroll());
-    });
     getCronViews();
   }, []);
 
+  useEffect(() => {
+    if (tableRef.current) {
+      setTableScrollHeight(getTableScroll());
+    }
+  }, [tableRef.current]);
+
   const panelContent = (
     <>
       {selectedRowIds.length > 0 && (
@@ -939,6 +943,7 @@ const Crontab = () => {
         </div>
       )}
       <Table
+        ref={tableRef}
         columns={columns}
         pagination={{
           current: pageConf.page,

src/pages/dependence/index.tsx

@@ -168,6 +168,7 @@ const Dependence = () => {
   const [logDependence, setLogDependence] = useState<any>();
   const [isLogModalVisible, setIsLogModalVisible] = useState(false);
   const [type, setType] = useState('nodejs');
+  const tableRef = useRef<any>();
 
   const getDependencies = () => {
     setLoading(true);
@@ -368,10 +369,10 @@ const Dependence = () => {
   }, [searchText, type]);
 
   useEffect(() => {
-    setTimeout(() => {
+    if (tableRef.current) {
       setTableScrollHeight(getTableScroll({ extraHeight: 87 }));
-    });
-  }, []);
+    }
+  }, [tableRef.current]);
 
   useEffect(() => {
     if (logDependence) {
@@ -454,6 +455,7 @@ const Dependence = () => {
       )}
       <DndProvider backend={HTML5Backend}>
         <Table
+          ref={tableRef}
           columns={columns}
           rowSelection={rowSelection}
           pagination={false}

src/pages/env/index.tsx

@@ -254,6 +254,7 @@ const Env = () => {
   const [searchText, setSearchText] = useState('');
   const [tableScrollHeight, setTableScrollHeight] = useState<number>();
   const [importLoading, setImportLoading] = useState(false);
+  const tableRef = useRef<any>();
 
   const getEnvs = () => {
     setLoading(true);
@@ -508,10 +509,10 @@ const Env = () => {
   }, [searchText]);
 
   useEffect(() => {
-    setTimeout(() => {
+    if (tableRef.current) {
       setTableScrollHeight(getTableScroll({ extraHeight: 87 }));
-    });
-  }, []);
+    }
+  }, [tableRef.current]);
 
   return (
     <PageContainer
@@ -587,6 +588,7 @@ const Env = () => {
       )}
       <DndProvider backend={HTML5Backend}>
         <Table
+          ref={tableRef}
           columns={columns}
           rowSelection={rowSelection}
           pagination={false}

src/pages/subscription/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import {
   Button,
   message,
@@ -247,6 +247,7 @@ const Subscription = () => {
   const [searchValue, setSearchValue] = useState('');
   const [isLogModalVisible, setIsLogModalVisible] = useState(false);
   const [logSubscription, setLogSubscription] = useState<any>();
+  const tableRef = useRef<any>();
 
   const runSubscription = (record: any, index: number) => {
     Modal.confirm({
@@ -539,11 +540,14 @@ const Subscription = () => {
 
   useEffect(() => {
     setPageSize(parseInt(localStorage.getItem('pageSize') || '20'));
-    setTimeout(() => {
-      setTableScrollHeight(getTableScroll());
-    });
   }, []);
 
+  useEffect(() => {
+    if (tableRef.current) {
+      setTableScrollHeight(getTableScroll());
+    }
+  }, [tableRef.current]);
+
   return (
     <PageContainer
       className="ql-container-wrapper subscriptiontab-wrapper"
@@ -568,6 +572,7 @@ const Subscription = () => {
       }}
     >
       <Table
+        ref={tableRef}
         columns={columns}
         pagination={{
           current: currentPage,