stk-table-vue 0.2.3 → 0.2.5

package/package.json

@@ -1,61 +1,61 @@
-{
-    "name": "stk-table-vue",
-    "version": "0.2.3",
-    "description": "Simple realtime virtual table for vue3&vue2.7",
-    "main": "./lib/stk-table-vue.js",
-    "types": "./lib/StkTable/index.d.ts",
-    "packageManager": "pnpm@8.14.3",
-    "directories": {
-        "test": "test"
-    },
-    "type": "module",
-    "scripts": {
-        "dev": "vite",
-        "build": "vite build",
-        "test": "vitest"
-    },
-    "keywords": [
-        "virtual table",
-        "vue",
-        "highlight",
-        "sticky"
-    ],
-    "files": [
-        "lib",
-        "src"
-    ],
-    "author": "japlus",
-    "repository": {
-        "type": "git",
-        "url": "https://gitee.com/japlus/stk-table-vue"
-    },
-    "license": "MIT",
-    "devDependencies": {
-        "@types/d3-interpolate": "^3.0.4",
-        "@types/node": "^20.11.14",
-        "@typescript-eslint/eslint-plugin": "^6.14.0",
-        "@typescript-eslint/parser": "^6.14.0",
-        "@vitejs/plugin-vue": "^5.0.3",
-        "@vitejs/plugin-vue-jsx": "^3.1.0",
-        "@vue/test-utils": "2.4.4",
-        "eslint": "^8.55.0",
-        "eslint-config-prettier": "^9.1.0",
-        "eslint-plugin-html": "^7.1.0",
-        "eslint-plugin-prettier": "^5.0.1",
-        "eslint-plugin-vue": "^9.19.2",
-        "happy-dom": "^12.10.3",
-        "less": "^4.2.0",
-        "postcss-discard-comments": "^6.0.1",
-        "postcss-preset-env": "^9.3.0",
-        "prettier": "^3.1.1",
-        "typescript": "^5.3.3",
-        "vite": "^5.0.12",
-        "vite-plugin-dts": "^3.6.4",
-        "vitest": "^1.1.0",
-        "vue": "^3.3.9",
-        "vue-eslint-parser": "^9.3.2"
-    },
-    "dependencies": {
-        "d3-interpolate": "^3.0.1"
-    }
+{
+    "name": "stk-table-vue",
+    "version": "0.2.5",
+    "description": "Simple realtime virtual table for vue3&vue2.7",
+    "main": "./lib/stk-table-vue.js",
+    "types": "./lib/StkTable/index.d.ts",
+    "packageManager": "pnpm@8.14.3",
+    "directories": {
+        "test": "test"
+    },
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "test": "vitest"
+    },
+    "keywords": [
+        "virtual table",
+        "vue",
+        "highlight",
+        "sticky"
+    ],
+    "files": [
+        "lib",
+        "src"
+    ],
+    "author": "japlus",
+    "repository": {
+        "type": "git",
+        "url": "https://gitee.com/japlus/stk-table-vue"
+    },
+    "license": "MIT",
+    "devDependencies": {
+        "@types/d3-interpolate": "^3.0.4",
+        "@types/node": "^20.11.14",
+        "@typescript-eslint/eslint-plugin": "^6.14.0",
+        "@typescript-eslint/parser": "^6.14.0",
+        "@vitejs/plugin-vue": "^5.0.3",
+        "@vitejs/plugin-vue-jsx": "^3.1.0",
+        "@vue/test-utils": "2.4.4",
+        "eslint": "^8.55.0",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint-plugin-html": "^7.1.0",
+        "eslint-plugin-prettier": "^5.0.1",
+        "eslint-plugin-vue": "^9.19.2",
+        "happy-dom": "^12.10.3",
+        "less": "^4.2.0",
+        "postcss-discard-comments": "^6.0.1",
+        "postcss-preset-env": "^9.3.0",
+        "prettier": "^3.1.1",
+        "typescript": "^5.3.3",
+        "vite": "^5.1.4",
+        "vite-plugin-dts": "^3.7.3",
+        "vitest": "^1.1.0",
+        "vue": "^3.4.19",
+        "vue-eslint-parser": "^9.3.2"
+    },
+    "dependencies": {
+        "d3-interpolate": "^3.0.1"
+    }
 }

package/src/StkTable/StkTable.vue

@@ -61,7 +61,7 @@
                         :rowspan="virtualX_on ? 1 : col.rowSpan"
                         :colspan="col.colSpan"
                         :style="getCellStyle(1, col, rowIndex)"
