添加服务

package.json

@@ -77,6 +77,6 @@
       "last 1 safari version"
     ]
   },
-  "proxy": "http://192.168.0.54:8888",
+  "proxy": "http://139.198.126.96:8089",
   "homepage": "http://myhost/data-govern"
 }

src/view/Manage/ResizeableTable/index.jsx

-import { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef, useMemo } from 'react';
 import { Table } from 'antd';
 import { Resizable } from 'react-resizable';
+import ResizeObserver from 'rc-resize-observer'
+
+const scrollbarWidth = getScrollbarWidth()
 
 const ResizeableHeaderCell = props => {
   const { onResize, width, onClick, ...restProps } = props;
@@ -33,44 +36,127 @@ const ResizeableHeaderCell = props => {
 };
 
 const ResizeableTable = (props) => {
-  const { columns, ...restProps } = props;
-  const [_columns, setColumns] = useState([]);
+  const { columns, extraColWidth = 0, ...restProps } = props
 
-  useEffect(() => {
-    setColumns([...columns, { title: '', dataIndex: 'auto' }]);
-  }, [columns])
+  const [tableWidth, setTableWidth] = useState(0)
 
-  const handleResize = index => (e, { size }) => {
-    const nextColumns = [..._columns];
-    nextColumns[index] = {
-      ...nextColumns[index],
-      width: size.width,
-    };
+  const paddingCol = useRef({
+    key: 'padding',
+    width: 0,
+    render: () => undefined
+  })
 
-    setColumns(nextColumns);
+  const handleResize = (index) => (e, { size }) => {
+    setCols((prevCols) => {
+      const nextColumns = [...(prevCols ?? [])];
+      nextColumns[index] = {
+        ...nextColumns[index],
+        width: size.width,
+      };
+      return nextColumns;
+    });
   };
 
-  return (
-    <Table 
-      components={{
-        header: {
-          cell: ResizeableHeaderCell,
+  const [cols, setCols] = useState();
+
+  useEffect(() => {
+    if (!!columns && tableWidth > 0) {
+      const contentWidth = getWidth(tableWidth, extraColWidth)
+
+      for (const item of columns??[]) {
+        const index = (cols??[]).findIndex(_item => item.dataIndex === _item.dataIndex && item.title === _item.title)
+        if (index !== -1) {
+          item.width = cols[index].width
         }
-      }}
-      columns={
-        _columns.map((column, index) => { 
+      }
+
+      setDefaultWidth(columns, contentWidth)
+      paddingCol.current.width = 0
+
+      const newCols = (columns??[])
+        .map((col, index) => {
+          const colWidth = col.width ?? 100;
           return {
-            ...column,
-            onHeaderCell: column => ({
+            ...col,  
+            width: colWidth, 
+            ellipsis: true,
+            onHeaderCell: (column: any) => ({
               width: column.width,
               onResize: handleResize(index),
             }),
           };
         })
-      }
-      { ...restProps }
-    />
+      setCols(newCols)
+    }
+  }, [columns, tableWidth, extraColWidth])
+
+  const cols1 = useMemo(() => !!cols ? [...cols, paddingCol.current] : undefined, [cols])
+
+  return (
+    <ResizeObserver
+      onResize={({ width }) => {
+        setTableWidth(width)
+      }}
+    >
+      <Table 
+        components={{
+          header: {
+            cell: ResizeableHeaderCell,
+          }
+        }}
+        columns={cols1}
+        { ...restProps }
+      />
+    </ResizeObserver>
   );
 }
 
-export default ResizeableTable;
+export default ResizeableTable;
\ No newline at end of file
+
+function getWidth(tableWidth, extraColWidth) {
+  // FIXME 判断没有选择列时,32为0
+  return tableWidth - scrollbarWidth - extraColWidth // scrollbar width, checkbox column
+}
+
+function setDefaultWidth(columns, width) {
+  let rowWidth = 0, count = 0
+  for (const col of columns) {
+    if (typeof col.width === 'number') {
+      rowWidth += col.width
+    } else {
+      count++
+    }
+  }
+  if (count > 0) {
+    let defaultW = (rowWidth > width ? 0 : width - rowWidth) / count
+    if (defaultW < 80) {
+      defaultW = 80
+    }
+    for (const col of columns) {
+      if (typeof col.width !== 'number') {
+        col.width = defaultW
+      }
+    }
+  }
+}
+
+export function getScrollbarWidth() {
+  // Creating invisible container
+  const outer = document.createElement('div');
+  outer.style.visibility = 'hidden';
+  outer.style.overflow = 'scroll'; // forcing scrollbar to appear
+  outer.style.msOverflowStyle = 'scrollbar'; // needed for WinJS apps
+  document.body.appendChild(outer);
+
+  // Creating inner element and placing it in the container
+  const inner = document.createElement('div');
+  outer.appendChild(inner);
+
+  // Calculating difference between container's full width and the child width
+  const scrollbarWidth = (outer.offsetWidth - inner.offsetWidth);
+
+  // Removing temporary elements from the DOM
+  outer.parentNode?.removeChild(outer);
+
+  return scrollbarWidth;
+}
\ No newline at end of file