fix(comp:table): calculate the scroll postion when container resize (#…

…956)
IDuxFE · Jun 15, 2022 · 5fffb9b · 5fffb9b
1 parent 6fef486
commit 5fffb9b
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 13 deletions.
diff --git a/packages/components/table/src/main/MainTable.tsx b/packages/components/table/src/main/MainTable.tsx
@@ -16,7 +16,6 @@ import {
   provide,
   ref,
   watch,
-  watchEffect,
 } from 'vue'
 
 import { isNumber } from 'lodash-es'
@@ -91,14 +90,7 @@ export default defineComponent({
         }
       })
 
-      watchEffect(() => {
-        const element = mainTableRef.value
-        if (scrollWidth.value) {
-          onResize(element, handleWrapperResize)
-        } else {
-          offResize(element, handleWrapperResize)
-        }
-      })
+      onResize(mainTableRef.value, handleWrapperResize)
     })
 
     onBeforeUnmount(() => offResize(mainTableRef.value, handleWrapperResize))

diff --git a/packages/components/table/style/index.less b/packages/components/table/style/index.less
@@ -37,6 +37,10 @@
     &::after {
       right: 0;
     }
+
+    .cdk-virtual-scroll-holder {
+      overflow-y: scroll !important;
+    }
   }
 
   table {
@@ -235,7 +239,7 @@
   // --------- Filterable ---------
 
   &-filterable-trigger {
-    font-size: 12px;
+    font-size: @table-filterable-trigger-font-size;
 
     &-footer {
       border-top: @table-border-width @table-border-style @table-border-color;
@@ -293,7 +297,7 @@
 
     .@{spin-prefix} {
       height: 100%;
-      
+
       &-container {
         display: flex;
         flex-direction: column;

diff --git a/packages/components/table/style/themes/default.variable.less b/packages/components/table/style/themes/default.variable.less
@@ -45,8 +45,8 @@
 @table-pagination-margin: @spacing-lg 0;
 
 @table-icon-margin: @spacing-xs;
-
-@table-expandable-icon-size: @font-size-md;
+@table-filterable-trigger-font-size: @font-size-md;
+@table-expandable-icon-size: @font-size-lg;
 @table-expandable-icon-color: @color-black;
 
 @table-sticky-scroll-bar-background: fade(#000, 35%);

diff --git a/packages/components/table/style/themes/seer.variable.less b/packages/components/table/style/themes/seer.variable.less
@@ -24,4 +24,6 @@
 
 @table-body-hover-background: @color-graphite-l50;
 
+@table-filterable-trigger-font-size: @font-size-sm;
+@table-expandable-icon-size: @font-size-md;
 @table-expandable-icon-color: @color-graphite;