stk-table-vue 0.4.1 → 0.4.3

package/src/StkTable/useVirtualScroll.ts

@@ -6,6 +6,7 @@ import { getCalculatedColWidth } from './utils';
 type Option<DT extends Record<string, any>> = {
     props: any;
     tableContainerRef: Ref<HTMLElement | undefined>;
+    theadRef: Ref<HTMLElement | undefined>;
     dataSourceCopy: ShallowRef<DT[]>;
     tableHeaderLast: ShallowRef<StkTableColumn<DT>[]>;
     tableHeaders: ShallowRef<StkTableColumn<DT>[][]>;
@@ -27,6 +28,8 @@ export type VirtualScrollStore = {
     offsetTop: number;
     /** 纵向滚动条位置，用于判断是横向滚动还是纵向 */
     scrollTop: number;
+    /** 总滚动高度 */
+    scrollHeight: number;
 };
 /** 暂存横向虚拟滚动的数据 */
 export type VirtualScrollXStore = {
@@ -55,10 +58,14 @@ const VUE2_SCROLL_TIMEOUT_MS = 200;
 export function useVirtualScroll<DT extends Record<string, any>>({
     props,
     tableContainerRef,
+    theadRef,
     dataSourceCopy,
     tableHeaderLast,
     tableHeaders,
 }: Option<DT>) {
+    /** 表头高度 */
+    const tableHeaderHeight = ref(props.headerRowHeight ?? props.rowHeight);
+
     const virtualScroll = ref<VirtualScrollStore>({
         containerHeight: 0,
         rowHeight: props.rowHeight,
@@ -67,6 +74,7 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         endIndex: 0,
         offsetTop: 0,
         scrollTop: 0,
+        scrollHeight: 0,
     });
 
     const virtualScrollX = ref<VirtualScrollXStore>({
@@ -106,8 +114,8 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         const tableHeaderLastValue = tableHeaderLast.value;
         if (virtualX_on.value) {
             // 虚拟横向滚动，固定列要一直保持存在
-            const leftCols = [];
-            const rightCols = [];
+            const leftCols: StkTableColumn<DT>[] = [];
+            const rightCols: StkTableColumn<DT>[] = [];
             /**
              * 存在问题：
              * table columns 从多到少时。比方原来的start=5,end=10，现在start=4,end=8。这时候endIndex就超出数组范围了。
@@ -146,6 +154,15 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         return width;
     });
 
+    /** 表头高度 */
+    function getTableHeaderHeight() {
+        const { headerRowHeight } = props;
+        return headerRowHeight * tableHeaders.value.length;
+        // if (props.virtual) {
+        // }
+        // return theadRef.value?.offsetHeight || 0;
+    }
+
     /**
      * 初始化Y虚拟滚动参数
      * @param {number} [height] 虚拟滚动的高度
@@ -156,17 +173,27 @@ export function useVirtualScroll<DT extends Record<string, any>>({
             height = 0;
         }
         if (!virtual_on.value) return;
-        const { offsetHeight, scrollTop } = tableContainerRef.value || {};
+        const { offsetHeight, scrollHeight } = tableContainerRef.value || {};
+        let scrollTop = tableContainerRef.value?.scrollTop || 0;
+
         const { rowHeight } = virtualScroll.value;
         const containerHeight = height || offsetHeight || DEFAULT_TABLE_HEIGHT;
-        const { headless, headerRowHeight } = props;
+        const { headless } = props;
         let pageSize = Math.ceil(containerHeight / rowHeight);
+        const headerHeight = getTableHeaderHeight();
+        tableHeaderHeight.value = headerHeight;
         if (!headless) {
             /** 表头高度占几行表体高度数 */
-            const headerToBodyRowHeightCount = Math.floor((tableHeaders.value.length * (headerRowHeight || rowHeight)) / rowHeight);
+            const headerToBodyRowHeightCount = Math.floor(headerHeight) / rowHeight;
             pageSize -= headerToBodyRowHeightCount; //减去表头行数
         }
-        Object.assign(virtualScroll.value, { containerHeight, pageSize });
+        /** 最大的scrollTop */
+        const maxScrollTop = dataSourceCopy.value.length * rowHeight + tableHeaderHeight.value - containerHeight;
+        if (scrollTop > maxScrollTop) {
+            /** 用于修复： 滚动条不在顶部时，表格数据变少，导致滚动条位置有误 */
+            scrollTop = maxScrollTop;
+        }
+        Object.assign(virtualScroll.value, { containerHeight, pageSize, scrollHeight });
         updateVirtualScrollY(scrollTop);
     }
 
@@ -190,11 +217,13 @@ export function useVirtualScroll<DT extends Record<string, any>>({
     /** 通过滚动条位置，计算虚拟滚动的参数 */
     function updateVirtualScrollY(sTop = 0) {
         const { rowHeight, pageSize, scrollTop, startIndex: oldStartIndex } = virtualScroll.value;
-        // 先更新滚动条位置记录，其他地方可能有依赖。(stripe 时ArrowUp/Down滚动依赖)
+        // 先更新滚动条位置记录，其他地方有依赖。(stripe 时ArrowUp/Down滚动依赖)
         virtualScroll.value.scrollTop = sTop;
 
         // 非虚拟滚动不往下执行
-        if (!virtual_on.value) return;
+        if (!virtual_on.value) {
+            return;
+        }
 
         let startIndex = Math.floor(sTop / rowHeight);
         if (startIndex < 0) {
@@ -211,11 +240,21 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         if (props.stripe) {
             endIndex += 1; // 斑马纹下多渲染一些
         }
-        const offsetTop = startIndex * rowHeight; // startIndex之前的高度
-        endIndex = Math.min(endIndex, dataSourceCopy.value.length); // 溢出index修正
+
+        // 溢出endIndex修正
+        endIndex = Math.min(endIndex, dataSourceCopy.value.length);
+
+        if (startIndex >= endIndex) {
+            // 兜底，不一定会执行到这里
+            startIndex = endIndex - pageSize;
+        }
+
         if (vue2ScrollYTimeout) {
             window.clearTimeout(vue2ScrollYTimeout);
         }
+
+        const offsetTop = startIndex * rowHeight; // startIndex之前的高度
+
         /**
          * 一次滚动大于一页时表示滚动过快，回退优化
          */

package/src/StkTable/utils/index.ts

@@ -18,13 +18,9 @@ function isEmptyValue(val: any, isNumber?: boolean) {
  * @param sortState.sortType 排序方式
  * @param newItem 要插入的数据
  * @param targetArray 表格数据
+ * @return targetArray 的浅拷贝
  */
-export function insertToOrderedArray<T extends object>(
-    sortState: SortState<keyof T>,
-    newItem: any,
-    targetArray: T[],
-    sortConfig: SortConfig<T> = {},
-) {
+export function insertToOrderedArray<T extends object>(sortState: SortState<T>, newItem: any, targetArray: T[], sortConfig: SortConfig<T> = {}) {
     const { dataIndex, order } = sortState;
     sortConfig = { emptyToBottom: false, ...sortConfig };
     let { sortType } = sortState;