模型列表宽度调整问题

package.json

@@ -16,7 +16,7 @@
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.12",
     "ahooks": "^3.1.7",
-    "antd": "^4.18.2",
+    "antd": "4.18.2",
     "axios": "^0.19.0",
     "copy-to-clipboard": "^3.3.1",
     "core-js": "^3.4.2",

src/view/Manage/Model/Component/ModelTable.jsx

@@ -5,7 +5,6 @@ import SmoothScroll from 'smooth-scroll';
 import classnames from 'classnames';
 import { Resizable } from 'react-resizable';
 import { useContextMenu, Menu as RcMenu, Item as RcItem } from "react-contexify";
-import ResizeObserver from 'rc-resize-observer';
 
 import { dispatch } from '../../../../model'; 
 import { showMessage, getQueryParam, paginate, isSzseEnv, formatDate, getDataModelerRole } from '../../../../util';
@@ -133,7 +132,6 @@ const ModelTable = (props) => {
     id: MENU_ID,
   });
   
-  const [ tableWidth, setTableWidth ] = useState(0);
   const [ selectedRowKeys, setSelectedRowKeys ] = useState([]);
   const [ subSelectedRowKeys, setSubSelectedRowKeys ] = useState([]);
   // const [ mouseEnterKey, setMouseEnterKey ] = useState(null);
@@ -386,54 +384,14 @@ const ModelTable = (props) => {
   }, [data, pagination, sortRule])
 
   useEffect(() => {
+    const includePathCols = [...cols];
+    includePathCols.splice(3, 0, pathColumn);
 
-    if (tableWidth) {
-      let newColumns = [], newIncludePathColumns = [];
-
-      let excludePathCols = [...cols];
-      if ((modelId||'') !== '') {
-        excludePathCols = cols.filter(item => item.dataIndex!=='key');
-      }
-
-      excludePathCols.forEach((column, index) => {
-        const newColumn = {...column}; 
-        if (!newColumn.width) {
-          const rowWidth = (excludePathCols.reduce((preVal, col) => (col.width?col.width:0) + preVal, 0)) + 97; //展开50 勾选32 滚动条15
-          
-          if (tableWidth > rowWidth) {
-            newColumn.width = (tableWidth-rowWidth)>200?(tableWidth-rowWidth):200;        
-          } else {
-            newColumn.width = 200;
-          }
-        }
-
-        newColumns.push(newColumn);
-      });
-
-      const includePathCols = [...cols];
-      includePathCols.splice(3, 0, pathColumn);
-
-      includePathCols.forEach((column, index) => {
-        const newColumn = {...column}; 
-        if (!newColumn.width) {
-          const rowWidth = (includePathCols.reduce((preVal, col) => (col.width?col.width:0) + preVal, 0)) + 97;
-          
-          if (tableWidth > rowWidth) {
-            newColumn.width = (tableWidth-rowWidth)>200?(tableWidth-rowWidth):200;        
-          } else {
-            newColumn.width = 200;
-          }
-        }
-
-        newIncludePathColumns.push(newColumn);
-      });
-
-      setColumns(newColumns);
-      setIncludePathColumns(newIncludePathColumns);
-    }
+    setColumns(cols);
+    setIncludePathColumns(includePathCols);
 
     //eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ tableWidth ])
+  }, [])
 
   const modelEventChange = (e) => {
     if (e.key === 'modelChange') {
@@ -724,38 +682,32 @@ const ModelTable = (props) => {
 
   return (
     <div className={classes}>
-      <ResizeObserver
-        onResize={({ width }) => {
-          setTableWidth(width);
+      <Table
+        rowSelection={rowSelection} 
+        components={{
+          header: {
+            cell: ResizeableHeaderCell,
+          }
         }}
-      >
-        <Table
-          rowSelection={rowSelection} 
-          components={{
-            header: {
-              cell: ResizeableHeaderCell,
-            }
-          }}
-          columns={mergedColumns()}
-          rowKey={'id'}
-          dataSource={modelId?(subData||[]):(filterData||[])}
-          pagination={false}
-          size={modelId?'small':'default'}
-          onRow={(record, index) => {
-            return {
-              id: `data-model-${record?.id}`,
-              style: { backgroundColor: (record?.id===anchorId)?'#e7f7ff':'transparent' },
-              onContextMenu: event => {
-                setCurrentItem(record);
-                displayMenu(event);
-              },
-            }
-          }}
-          scroll={{ y: modelId?null:((filterData||[]).length===0?null:'calc(100vh - 121px - 57px - 24px - 38px - 44px)') }}
-          onChange={onTableChange}
-          expandable={expandable}
-        />
-      </ResizeObserver>
+        columns={mergedColumns()}
+        rowKey={'id'}
+        dataSource={modelId?(subData||[]):(filterData||[])}
+        pagination={false}
+        size={modelId?'small':'default'}
+        onRow={(record, index) => {
+          return {
+            id: `data-model-${record?.id}`,
+            style: { backgroundColor: (record?.id===anchorId)?'#e7f7ff':'transparent' },
+            onContextMenu: event => {
+              setCurrentItem(record);
+              displayMenu(event);
+            },
+          }
+        }}
+        scroll={{ y: modelId?null:((filterData||[]).length===0?null:'calc(100vh - 121px - 57px - 24px - 38px - 44px)') }}
+        onChange={onTableChange}
+        expandable={expandable}
+      />
       {
         !modelId && (data||[]).length>0 && <Pagination
           className="text-center mt-3"