vxe-table 4.23.0-beta.0 → 4.23.0-beta.2

package/packages/table/src/util.ts

@@ -47,9 +47,17 @@ export function createInternalData (): TableInternalData {
     currentRow: null,
     currentCol: null,
 
-    // 最后滚动位置
-    lastScrollLeft: 0,
+    // resizeObserver: undefined,
+
+    // 滚动条
+    // scrollObserver: undefined,
+    // isThumbDrag: false,
+    thumbDragOffset: 0,
+    yThumbTop: 0,
+    xThumbLeft: 0,
     lastScrollTop: 0,
+    lastScrollLeft: 0,
+
     // 单选框属性，已选中保留的行
     radioReserveRow: null,
     // 复选框属性，已选中保留的行集合
@@ -199,6 +207,11 @@ export function createReactData (): TableReactData {
     scrollbarWidth: 0,
     // 横向滚动条的高度
     scrollbarHeight: 0,
+
+    // 滚动条
+    yThumbHeight: 0,
+    xThumbWidth: 0,
+
     // 行高
     rowHeight: 0,
     // 表格父容器的高度

package/packages/ui/index.ts

@@ -269,16 +269,14 @@ VxeUI.setConfig({
       oSize: 0
     },
     scrollbarConfig: {
-      // width: 14,
-      // height: 14,
-      x: {
-        // position: 'bottom',
-        visible: true
-      },
-      y: {
-        // position: 'right',
-        visible: true
-      }
+      // xConfig: {
+      //   // position: 'bottom',
+      //   // visible: true
+      // },
+      // yConfig: {
+      //   // position: 'right',
+      //   // visible: true
+      // }
     },
     undoRedoHistoryConfig: {
       stackSize: 50

package/styles/components/table.scss

@@ -2718,3 +2718,68 @@ div.vxe-table--tooltip-wrapper {
     outline: 0;
   }
 }
+
+// 滚动条
+.vxe-table--layout-wrapper {
+  &.is--virtual-scrollbar {
+    &.ov-padding {
+      &.overflow-x {
+        &.sx-pos--top {
+          & > .vxe-table--viewport-wrapper {
+            padding-top: var(--vxe-ui-scrollbar-x-height);
+          }
+        }
+        &.sx-pos--bottom {
+          & > .vxe-table--viewport-wrapper {
+            padding-bottom: var(--vxe-ui-scrollbar-x-height);
+          }
+        }
+      }
+      &.overflow-y {
+        &.sy-pos--left {
+          & > .vxe-table--viewport-wrapper {
+            padding-left: var(--vxe-ui-scrollbar-y-width);
+          }
+        }
+        &.sy-pos--right {
+          & > .vxe-table--viewport-wrapper {
+            padding-right: var(--vxe-ui-scrollbar-y-width);
+          }
+        }
+      }
+    }
+    &.ov-x--auto-hide {
+      &:hover {
+        & > .vxe-scrollbar {
+          & > .vxe-scrollbar--track-x {
+            opacity: 1;
+          }
+        }
+      }
+      & > .vxe-scrollbar {
+        & > .vxe-scrollbar--track-x {
+          opacity: 0;
+          @include baseMixin.createAnimationTransition(opacity, 0.8s);
+        }
+      }
+    }
+    &.ov-y--auto-hide {
+      &:hover {
+        & > .vxe-scrollbar {
+          & > .vxe-scrollbar--track-y {
+            opacity: 1;
+          }
+        }
+      }
+      & > .vxe-scrollbar {
+        & > .vxe-scrollbar--track-y {
+          opacity: 0;
+          @include baseMixin.createAnimationTransition(opacity, 0.8s);
+        }
+      }
+    }
+  }
+  & > .vxe-scrollbar {
+    position: unset;
+  }
+}