fix(table): #2741

.changeset/tidy-panthers-design.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/table": patch
+---
+
+fix: 监听列变化,更新列最小可调整宽度

.changeset/weak-items-invent.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+fix(table): 监听列变化,更新列最小可调整宽度

packages/ui/table/src/hooks/use-col-width.ts

@@ -144,10 +144,51 @@ export const useColWidth = ({
     null
   )
 
+  // 控制列最小可调整宽度
+  const [minColWidth, setMinColWidth] = React.useState<number[]>([])
+
+  // 当列变化时同步更新 minColWidth
+  React.useEffect(() => {
+    let resizeObserver: ResizeObserver
+
+    if (headerTableElement) {
+      resizeObserver = new ResizeObserver(() => {
+        const resizableHandlerWidth = 4
+        const _minColWidth = Array.from(headerTableElement.childNodes).map((th) => {
+          const thPaddingLeft = parseFloat(
+            window.getComputedStyle(th as Element).getPropertyValue('padding-left')
+          )
+          const childNodes = Array.from(th.childNodes)
+
+          return (
+            childNodes
+              .map((child) => (child as HTMLElement).offsetWidth)
+              .reduce((prev, next) => {
+                return prev + next
+              }) +
+            thPaddingLeft * 2 +
+            resizableHandlerWidth
+          )
+        })
+
+        setMinColWidth(_minColWidth)
+      })
+      resizeObserver.observe(headerTableElement!)
+    } else {
+      setMinColWidth(Array(columns.length).fill(0))
+    }
+
+    return () => {
+      if (resizeObserver) {
+        resizeObserver.disconnect()
+      }
+    }
+  }, [columns.length, headerTableElement, resizable])
+
   /**
    *  控制列最小可调整宽度
    */
-  const minColWidth = React.useMemo(() => {
+  const minColWidthMemo = React.useMemo(() => {
     if (resizable && headerTableElement) {
       const resizableHandlerWidth = 4
       const _minColWidth = Array.from(headerTableElement.childNodes).map((th) => {

packages/ui/table/stories/data-source.stories.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 import Space from '@hi-ui/space'
 import Button from '@hi-ui/button'
 import Table from '../src'
-import Modal from '@hi-ui/modal'
 
 /**
  * @title 异步加载数据
@@ -46,7 +45,6 @@ export const DataSource = () => {
     [searchVal]
   )
 
-  const [v, sv] = React.useState(false)
   return (
     <>
       <h1>DataSource for Table</h1>
@@ -55,14 +53,15 @@ export const DataSource = () => {
           <Button onClick={() => setSearchVal(searchVal + 1)}>模拟更新查询参数</Button>
           <small>更新后表格会从第一页开始重新加载数据</small>
         </Space>
-        <Button onClick={() => sv(true)}>click</Button>
-        <Modal visible={v} onClose={() => sv(false)}>
-          <Space align="center" style={{ marginBottom: '1em' }}>
-            <Button onClick={() => setSearchVal(searchVal + 1)}>模拟更新查询参数</Button>
-            <small>更新后表格会从第一页开始重新加载数据</small>
-          </Space>
-          <Table columns={columns} dataSource={handleDataSource} />
-        </Modal>
+        <Table
+          columns={columns}
+          dataSource={handleDataSource}
+          // @ts-ignore
+          // pagination={{
+          //   showTotal: true,
+          //   pageSizeOptions: [5, 10, 20],
+          // }}
+        />
       </div>
     </>
   )