修复表格滚动样式和交互

src/pages/crontab/index.less

@@ -0,0 +1,3 @@
+.ant-table-pagination.ant-pagination {
+  margin-bottom: 0;
+}

src/pages/crontab/index.tsx

@@ -34,6 +34,8 @@ import CronModal from './modal';
 import CronLogModal from './logModal';
 import cron_parser from 'cron-parser';
 import { diffTime } from '@/utils/date';
+import { getTableScroll } from '@/utils/index';
+import './index.less';
 
 const { Text } = Typography;
 const { Search } = Input;
@@ -66,7 +68,7 @@ enum OperationPath {
 }
 
 const Crontab = ({ headerStyle, isPhone }: any) => {
-  const columns = [
+  const columns: any = [
     {
       title: '任务名',
       dataIndex: 'name',
@@ -324,6 +326,7 @@ const Crontab = ({ headerStyle, isPhone }: any) => {
   const [selectedRowIds, setSelectedRowIds] = useState<string[]>([]);
   const [currentPage, setCurrentPage] = useState(1);
   const [pageSize, setPageSize] = useState(20);
+  const [tableScrollHeight, setTableScrollHeight] = useState<number>();
 
   const getCrons = () => {
     setLoading(true);
@@ -673,6 +676,12 @@ const Crontab = ({ headerStyle, isPhone }: any) => {
 
   const onSelectChange = (selectedIds: any[]) => {
     setSelectedRowIds(selectedIds);
+
+    setTimeout(() => {
+      if (selectedRowIds.length === 0 || selectedIds.length === 0) {
+        setTableScrollHeight(getTableScroll());
+      }
+    });
   };
 
   const rowSelection = {
@@ -754,6 +763,7 @@ const Crontab = ({ headerStyle, isPhone }: any) => {
 
   useEffect(() => {
     setPageSize(parseInt(localStorage.getItem('pageSize') || '20'));
+    setTableScrollHeight(getTableScroll());
   }, []);
 
   return (
@@ -839,7 +849,7 @@ const Crontab = ({ headerStyle, isPhone }: any) => {
         dataSource={value}
         rowKey="_id"
         size="middle"
-        scroll={{ x: 1000 }}
+        scroll={{ x: 1000, y: tableScrollHeight }}
         loading={loading}
         rowSelection={rowSelection}
         rowClassName={getRowClassName}

src/pages/env/index.tsx

@@ -25,6 +25,7 @@ import EditNameModal from './editNameModal';
 import { DndProvider, useDrag, useDrop } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import './index.less';
+import { getTableScroll } from '@/utils/index';
 
 const { Text } = Typography;
 const { Search } = Input;
@@ -96,7 +97,7 @@ const DragableBodyRow = ({
 };
 
 const Env = ({ headerStyle, isPhone, theme }: any) => {
-  const columns = [
+  const columns: any = [
     {
       title: '序号',
       align: 'center' as const,
@@ -205,6 +206,7 @@ const Env = ({ headerStyle, isPhone, theme }: any) => {
   const [editedEnv, setEditedEnv] = useState();
   const [selectedRowIds, setSelectedRowIds] = useState<string[]>([]);
   const [searchText, setSearchText] = useState('');
+  const [tableScrollHeight, setTableScrollHeight] = useState<number>();
 
   const getEnvs = () => {
     setLoading(true);
@@ -361,6 +363,12 @@ const Env = ({ headerStyle, isPhone, theme }: any) => {
 
   const onSelectChange = (selectedIds: any[]) => {
     setSelectedRowIds(selectedIds);
+
+    setTimeout(() => {
+      if (selectedRowIds.length === 0 || selectedIds.length === 0) {
+        setTableScrollHeight(getTableScroll({ extraHeight: 40 }));
+      }
+    });
   };
 
   const rowSelection = {
@@ -426,6 +434,10 @@ const Env = ({ headerStyle, isPhone, theme }: any) => {
     getEnvs();
   }, [searchText]);
 
+  useEffect(() => {
+    setTableScrollHeight(getTableScroll({ extraHeight: 40 }));
+  }, []);
+
   return (
     <PageContainer
       className="ql-container-wrapper env-wrapper"
@@ -490,7 +502,7 @@ const Env = ({ headerStyle, isPhone, theme }: any) => {
           dataSource={value}
           rowKey="_id"
           size="middle"
-          scroll={{ x: 768 }}
+          scroll={{ x: 768, y: tableScrollHeight }}
           components={components}
           loading={loading}
           onRow={(record: any, index: number) => {