Bläddra i källkod

feat: 调整useTableScroll在数据为空的情况下的高度计算逻辑

lanjianrong 4 år sedan
förälder
incheckning
34dba653e7

+ 3 - 2
src/components/Table/src/BasicTable.tsx

@@ -2,7 +2,7 @@
 /* eslint-disable no-param-reassign */
 import PermSelect from '@/pages/Customer/Company/components/PermSelect'
 import { TABLE_COLUMNS_MAP, ColumnStateEnum } from '@/utils/cache/cacheEnum'
-import { isNullOrUnDef } from '@/utils/is'
+import { isDef, isNullOrUnDef } from '@/utils/is'
 import type { ColumnsState } from '@ant-design/pro-table'
 import ProTable from '@ant-design/pro-table'
 import { useModel } from 'umi'
@@ -95,7 +95,8 @@ const BasicTable: {
     tableElRef,
     columnsRef,
     state.selectKeysRef,
-    state.sizeRef
+    state.sizeRef,
+    isDef(resetProps.pagination)
   )
 
   useLayoutEffect(() => {

+ 25 - 20
src/components/Table/src/hooks/useTableScroll.ts

@@ -11,7 +11,8 @@ export function useTableScroll(
   tableElRef: RefObject<HTMLElement>,
   columnsRef: ProColumns<any> = [],
   selectKeysRef: string[] = [],
-  sizeRef: DensitySize = 'middle'
+  sizeRef: DensitySize = 'middle',
+  paginationRef: boolean
 ) {
   // let bodyEl: HTMLElement | null
   const [tableHeight, setTableHeight] = useState(null)
@@ -30,19 +31,21 @@ export function useTableScroll(
 
     let paginationHeight = 0
     if (dataSource && dataSource?.length) {
-      paginationHeight += 32
-      if (sizeRef) {
-        switch (sizeRef) {
-          case 'large':
-            paginationHeight += 32
-            break
-          case 'small':
-            paginationHeight += 24
-            break
-
-          default:
-            paginationHeight += 24
-            break
+      if (paginationRef) {
+        paginationHeight += 32
+        if (sizeRef) {
+          switch (sizeRef) {
+            case 'large':
+              paginationHeight += 32
+              break
+            case 'small':
+              paginationHeight += 24
+              break
+
+            default:
+              paginationHeight += 24
+              break
+          }
         }
       }
     }
@@ -71,13 +74,15 @@ export function useTableScroll(
       const tbodyEl: HTMLElement = tableElRef.current
         ?.querySelector('.ant-table-container')
         ?.querySelector('.ant-table-tbody')
-      const hasScrollBar =
-        tableElRef.current?.querySelector('.ant-table-container')?.querySelector('table')?.style
-          .width !== '100%'
+      const el = tableElRef.current?.querySelector('.ant-table-container')?.querySelector('table')
+      let hasScrollBar = el?.style.width !== '100%'
+
+      if (el?.style.width !== '100%') {
+        hasScrollBar = el?.clientWidth > el?.style.width
+      }
+
+      const notDataHeight = `${height - (hasScrollBar ? 8 : 0)}px`
 
-      const notDataHeight = `calc(100vh - 48px - 48px - 64px - ${headerHeight}px - ${
-        hasScrollBar ? 8 : 0
-      }px)`
       tbodyEl && (tbodyEl!.style.height = notDataHeight)
       return
     }