fix(pro:table): pining the position of the layout tool

IDuxFE · Sep 16, 2022 · 79991cb · 79991cb
1 parent ceda7be
commit 79991cb
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 21 deletions.
diff --git a/packages/pro/table/src/ProTable.tsx b/packages/pro/table/src/ProTable.tsx
@@ -50,21 +50,11 @@ export default defineComponent({
       scrollTo: (option?: number | VirtualScrollToOptions) => tableRef.value?.scrollTo(option),
     })
 
-    const headElementRef = ref<HTMLElement>()
-    const layoutToolStyle = computed(() => {
-      const headElement = headElementRef.value
-      if (!headElement) {
-        return { display: 'none' }
-      }
-      const { height } = headElement.getBoundingClientRect()
-      return { marginTop: `${(height - 16) / 2}px` }
-    })
-
     const renderLayoutTool = () => {
       if (!props.layoutTool) {
         return null
       }
-      return <ProTableLayoutTool style={layoutToolStyle.value} />
+      return <ProTableLayoutTool class={`${mergedPrefixCls.value}-layout-tool-fixed`} />
     }
 
     const renderToolbar = () => {
@@ -102,10 +92,6 @@ export default defineComponent({
           const additionalProps = customAdditional?.headCell ? customAdditional.headCell({ column }) : undefined
           return resizable ? { ...additionalProps, column, onResizeEnd } : additionalProps
         },
-        head: ({ rows }) => {
-          const additionalProps = customAdditional?.head ? customAdditional.head({ rows }) : undefined
-          return { ...additionalProps, ref: headElementRef }
-        },
       }
       const mergedCustomTag: TableCustomTag = {
         headCell: resizable ? ResizableHeadCell : undefined,

diff --git a/packages/pro/table/style/index.less b/packages/pro/table/style/index.less
@@ -33,27 +33,37 @@
   .@{table-prefix}-container {
     .@{pro-table-prefix}-layout-tool-trigger {
       position: absolute;
-      right: 2px;
-      font-size: 16px;
-      line-height: 1;
+      right: 0;
+      padding: 0 @spacing-md;
+      font-size: @font-size-lg;
       z-index: 3;
       color: @table-head-color;
       background-color: @table-head-background-color;
       cursor: pointer;
     }
-  }
 
-  .@{table-prefix}-container {
     .@{pro-table-prefix}-layout-tool-trigger + .@{table-prefix}-content {
       table > thead > tr:first-child {
         th:last-child {
           .@{table-prefix}-sortable-trigger {
-            margin-right: 12px;
+            margin-right: 40px;
           }
         }
       }
     }
   }
+
+  &.@{table-prefix}-lg .@{table-prefix}-container .@{pro-table-prefix}-layout-tool-trigger {
+    line-height: @table-head-row-height-lg - 1px;
+  }
+
+  &.@{table-prefix}-md .@{table-prefix}-container .@{pro-table-prefix}-layout-tool-trigger {
+    line-height: @table-head-row-height-md - 1px;
+  }
+
+  &.@{table-prefix}-sm .@{table-prefix}-container .@{pro-table-prefix}-layout-tool-trigger {
+    line-height: @table-head-row-height-sm - 1px;
+  }
 }
 
 .cdk-resizable {