feat: 完善useTableScroll

src/components/Table/src/BasicTable.tsx

@@ -11,24 +11,8 @@ import { useMount } from 'ahooks'
 import { useTableScroll } from './hooks/useTableScroll'
 import type { BasicTableProps } from '@/types/typing'
 import type { ParamsType } from '@ant-design/pro-provider'
-
-// type BasicTableProps<T, U extends ParamsType> = {
-//   /** @type 枚举表中的菜单常量 */
-//   mainMenuType?: MainMenuKeyEnum
-//   /** @type 枚举表中的表格列常量 */
-//   columnStateType?: ColumnStateEnum
-//   /** @name 左上角的 title */
-//   headerTitle?: React.ReactNode
-//   params: ParamsType
-//   columns: ProColumns<T>[]
-//   /** @name 选择项配置 */
-//   columnsStateMap?: Record<string, ColumnsState>
-//   onColumnsStateChange?: (map: Record<string, ColumnsState>) => void
-//   actionRef?: React.MutableRefObject<ActionType | undefined> | ((actionRef: ActionType) => void)
-// } & Omit<
-//   ProTableProps<T, U>,
-//   'columns' | 'params' | 'actionRef' | 'headerTitle' | 'columnsStateMap' | 'onColumnsStateChange'
-// >
+import type { DensitySize } from '@ant-design/pro-table/lib/components/ToolBar/DensityIcon'
+import styles from './index.less'
 
 const BasicTable: {
   <T extends Record<string, any>, U extends ParamsType = ParamsType, ValueType = 'text'>(
@@ -44,6 +28,7 @@ const BasicTable: {
   columnsStateMap,
   columns,
   onColumnsStateChange,
+  onSizeChange,
   ...resetProps
 }) => {
   const {
@@ -95,23 +80,27 @@ const BasicTable: {
   }
 
   const handleOnColumnsChange = (map: Record<string, ColumnsState>) => {
-    // const columnKey = Object.keys(map)
-
     setState({ ...state, columnsStateMap: map })
     setAuthCache(TABLE_COLUMNS_MAP, { [ColumnStateEnum[columnStateType]]: map })
   }
 
+  const handleOnSizeChange = (size: DensitySize) => {
+    console.log('size', size)
+
+    if (onSizeChange) onSizeChange(size)
+    redoHeight(state.dataSource, size)
+  }
   return (
-    <div id="table-content" ref={tableElRef}>
+    <div ref={tableElRef} className={styles.BasicTable}>
       <ProTable
         {...resetProps}
         columns={columns}
-        tableClassName="zh-table-content"
         params={state.params}
         columnsStateMap={state.columnsStateMap}
         onColumnsStateChange={handleOnColumnsChange}
         scroll={getScrollRef}
         onLoad={dataSource => setState({ ...state, dataSource })}
+        onSizeChange={handleOnSizeChange}
       />
     </div>
   )

src/components/Table/src/hooks/useTableScroll.ts

@@ -5,6 +5,7 @@ import { useState, useMemo } from 'react'
 import { useDebounceFn, useUpdateLayoutEffect } from 'ahooks'
 import { getViewportOffset } from '@/utils/domUtils'
 import { useWindowSizeFn } from '@/hooks/event/useWindomSizeFn'
+import type { DensitySize } from '@ant-design/pro-table/lib/components/ToolBar/DensityIcon'
 
 const MutationObserver =
   window.MutationObserver || window.webkitMutationObserver || window.MozMutationObserver
@@ -16,19 +17,10 @@ export function useTableScroll(
   // let bodyEl: HTMLElement | null
   const [tableHeight, setTableHeight] = useState(null)
 
-  function calcTableHeight(dataSource: any[]) {
-    const tableEl = tableElRef.current?.querySelector('.ant-table-container')
+  function calcTableHeight(dataSource: any[], size: DensitySize) {
+    const tableEl = tableElRef.current?.querySelector('.ant-table-wrapper')
     if (!tableEl) return
 
-    // if (!bodyEl) {
-    //   bodyEl = tableEl?.querySelector('.ant-table-tbody')
-    //   console.log('bodyEl', tableEl.children)
-
-    //   if (!bodyEl) return
-    // }
-    // bodyEl!.style.height = 'unset'
-    // Add a delay to get the correct bottomIncludeBody paginationHeight footerHeight headerHeight
-
     const headEl = tableEl.querySelector('.ant-table-thead ')
     if (!headEl) return
     // Table height from bottom
@@ -38,18 +30,43 @@ export function useTableScroll(
 
     let paginationHeight = 0
     if (dataSource && dataSource?.length) {
-      paginationHeight += 56
+      paginationHeight += 32
+      if (size) {
+        switch (size) {
+          case 'large':
+            paginationHeight += 32
+            break
+          case 'small':
+            paginationHeight += 24
+            break
+
+          default:
+            paginationHeight += 24
+            break
+        }
+      }
     }
 
     let headerHeight = 0
-    if (headEl) {
-      headerHeight = headEl.offsetHeight
+    if (size) {
+      switch (size) {
+        case 'large':
+          headerHeight += 55
+          break
+        case 'small':
+          headerHeight += 39
+          break
+
+        default:
+          headerHeight += 47
+          break
+      }
     }
 
     const height = bottomIncludeBody - paddingHeight - paginationHeight - headerHeight
 
-    setTableHeight(height)
-    // bodyEl!.style.height = `${height}px`
+    if (height !== tableHeight) setTableHeight(height)
+
     const mutationObserver = new MutationObserver(() => {
       const tbodyEl: HTMLElement =
         tableElRef.current?.querySelector('.ant-table-container')?.children[1]
@@ -57,12 +74,14 @@ export function useTableScroll(
     })
     mutationObserver.observe(tableEl, {
       childList: true, // 子节点的变动（新增、删除或者更改）
-      subtree: true // 是否将观察器应用于该节点的所有后代节点
+      // attributes: true, // 目标属性的改变
+      subtree: true // 将观察器应用于该节点的所有后代节点
+      // attributeFilter: ['class'] // Array - 观察指定属性
     })
   }
 
-  function redoHeight(dataSource?: any[]) {
-    calcTableHeight(dataSource)
+  function redoHeight(dataSource?: any[], size: DensitySize = 'middle') {
+    calcTableHeight(dataSource, size)
   }
   const { run: debounceRedoHeight } = useDebounceFn(redoHeight, { wait: 300 })
 
@@ -96,6 +115,8 @@ export function useTableScroll(
     }
     const tableEl = tableElRef.current
 
+    console.log('tableEl', tableEl?.offsetWidth)
+
     const tableWidth = tableEl && tableEl?.offsetWidth ? tableEl?.offsetWidth : 0
 
     return tableWidth > width ? '100%' : width

src/components/Table/src/index.less

@@ -0,0 +1,8 @@
+.BasicTable {
+  :global(.ant-table-thead th.ant-table-column-sort) {
+    background: #f9f0ff;
+  }
+  :global(.ant-table-thead th.ant-table-column-sort:hover) {
+    background: #f9f0ff;
+  }
+}