stk-table-vue 0.0.2 → 0.2.0

package/src/StkTable/useKeyboardArrowScroll.ts

@@ -1,19 +1,26 @@
 import { Ref, onBeforeUnmount, onMounted } from 'vue';
+import { StkTableColumn } from './types';
 import { VirtualScrollStore, VirtualScrollXStore } from './useVirtualScroll';
 
-const ARROW_CODES = ['ArrowUp', 'ArrowRight', 'ArrowDown', 'ArrowLeft'];
+/** 翻页按键 */
+const SCROLL_CODES = ['ArrowUp', 'ArrowRight', 'ArrowDown', 'ArrowLeft', 'PageUp', 'PageDown'] as const;
 
-type Options = {
-    scrollTo: (x: number | null, y: number | null) => void;
+type Options<DT extends Record<string, any>> = {
+    props: any;
+    scrollTo: (y: number | null, x: number | null) => void;
     virtualScroll: Ref<VirtualScrollStore>;
     virtualScrollX: Ref<VirtualScrollXStore>;
+    tableHeaders: Ref<StkTableColumn<DT>[][]>;
 };
 /**
  * 按下键盘箭头滚动。只有悬浮在表体上才能生效键盘。
  *
  * 在低版本浏览器中，虚拟滚动时，使用键盘滚动，等选中的行消失在视口外时，滚动会失效。
  */
-export function useKeyboardArrowScroll(targetElement: Ref<HTMLElement | undefined>, { scrollTo, virtualScroll, virtualScrollX }: Options) {
+export function useKeyboardArrowScroll<DT extends Record<string, any>>(
+    targetElement: Ref<HTMLElement | undefined>,
+    { props, scrollTo, virtualScroll, virtualScrollX, tableHeaders }: Options<DT>,
+) {
     /** 检测鼠标是否悬浮在表格体上 */
     let isMouseOver = false;
 
@@ -33,20 +40,27 @@ export function useKeyboardArrowScroll(targetElement: Ref<HTMLElement | undefine
 
     /** 键盘按下事件 */
     function handleKeydown(e: KeyboardEvent) {
-        if (!ARROW_CODES.includes(e.code)) return;
+        if (!SCROLL_CODES.includes(e.code as any)) return;
         if (!isMouseOver) return; // 不悬浮还是要触发键盘事件的
         e.preventDefault(); // 不触发键盘默认的箭头事件
 
-        const { scrollTop, rowHeight } = virtualScroll.value;
+        const { scrollTop, rowHeight, pageSize } = virtualScroll.value;
         const { scrollLeft } = virtualScrollX.value;
-        if (e.code === ARROW_CODES[0]) {
+        const { headless, headerRowHeight } = props;
+        /**表头高度 */
+        const headerHeight = headless ? 0 : tableHeaders.value.length * (headerRowHeight || rowHeight);
+        if (e.code === SCROLL_CODES[0]) {
             scrollTo(scrollTop - rowHeight, null);
-        } else if (e.code === ARROW_CODES[1]) {
+        } else if (e.code === SCROLL_CODES[1]) {
             scrollTo(null, scrollLeft + rowHeight);
-        } else if (e.code === ARROW_CODES[2]) {
+        } else if (e.code === SCROLL_CODES[2]) {
             scrollTo(scrollTop + rowHeight, null);
-        } else if (e.code === ARROW_CODES[3]) {
+        } else if (e.code === SCROLL_CODES[3]) {
             scrollTo(null, scrollLeft - rowHeight);
+        } else if (e.code === SCROLL_CODES[4]) {
+            scrollTo(scrollTop - rowHeight * pageSize - headerHeight, null);
+        } else if (e.code === SCROLL_CODES[5]) {
+            scrollTo(scrollTop + rowHeight * pageSize - headerHeight, null);
         }
     }
 

package/src/StkTable/useVirtualScroll.ts

@@ -45,12 +45,15 @@ function getCalcWidth<DT extends Record<string, any>>(col: StkTableColumn<DT>) {
     return parseInt(col.minWidth || col.width || Default_Col_Width);
 }
 
+/** vue2 优化滚动回收延时 */
+const VUE2_SCROLL_TIMEOUT_MS = 200;
+
 /**
  * 虚拟滚动
  * @param param0
  * @returns
  */
-export function useVirtualScroll<DT extends Record<string, any>>({ tableContainer, props, dataSourceCopy, tableHeaderLast }: Option<DT>) {
+export function useVirtualScroll<DT extends Record<string, any>>({ props, tableContainer, dataSourceCopy, tableHeaderLast }: Option<DT>) {
     const virtualScroll = ref<VirtualScrollStore>({
         containerHeight: 0,
         rowHeight: props.rowHeight,
@@ -88,7 +91,7 @@ export function useVirtualScroll<DT extends Record<string, any>>({ tableContaine
 
     const virtualX_on = computed(() => {
         return (
-            props.virtualX && tableHeaderLast.value.reduce((sum, col) => (sum += getCalcWidth(col)), 0) > virtualScrollX.value.containerWidth * 1.5
+            props.virtualX && tableHeaderLast.value.reduce((sum, col) => (sum += getCalcWidth(col)), 0) > virtualScrollX.value.containerWidth + 100
         );
     });
 
@@ -166,24 +169,46 @@ export function useVirtualScroll<DT extends Record<string, any>>({ tableContaine
         initVirtualScrollX();
     }
 
+    let vue2ScrollYTimeout: null | number = null;
+
     /** 通过滚动条位置，计算虚拟滚动的参数 */
     function updateVirtualScrollY(sTop = 0) {
-        const { rowHeight, pageSize } = virtualScroll.value;
+        const { rowHeight, pageSize, scrollTop, startIndex: oldStartIndex } = virtualScroll.value;
         const startIndex = Math.floor(sTop / rowHeight);
+        const offsetTop = startIndex * rowHeight; // startIndex之前的高度
         let endIndex = startIndex + pageSize;
         if (endIndex > dataSourceCopy.value.length) {
             endIndex = dataSourceCopy.value.length; // 溢出index修正
         }
-        Object.assign(virtualScroll.value, {
-            startIndex,
-            offsetTop: startIndex * rowHeight, // startIndex之前的高度
-            endIndex,
-        });
+        if (vue2ScrollYTimeout) {
+            window.clearTimeout(vue2ScrollYTimeout);
+        }
+        /**
+         * 一次滚动大于一页时表示滚动过快，回退优化
+         */
+        if (!props.optimizeVue2Scroll || sTop <= scrollTop || Math.abs(oldStartIndex - startIndex) >= pageSize) {
+            // 向上滚动
+            Object.assign(virtualScroll.value, {
+                startIndex,
+                offsetTop,
+                endIndex,
+                scrollTop: sTop,
+            });
+        } else {
+            // vue2向下滚动优化
+            Object.assign(virtualScroll.value, { endIndex, scrollTop: sTop });
+            vue2ScrollYTimeout = window.setTimeout(() => {
+                Object.assign(virtualScroll.value, { startIndex, offsetTop });
+            }, VUE2_SCROLL_TIMEOUT_MS);
+        }
     }
 
+    let vue2ScrollXTimeout: null | number = null;
+
     /** 通过横向滚动条位置，计算横向虚拟滚动的参数 */
     function updateVirtualScrollX(sLeft = 0) {
         const headerLength = tableHeaderLast.value?.length;
+        const { scrollLeft } = virtualScrollX.value;
         if (!headerLength) return;
         let startIndex = 0;
         let offsetLeft = 0;
@@ -206,7 +231,7 @@ export function useVirtualScroll<DT extends Record<string, any>>({ tableContaine
         // -----
         colWidthSum = 0;
         let endIndex = headerLength;
-        for (let colIndex = startIndex; colIndex < headerLength; colIndex++) {
+        for (let colIndex = startIndex + 1; colIndex < headerLength; colIndex++) {
             const col = tableHeaderLast.value[colIndex];
             colWidthSum += getCalcWidth(col);
             // 列宽大于容器宽度则停止
@@ -218,7 +243,22 @@ export function useVirtualScroll<DT extends Record<string, any>>({ tableContaine
         if (endIndex > headerLength) {
             endIndex = headerLength;
         }
-        Object.assign(virtualScrollX.value, { startIndex, endIndex, offsetLeft });
+
+        if (vue2ScrollXTimeout) {
+            window.clearTimeout(vue2ScrollXTimeout);
+        }
+
+        // <= 等于是因为初始化时要赋值
+        if (!props.optimizeVue2Scroll || sLeft <= scrollLeft) {
+            // 向左滚动
+            Object.assign(virtualScrollX.value, { startIndex, endIndex, offsetLeft, scrollLeft: sLeft });
+        } else {
+            //vue2 向右滚动 优化
+            Object.assign(virtualScrollX.value, { endIndex, scrollLeft: sLeft });
+            vue2ScrollXTimeout = window.setTimeout(() => {
+                Object.assign(virtualScrollX.value, { startIndex, offsetLeft });
+            }, VUE2_SCROLL_TIMEOUT_MS);
+        }
     }
 
     return {

package/src/vite-env.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="vite/client" />
 declare module '*.vue' {
     import { DefineComponent } from 'vue';
     const component: DefineComponent<object, object, any>;