feat: 处理行选择功能时高度再计算

src/components/Table/src/BasicTable.tsx

@@ -32,6 +32,7 @@ const BasicTable: {
   onColumnsStateChange,
   onSizeChange,
   bordered,
+  rowSelection,
   ...resetProps
 }) => {
   const {
@@ -47,7 +48,9 @@ const BasicTable: {
   const tableElRef = useRef<HTMLElement>(null)
 
   const [state, setState] = useState({
-    columnsStateMap: {},
+    selectKeysRef: null,
+    sizeRef: 'middle',
+    columnsStateMap: columnsStateMap || {},
     params: { staffIds: null, dataPermission: defaultpermAuthCache },
     dataSource: null
   })
@@ -63,9 +66,12 @@ const BasicTable: {
     return columns?.filter((_, i) => !filterKey.includes(i.toString()))
   }, [state.columnsStateMap])
 
-  const { getScrollRef, redoHeight } = useTableScroll(tableElRef, columnsRef)
-
-  // console.log('getScrollRef', getScrollRef)
+  const { getScrollRef, redoHeight } = useTableScroll(
+    tableElRef,
+    columnsRef,
+    state.selectKeysRef,
+    state.sizeRef
+  )
 
   useLayoutEffect(() => {
     if (state.dataSource) {
@@ -102,16 +108,34 @@ const BasicTable: {
   }
 
   const handleOnColumnsChange = (map: Record<string, ColumnsState>) => {
-    console.log('map', map)
-
     setState({ ...state, columnsStateMap: map })
     setAuthCache(TABLE_COLUMNS_MAP, { [ColumnStateEnum[columnStateType]]: map })
   }
 
   const handleOnSizeChange = (size: DensitySize) => {
     if (onSizeChange) onSizeChange(size)
-    redoHeight(state.dataSource, size)
+    setState({ ...state, size })
   }
+
+  const rowSelectionOptions = useMemo(() => {
+    if (isNullOrUnDef(rowSelection)) return false
+    if (Reflect.has(rowSelection, 'onChange')) {
+      const { onChange: rowOnChange } = rowSelection
+      return {
+        ...rowSelection,
+        onChange: selectedRowKeys => {
+          rowOnChange(selectedRowKeys)
+          setState({ ...state, selectKeysRef: selectedRowKeys })
+        }
+      }
+    }
+    return {
+      ...rowSelection,
+      onChange: selectedRowKeys => {
+        setState({ ...state, selectKeysRef: selectedRowKeys })
+      }
+    }
+  }, [rowSelection])
   return (
     <div ref={tableElRef} className={styles.BasicTable}>
       <ProTable
@@ -124,6 +148,9 @@ const BasicTable: {
         bordered={isNullOrUnDef(bordered) ? bordered : true}
         onLoad={dataSource => setState({ ...state, dataSource })}
         onSizeChange={handleOnSizeChange}
+        rowSelection={{
+          ...rowSelectionOptions
+        }}
       />
     </div>
   )

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

@@ -10,13 +10,14 @@ import type { DensitySize } from '@ant-design/pro-table/lib/components/ToolBar/D
 export function useTableScroll(
   tableElRef: RefObject<HTMLElement>,
   columnsRef: ProColumns<any> = [],
-  selectKeysRef: string[] = []
+  selectKeysRef: string[] = [],
+  sizeRef: DensitySize = 'middle'
 ) {
   // let bodyEl: HTMLElement | null
   const [tableHeight, setTableHeight] = useState(null)
   const [_dataSource, setDataSource] = useState(null)
 
-  function calcTableHeight(dataSource: any[], size: DensitySize = 'middle') {
+  function calcTableHeight(dataSource: any[]) {
     const tableEl = tableElRef.current?.querySelector('.ant-table-wrapper')
     if (!tableEl) return
 
@@ -30,8 +31,8 @@ export function useTableScroll(
     let paginationHeight = 0
     if (dataSource && dataSource?.length) {
       paginationHeight += 32
-      if (size) {
-        switch (size) {
+      if (sizeRef) {
+        switch (sizeRef) {
           case 'large':
             paginationHeight += 32
             break
@@ -84,11 +85,11 @@ export function useTableScroll(
     tbodyEl && (tbodyEl!.style.height = `${height}px`)
   }
 
-  function redoHeight(dataSource?: any[], size: DensitySize = 'middle') {
+  function redoHeight(dataSource?: any[]) {
     if (dataSource) {
       setDataSource(dataSource)
     }
-    calcTableHeight(dataSource || _dataSource, size)
+    calcTableHeight(dataSource || _dataSource)
   }
   const { run: debounceRedoHeight } = useDebounceFn(redoHeight, { wait: 180 })
 
@@ -97,7 +98,7 @@ export function useTableScroll(
 
   useUpdateLayoutEffect(() => {
     debounceRedoHeight()
-  }, [selectKeysRef, columnsRef])
+  }, [selectKeysRef, columnsRef, sizeRef])
 
   const getSrollX = useMemo(() => {
     let width = 0