feat: 表格支持动态宽度

src/utils/hooks/useElTableColumnWidth.ts

@@ -6,15 +6,33 @@ export default function useElTableColumnWidth(
   selector: string,
   selector: string,
 ): [Ref<HTMLElement | null>, Ref<number>] {
 ): [Ref<HTMLElement | null>, Ref<number>] {
   const tableWrapperRef = ref<HTMLDivElement | null>(null)
   const tableWrapperRef = ref<HTMLDivElement | null>(null)
-  let cleanupResizeEventListener: (() => void) | undefined
   const width = ref(0)
   const width = ref(0)
 
 
-  const onThOrderDetailResize = debounce(() => {
+  let cleanupResizeEventListener: (() => void) | undefined
+  let cleanupThResizeEventListener: (() => void) | undefined
+
+  let currentTh: HTMLElement | null = null
+  const onThResize = () => {
+    if (currentTh) width.value = currentTh.offsetWidth
+  }
+  const watchThSizeChange = (th: HTMLElement) => {
+    if (currentTh === th) return
+    currentTh = th
+    cleanupThResizeEventListener?.()
+    addResizeListener(th, onThResize)
+    cleanupThResizeEventListener = () => {
+      removeResizeListener(th, onThResize)
+      currentTh = null
+    }
+  }
+
+  const onTableWrapperResize = debounce(() => {
     const el = tableWrapperRef.value
     const el = tableWrapperRef.value
     if (!el) return
     if (!el) return
     const th = el.querySelector(selector) as HTMLElement | null
     const th = el.querySelector(selector) as HTMLElement | null
     if (th) {
     if (th) {
       width.value = th.offsetWidth
       width.value = th.offsetWidth
+      watchThSizeChange(th)
     }
     }
   }, 50)
   }, 50)
 
 
@@ -22,13 +40,14 @@ export default function useElTableColumnWidth(
     const el = tableWrapperRef.value
     const el = tableWrapperRef.value
     if (!el) return
     if (!el) return
     cleanupResizeEventListener = () => {
     cleanupResizeEventListener = () => {
-      removeResizeListener(el, onThOrderDetailResize)
+      removeResizeListener(el, onTableWrapperResize)
     }
     }
-    addResizeListener(el, onThOrderDetailResize)
+    addResizeListener(el, onTableWrapperResize)
   })
   })
 
 
   onBeforeUnmount(() => {
   onBeforeUnmount(() => {
     cleanupResizeEventListener?.()
     cleanupResizeEventListener?.()
+    cleanupThResizeEventListener?.()
   })
   })
 
 
   return [tableWrapperRef, width]
   return [tableWrapperRef, width]