-                        :title="col.title"
+                        :title="getHeaderTitle(col)"
                         :class="[
                             col.sorter ? 'sortable' : '',
                             col.dataIndex === sortCol && sortOrderIndex !== 0 && 'sorter-' + sortSwitchOrder[sortOrderIndex],
@@ -200,7 +200,7 @@ import { useHighlight } from './useHighlight';
 import { useKeyboardArrowScroll } from './useKeyboardArrowScroll';
 import { useThDrag } from './useThDrag';
 import { useVirtualScroll } from './useVirtualScroll';
-import { howDeepTheHeader, tableSort } from './utils';
+import { getColWidth, getColWidthStr, howDeepTheHeader, tableSort } from './utils';
 
 /** Generic stands for DataType */
 type DT = any;
@@ -239,7 +239,7 @@ const props = withDefaults(
         /** 列唯一键 */
         colKey?: UniqKeyProp;
         /** 空值展示文字 */
-        emptyCellText?: string;
+        emptyCellText?: string; //TODO: 支持传入方法
         /** 暂无数据兜底高度是否撑满 */
         noDataFull?: boolean;
         /** 是否展示暂无数据 */
@@ -287,6 +287,8 @@ const props = withDefaults(
         optimizeVue2Scroll?: boolean;
         /** 排序配置 */
         sortConfig?: SortConfig<DT>;
+        /** 隐藏头部title。可传入dataIndex数组 */
+        hideHeaderTitle?: boolean | string[];
     }>(),
     {
         width: '',
@@ -321,7 +323,9 @@ const props = withDefaults(
         optimizeVue2Scroll: false,
         sortConfig: () => ({
             emptyToBottom: false,
+            stringLocaleCompare: true,
         }),
+        hideHeaderTitle: false,
     },
 );
 
@@ -470,11 +474,11 @@ const {
     initVirtualScrollX,
     updateVirtualScrollY,
     updateVirtualScrollX,
-} = useVirtualScroll({ tableContainer, props, dataSourceCopy, tableHeaderLast });
+} = useVirtualScroll({ tableContainer, props, dataSourceCopy, tableHeaderLast, tableHeaders });
 
