资产列表宽度

src/view/Manage/AssetManage/Component/AssetTable.jsx

-import React,{ useState, useEffect, useRef } from "react";
+import React,{ useState, useEffect, useRef, useMemo } from "react";
 import { Button, Pagination, Space, Modal, Input, Table, Tooltip, Checkbox, Typography, Dropdown, Menu } from "antd";
 import classNames from 'classnames';
 import SmoothScroll from 'smooth-scroll';
@@ -145,6 +145,7 @@ const AssetTable = (props) => {
   const [ fullScreen, setFullScreen ] = useState(false);
   const [ recursive, setRecursive ] = useState(true);
   const [ fullSearch, setFullSearch ] = useState(false);
+  const [ TableWidth, setTableWidth ] = useState(0);
   const [ compact, setCompact ] = useState(false);
   const [ assetDeleteModalVisible, setAssetDeleteModalVisible ] = useState(false);
 
@@ -157,6 +158,22 @@ const AssetTable = (props) => {
   const metadataIndexRef = useRef('');
   const remoteRelationRef = useRef(null);
 
+  const realColumns = useMemo(() => {
+    if (TableWidth>0 && columns.length>0) {
+      const currentWidth = (columns.reduce((preVal, col) => (col.width?col.width:0) + preVal, 0)) + 32.0;
+
+      if (currentWidth < TableWidth) {
+        columns.forEach(column => {
+          column.width = (TableWidth - 32.0)/columns.length;
+        })
+      }
+
+      return ([...columns, <Column key='auto' />]);
+    }
+
+    return [];
+  }, [columns, TableWidth])
+
   useEffect(() => {
     window?.addEventListener("storage", storageChange);
 
@@ -354,7 +371,8 @@ const AssetTable = (props) => {
         })
 
         setAssets([]);
-        setColumns([..._columns, <Column key='auto' />]);
+
+        setColumns(_columns);
 
         metadataIndexRef.current = _metadataIndex;
 
@@ -871,6 +889,8 @@ const AssetTable = (props) => {
       >
         <ResizeObserver
           onResize={({ width }) => {
+            setTableWidth(width);
+
             if (width < 1030 && !compact) {
               setCompact(true);
             } else if (width >= 1030 && compact) {
@@ -913,7 +933,7 @@ const AssetTable = (props) => {
             }}
             loading={loading}
             columns={
-              columns.map((column, index) => { 
+              (realColumns||[]).map((column, index) => { 
                 return {
                   ...column,
                   onHeaderCell: column => ({
@@ -927,7 +947,7 @@ const AssetTable = (props) => {
             dataSource={assets}
             pagination={false}
             size='default'
-            scroll={{ x: 1000, y: scrollY }}
+            scroll={{ y: scrollY }}
           />
         </ResizeObserver>
       </div>