模型虚拟滚动问题

craco.config.js

@@ -7,24 +7,6 @@ module.exports = {
     {
       plugin: CracoLessPlugin,
       options: {
-        modifyLessRule(lessRule, context) {
-          // You have to exclude these file suffixes first,
-          // if you want to modify the less module's suffix
-          lessRule.exclude = /\.m\.less$/;
-          return lessRule;
-        },
-        modifyLessModuleRule(lessModuleRule, context) {
-          // Configure the file suffix
-          lessModuleRule.test = /\.m\.less$/;
-
-          // Configure the generated local ident name.
-          const cssLoader = lessModuleRule.use.find(loaderByName("css-loader"));
-          cssLoader.options.modules = {
-            localIdentName: "[local]_[hash:base64:5]",
-          };
-
-          return lessModuleRule;
-        },
         lessLoaderOptions: {
           lessOptions: {
             modifyVars: {

src/view/Manage/VirtualTable/index.less

+.virtual-table {
+  .rdg {
+    border: none !important;
+  }
+  
+  .rdg-header-row {
+    .rdg-cell {
+      box-shadow: none !important;
+      background-color: #f2f5fc!important;
+      border-block-end: none !important;
+      border-inline-end: none !important;
+      font-weight: normal !important;
+      outline: none !important;
+      top: 0 !important;
+      padding-inline: 0 !important;
+      padding-left: 8px !important;
+      padding-right: 8px !important;
+  
+      &:before {
+        position: absolute;
+        top: 50%;
+        right: 0;
+        width: 1px;
+        height: 1.6em;
+        background-color: rgba(0,0,0,.06);
+        -webkit-transform: translateY(-50%);
+        transform: translateY(-50%);
+        transition: background-color .3s;
+        content: "";
+      }
+    }
+  }
+  
+  .rdg-row {
+    &:hover {
+      background-color: #fafafa;
+    }
+  
+    .rdg-cell {
+      box-shadow: none !important;
+      color: #363636 !important;
+      border-block-end: 1px solid #f0f0f0 !important;
+      border-inline-end: none !important;
+      outline: none !important;
+      padding-inline: 0 !important;
+      padding-left: 8px !important;
+      padding-right: 8px !important;
+    }
+  }
+  
+  .react-contextmenu-wrapper {
+    display: contents;
+  }
+}
\ No newline at end of file

src/view/Manage/VirtualTable/index.tsx

@@ -10,6 +10,8 @@ import { DownOutlined, UpOutlined } from '@ant-design/icons';
 import { nanoid } from 'nanoid';
 import { downNode, upNode } from './virtual-table-helper';
 
+import './index.less';
+
 export enum RowAction {
   None, Expand, Select
 }
@@ -209,10 +211,9 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
 
   const contextMenuId = contextMenu?.id ?? nanoid()
   return (
-    <React.Fragment>
+    <div className='virtual-table'>
       <DataGrid
         ref={gridRef}
-
         {...rest}
         columns={cols}
         rows={_rows}
@@ -244,14 +245,9 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
         }}
         onRowsChange={onRowsChange}
 
-        // headerRowHeight={45}
+        headerRowHeight={38}
         rowHeight={(args) => (args.type === 'ROW' && args.row.__type__ === RowType.Detail ? (expandable?.expandedRowHeight||100) : rowHeight)}
-
-        // defaultColumnOptions={{
-        //   sortable: true,
-        //   resizable: true
-        // }}
-
+       
         // 排序
         sortColumns={sortColumns}
         onSortColumnsChange={setSortColumns}
@@ -270,7 +266,7 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
         ,
         document.body
       )}
-    </React.Fragment>
+    </div>
   );
 }
 

src/view/Manage/VirtualTable/mixins.less

-.rdg {
-  border: none !important;
-}
-
-.rdg-header-row {
-  .rdg-cell {
-    box-shadow: none !important;
-    background-color: #f2f5fc!important;
-    border-block-end: none !important;
-    border-inline-end: none !important;
-    font-weight: normal !important;
-    outline: none !important;
-    top: 0 !important;
-    padding-inline: 0 !important;
-    padding-left: 8px !important;
-    padding-right: 8px !important;
-
-    &:before {
-      position: absolute;
-      top: 50%;
-      right: 0;
-      width: 1px;
-      height: 1.6em;
-      background-color: rgba(0,0,0,.06);
-      -webkit-transform: translateY(-50%);
-      transform: translateY(-50%);
-      transition: background-color .3s;
-      content: "";
-    }
-  }
-}
-
-.rdg-row {
-  &:hover {
-    background-color: #fafafa;
-  }
-
-  .rdg-cell {
-    box-shadow: none !important;
-    color: #363636 !important;
-    border-block-end: 1px solid #f0f0f0 !important;
-    border-inline-end: none !important;
-    outline: none !important;
-    padding-inline: 0 !important;
-    padding-left: 8px !important;
-    padding-right: 8px !important;
-  }
-}
-
-.react-contextmenu-wrapper {
-  display: contents;
-}
-
 .react-contextmenu {
   background-color: #fff;
   background-clip: padding-box;
@@ -65,7 +12,8 @@
   min-inline-size: 160px;
   outline: none;
   opacity: 0;
-  padding-block: 5px;
+  padding-top: 5px;
+  padding-bottom: 5px;
   padding-inline: 0;
   pointer-events: none;
   text-align: start;
@@ -82,8 +30,9 @@
   cursor: pointer;
   font-weight: 400;
   line-height: 1.5;
-  padding-block: 3px;
-  padding-inline: 20px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  padding-left: 20px;
   text-align: inherit;
   white-space: nowrap;
 }