Procházet zdrojové kódy

style: 针对没有分页器的情况,对ant-table-container进行样式调整

lanjianrong před 4 roky
rodič
revize
ff5213f141
1 změnil soubory, kde provedl 19 přidání a 7 odebrání
  1. 19 7
      src/components/Table/src/hooks/useTableScroll.ts

+ 19 - 7
src/components/Table/src/hooks/useTableScroll.ts

@@ -26,8 +26,10 @@ export function useTableScroll(
     if (!headEl) return
     // Table height from bottom
     const { bottomIncludeBody } = getViewportOffset(headEl)
+    const tableContainerEl: HTMLElement = tableElRef.current?.querySelector('.ant-table-container')
+    if (!tableContainerEl) return
 
-    const paddingHeight = 24
+    let paddingHeight = 24
 
     let paginationHeight = 0
     if (dataSource && dataSource?.length) {
@@ -47,7 +49,20 @@ export function useTableScroll(
               break
           }
         }
+      } else {
+        // 针对没有分页器的情况,对ant-table-container进行样式调整
+        // TODO: .ant-table-container margin-bottom 16px + border 1px
+        paddingHeight += 17
+
+        tableContainerEl!.style.borderRadius = '2px'
+        tableContainerEl!.style.marginBottom = '16px'
+        tableContainerEl!.style.borderBottom = '1px solid #f0f0f0'
       }
+    } else if (tableContainerEl?.getAttribute('style')) {
+      // TODO: 在已经设置过style的情况下才要取消掉style
+      // tableContainerEl!.removeAttribute('style')
+      tableContainerEl!.style.borderBottom = 'none'
+      paddingHeight += 16
     }
 
     let headerHeight = 0
@@ -72,10 +87,8 @@ export function useTableScroll(
 
     if (!dataSource?.length) {
       // TODO:针对无数据的情况下,特别设置tboody
-      const tbodyEl: HTMLElement = tableElRef.current
-        ?.querySelector('.ant-table-container')
-        ?.querySelector('.ant-table-tbody')
-      const el = tableElRef.current?.querySelector('.ant-table-container')?.querySelector('table')
+      const tbodyEl: HTMLElement = tableContainerEl?.querySelector('.ant-table-tbody')
+      const el = tableContainerEl?.querySelector('table')
       let hasScrollBar = el?.style.width !== '100%'
 
       if (el?.style.width !== '100%') {
@@ -92,8 +105,7 @@ export function useTableScroll(
       tbodyEl && (tbodyEl!.style.height = notDataHeight)
       return
     }
-    const tbodyEl: HTMLElement =
-      tableElRef.current?.querySelector('.ant-table-container')?.children[1]
+    const tbodyEl: HTMLElement = tableContainerEl?.children[1]
     tbodyEl && (tbodyEl!.style.height = `${height}px`)
   }