-const { getFixedStyle } = useFixedStyle({
+const { getFixedStyle } = useFixedStyle<DT>({
     props,
-    tableHeaderLast,
+    tableHeaders,
     virtualScroll,
     virtualScrollX,
     virtualX_on,
@@ -587,6 +591,7 @@ function dealColumns() {
         }
         /** 所有子节点数量 */
         let allChildrenLen = 0;
+        let allChildrenWidthSum = 0;
         arr.forEach(col => {
             // TODO: 继承父节点固定列配置
             // if (parentFixed) {
@@ -596,10 +601,15 @@ function dealColumns() {
             col.__PARENT__ = parent;
             /** 一列中的子节点数量 */
             let colChildrenLen = 1;
+            /** 多级表头的父节点宽度，通过叶子节点宽度计算得到 */
+            let colWidth = 0;
             if (col.children) {
                 // DFS
-                colChildrenLen = flat(col.children, col, depth + 1 /* , col.fixed */);
+                const [len, widthSum] = flat(col.children, col, depth + 1 /* , col.fixed */);
+                colChildrenLen = len;
+                colWidth = widthSum;
             } else {
+                colWidth = getColWidth(col);
                 tempHeaderLast.push(col); // 没有children的列作为colgroup
             }
             // 回溯
@@ -612,9 +622,14 @@ function dealColumns() {
             if (colSpan !== 1) {
                 col.colSpan = colSpan;
             }
+            if (!props.fixedMode && col.width === void 0) {
+                // 列赋值默认列宽。由于有些场景不需要设置width。
+                col.width = colWidth + 'px';
+            }
             allChildrenLen += colChildrenLen;
+            allChildrenWidthSum += colWidth;
         });
-        return allChildrenLen;
+        return [allChildrenLen, allChildrenWidthSum];
     }
 
     flat(copyColumn, null);
@@ -646,17 +661,17 @@ function colKeyGen(col: StkTableColumn<DT>) {
 
 /** 获取列宽度样式 */
 function getColWidthStyle(col: StkTableColumn<DT>) {
+    const width = getColWidthStr(col);
+    const minWidth = getColWidthStr(col, 'minWidth');
+    const maxWidth = getColWidthStr(col, 'maxWidth');
     const style: CSSProperties = {
-        width: col.width,
-        minWidth: col.minWidth,
-        maxWidth: col.maxWidth,
+        width,
+        minWidth: minWidth ?? width,
+        maxWidth: maxWidth ?? width,
     };
     if (props.colResizable) {
-        style.minWidth = col.width;
-        style.maxWidth = col.width;
-    } else {
-        style.minWidth = col.minWidth === void 0 ? col.width : col.minWidth;
-        style.maxWidth = col.maxWidth === void 0 ? col.width : col.maxWidth;
+        style.minWidth = width;
+        style.maxWidth = width;
     }
 
     return style;
@@ -686,6 +701,15 @@ function getCellStyle(tagType: 1 | 2, col: StkTableColumn<DT>, depth?: number):
     return style;
 }
 
+/** th title */
+function getHeaderTitle(col: StkTableColumn<DT>): string {
+    // 不展示title
+    if (props.hideHeaderTitle === true || (Array.isArray(props.hideHeaderTitle) && props.hideHeaderTitle.includes(col.dataIndex))) {
+        return '';
+    }
+    return col.title || '';
+}
+
 /**
  * 表头点击排序
  * @param click 是否为点击表头触发
@@ -832,7 +856,7 @@ function setCurrentRow(rowKey: string, option = { silent: false }) {
  * 设置表头排序状态
  * @param dataIndex 列字段
  * @param order 正序倒序
- * @param option.sortOption 指定排序参数
+ * @param option.sortOption 指定排序参数。同 StkTableColumn 中排序相关字段。建议从columns中find得到。
  * @param option.sort 是否触发排序-默认true
  * @param option.silent 是否禁止触发回调-默认true
  */

package/src/StkTable/types/index.ts

@@ -82,4 +82,9 @@ export type SortConfig<T extends Record<string, any>> = {
         dataIndex: keyof T;
         order: Order;
     };
+    /**
+     * string排序是否使用 String.prototype.localCompare
+     * 默认true (&$&应该false)
+     */
+    stringLocaleCompare?: boolean;
 };

package/src/StkTable/useFixedStyle.ts

@@ -4,9 +4,9 @@ import { StkTableColumn } from './types';
 import { VirtualScrollStore, VirtualScrollXStore } from './useVirtualScroll';
 import { getColWidth } from './utils';
 
-type Options = {
+type Options<T extends Record<string, any>> = {
     props: any;
-    tableHeaderLast: Ref<StkTableColumn<any>[]>;
+    tableHeaders: Ref<StkTableColumn<T>[][]>;
     virtualScroll: Ref<VirtualScrollStore>;
     virtualScrollX: Ref<VirtualScrollXStore>;
     virtualX_on: Ref<boolean>;
@@ -17,33 +17,52 @@ type Options = {
  * @param param0
  * @returns
  */
-export function useFixedStyle({ props, tableHeaderLast, virtualScroll, virtualScrollX, virtualX_on, virtualX_offsetRight }: Options) {
+export function useFixedStyle<DT extends Record<string, any>>({
+    props,
+    tableHeaders,
+    virtualScroll,
+    virtualScrollX,
+    virtualX_on,
+    virtualX_offsetRight,
+}: Options<DT>) {
     const fixedColumnsPositionStore = computed(() => {
-        const store: Record<string, number> = {};
-        const cols = [...tableHeaderLast.value];
-        let left = 0;
-        /**遍历右侧fixed时，因为left已经遍历过一次了。所以，可以拿到right遍历边界 */
-        let rightStartIndex = 0;
-        for (let i = 0; i < cols.length; i++) {
-            const item = cols[i];
-            if (item.fixed === 'left') {
-                store[item.dataIndex] = left;
-                left += getColWidth(item);
-            }
-            if (!rightStartIndex && item.fixed === 'right') {
-                rightStartIndex = i;
+        /** dataIndex 作为唯一标识 */
+        const colKeyStore: Record<string, number> = {};
+        /** 没有dataIndex 的多级表头列，使用对象引用做标识 */
+        const refStore = new WeakMap<StkTableColumn<DT>, number>();
+        tableHeaders.value.forEach(cols => {
+            let left = 0;
+            /**遍历右侧fixed时，因为left已经遍历过一次了。所以，可以拿到right遍历边界 */
+            let rightStartIndex = 0;
+            for (let i = 0; i < cols.length; i++) {
+                const item = cols[i];
+                if (item.fixed === 'left') {
+                    if (item.dataIndex) {
+                        colKeyStore[item.dataIndex] = left;
+                    } else {
+                        refStore.set(item, left);
+                    }
+                    left += getColWidth(item);
+                }
+                if (!rightStartIndex && item.fixed === 'right') {
+                    rightStartIndex = i;
+                }
             }
-        }
-        let right = 0;
-        for (let i = cols.length - 1; i >= rightStartIndex; i--) {
-            const item = cols[i];
-            if (item.fixed === 'right') {
-                store[item.dataIndex] = right;
-                right += getColWidth(item);
+            let right = 0;
+            for (let i = cols.length - 1; i >= rightStartIndex; i--) {
+                const item = cols[i];
+                if (item.fixed === 'right') {
+                    if (item.dataIndex) {
+                        colKeyStore[item.dataIndex] = right;
+                    } else {
+                        refStore.set(item, right);
+                    }
+                    right += getColWidth(item);
+                }
             }
-        }
+        });
 
-        return store;
+        return { refStore, colKeyStore };
     });
     /**
      * 固定列的style
@@ -52,9 +71,10 @@ export function useFixedStyle({ props, tableHeaderLast, virtualScroll, virtualSc
      * @param depth 深度。tagType = 1时使用
      */
     function getFixedStyle(tagType: 1 | 2, col: StkTableColumn<any>, depth = 0): CSSProperties {
-        const { fixed, dataIndex } = col;
+        const { fixed } = col;
         const isFixedLeft = fixed === 'left';
         const style: CSSProperties = {};
+        const { colKeyStore, refStore } = fixedColumnsPositionStore.value;
         // TD
         if (Is_Legacy_Mode) {
             style.position = 'relative';
@@ -83,10 +103,11 @@ export function useFixedStyle({ props, tableHeaderLast, virtualScroll, virtualSc
                     style.right = `${virtualX_offsetRight.value}px`;
                 }
             } else {
+                const lr = (col.dataIndex ? colKeyStore[col.dataIndex] : refStore.get(col)) + 'px';
                 if (isFixedLeft) {
-                    style.left = fixedColumnsPositionStore.value[dataIndex] + 'px';
+                    style.left = lr;
                 } else {
-                    style.right = fixedColumnsPositionStore.value[dataIndex] + 'px';
+                    style.right = lr;
                 }
             }
         }

package/src/StkTable/useHighlight.ts

@@ -30,9 +30,9 @@ export function useHighlight({ props, tableContainer }: Params) {
      */
     const highlightRowStore = ref<Record<UniqKey, HighlightRowStore>>({});
 
-    const highlightFrom = Highlight_Color[props.theme].from;
-    const highlightTo = Highlight_Color[props.theme].to;
-    const highlightInter = computed(() => interpolateRgb(highlightFrom, highlightTo));
+    const highlightFrom = computed(() => Highlight_Color[props.theme].from);
+    const highlightTo = computed(() => Highlight_Color[props.theme].to);
+    const highlightInter = computed(() => interpolateRgb(highlightFrom.value, highlightTo.value));
 
     /** 存放高亮行的key*/
     const highlightDimRowKeys = new Set<UniqKey>();

package/src/StkTable/useKeyboardArrowScroll.ts

@@ -44,11 +44,15 @@ export function useKeyboardArrowScroll<DT extends Record<string, any>>(
         if (!isMouseOver) return; // 不悬浮还是要触发键盘事件的
         e.preventDefault(); // 不触发键盘默认的箭头事件
 
-        const { scrollTop, rowHeight, pageSize } = virtualScroll.value;
+        const { scrollTop, rowHeight, containerHeight } = virtualScroll.value;
         const { scrollLeft } = virtualScrollX.value;
         const { headless, headerRowHeight } = props;
-        /**表头高度 */
+
+        // 这里不用virtualScroll 中的pageSize，因为我需要上一页的最后一条放在下一页的第一条
         const headerHeight = headless ? 0 : tableHeaders.value.length * (headerRowHeight || rowHeight);
+        /** 表体的page */
+        const bodyPageSize = Math.floor((containerHeight - headerHeight) / rowHeight);
+
         if (e.code === SCROLL_CODES[0]) {
             scrollTo(scrollTop - rowHeight, null);
         } else if (e.code === SCROLL_CODES[1]) {
@@ -58,9 +62,9 @@ export function useKeyboardArrowScroll<DT extends Record<string, any>>(
         } else if (e.code === SCROLL_CODES[3]) {
             scrollTo(null, scrollLeft - rowHeight);
         } else if (e.code === SCROLL_CODES[4]) {
-            scrollTo(scrollTop - rowHeight * pageSize - headerHeight, null);
+            scrollTo(scrollTop - rowHeight * bodyPageSize + headerHeight, null);
         } else if (e.code === SCROLL_CODES[5]) {
-            scrollTo(scrollTop + rowHeight * pageSize - headerHeight, null);
+            scrollTo(scrollTop + rowHeight * bodyPageSize - headerHeight, null);
         }
     }
 

package/src/StkTable/useVirtualScroll.ts

@@ -4,10 +4,11 @@ import { StkTableColumn } from './types';
 import { getColWidth } from './utils';
 
 type Option<DT extends Record<string, any>> = {
-    tableContainer: Ref<HTMLElement | undefined>;
     props: any;
+    tableContainer: Ref<HTMLElement | undefined>;
     dataSourceCopy: ShallowRef<DT[]>;
     tableHeaderLast: Ref<StkTableColumn<DT>[]>;
+    tableHeaders: Ref<StkTableColumn<DT>[][]>;
 };
 
 /** 暂存纵向虚拟滚动的数据 */
@@ -49,7 +50,13 @@ const VUE2_SCROLL_TIMEOUT_MS = 200;
  * @param param0
  * @returns
  */
-export function useVirtualScroll<DT extends Record<string, any>>({ props, tableContainer, dataSourceCopy, tableHeaderLast }: Option<DT>) {
+export function useVirtualScroll<DT extends Record<string, any>>({
+    props,
+    tableContainer,
+    dataSourceCopy,
+    tableHeaderLast,
+    tableHeaders,
+}: Option<DT>) {
     const virtualScroll = ref<VirtualScrollStore>({
         containerHeight: 0,
         rowHeight: props.rowHeight,
@@ -140,10 +147,14 @@ export function useVirtualScroll<DT extends Record<string, any>>({ props, tableC
         } else {
             containerHeight = offsetHeight || Default_Table_Height;
         }
-        Object.assign(virtualScroll.value, {
-            containerHeight,
-            pageSize: Math.ceil(containerHeight / rowHeight) + 1, // 这里最终+1，因为headless=true无头时，需要上下各预渲染一行。
-        });
+        const { headless, headerRowHeight } = props;
+        let pageSize = Math.ceil(containerHeight / rowHeight);
+        if (!headless) {
+            /** 表头高度占几行表体高度数 */
+            const headerToBodyRowHeightCount = Math.floor((tableHeaders.value.length * (headerRowHeight || rowHeight)) / rowHeight);
+            pageSize -= headerToBodyRowHeightCount; //减去表头行数
+        }
+        Object.assign(virtualScroll.value, { containerHeight, pageSize });
         updateVirtualScrollY(scrollTop);
     }
 
@@ -168,9 +179,30 @@ export function useVirtualScroll<DT extends Record<string, any>>({ props, tableC
     /** 通过滚动条位置，计算虚拟滚动的参数 */
     function updateVirtualScrollY(sTop = 0) {
         const { rowHeight, pageSize, scrollTop, startIndex: oldStartIndex } = virtualScroll.value;
-        const startIndex = Math.floor(sTop / rowHeight);
-        const offsetTop = startIndex * rowHeight; // startIndex之前的高度
+        // 先更新滚动条位置记录，其他地方可能有依赖。(stripe 时ArrowUp/Down滚动依赖)
+        virtualScroll.value.scrollTop = sTop;
+        let startIndex = Math.floor(sTop / rowHeight);
+        if (props.stripe) {
+            startIndex -= 1; //预渲染1行
+        }
+        if (startIndex < 0) {
+            startIndex = 0;
+        }
+        if (props.stripe && startIndex !== 0) {
+            const scrollRows = Math.abs(oldStartIndex - startIndex);
+            // 斑马纹情况下，每滚动偶数行才加载。防止斑马纹错位。
+            if (scrollRows < 2) {
+                return;
+            } else if (scrollRows % 2) {
+                startIndex -= 1; // 奇数-1变成偶数
+            }
+        }
         let endIndex = startIndex + pageSize;
+        if (props.stripe) {
+            // 由于上方预渲染一行，这里也要预渲染1+1行
+            endIndex += 2;
+        }
+        const offsetTop = startIndex * rowHeight; // startIndex之前的高度
         if (endIndex > dataSourceCopy.value.length) {
             endIndex = dataSourceCopy.value.length; // 溢出index修正
         }
@@ -184,13 +216,12 @@ export function useVirtualScroll<DT extends Record<string, any>>({ props, tableC
             // 向上滚动
             Object.assign(virtualScroll.value, {
                 startIndex,
-                offsetTop,
                 endIndex,
-                scrollTop: sTop,
+                offsetTop,
             });
         } else {
             // vue2向下滚动优化
-            Object.assign(virtualScroll.value, { endIndex, scrollTop: sTop });
+            virtualScroll.value.endIndex = endIndex;
             vue2ScrollYTimeout = window.setTimeout(() => {
                 Object.assign(virtualScroll.value, { startIndex, offsetTop });
             }, VUE2_SCROLL_TIMEOUT_MS);