stk-table-vue 0.7.1 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stk-table-vue",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "Simple realtime virtual table for vue3 and vue2.7",
   "main": "./lib/stk-table-vue.js",
   "types": "./lib/src/StkTable/index.d.ts",
@@ -59,13 +59,13 @@
     "postcss-discard-comments": "^6.0.2",
     "postcss-preset-env": "^9.5.11",
     "prettier": "^3.2.5",
-    "stk-table-vue": "^0.6.17",
+    "stk-table-vue": "^0.7.1",
     "typescript": "^5.4.5",
-    "vite": "^5.4.10",
+    "vite": "^6.3.5",
     "vite-plugin-dts": "3.9.1",
-    "vitepress": "^1.5.0",
-    "vitepress-demo-plugin": "^1.3.1",
-    "vitepress-plugin-llms": "^1.1.3",
+    "vitepress": "^1.6.3",
+    "vitepress-demo-plugin": "^1.4.5",
+    "vitepress-plugin-llms": "^1.5.1",
     "vitest": "^2.1.3",
     "vue": "^3.5.12",
     "vue-eslint-parser": "^9.4.2"

package/src/StkTable/StkTable.vue

@@ -25,7 +25,7 @@
             'header-text-overflow': props.showHeaderOverflow,
             'fixed-relative-mode': isRelativeMode,
             'auto-row-height': props.autoRowHeight,
-            'scroll-row-by-row': props.scrollRowByRow,
+            'scroll-row-by-row': isSRBRActive,
         }"
         :style="{
             '--row-height': props.autoRowHeight ? void 0 : virtualScroll.rowHeight + 'px',
@@ -38,7 +38,7 @@
     >
         <!-- 这个元素用于整数行虚拟滚动时，撑开父容器的高度） -->
         <div
-            v-if="props.scrollRowByRow && virtual"
+            v-if="isSRBRActive && virtual"
             class="row-by-row-table-height"
             :style="{ height: dataSourceCopy.length * virtualScroll.rowHeight + 'px' }"
         ></div>
@@ -67,8 +67,8 @@
                         :key="colKeyGen(col)"
                         :data-col-key="colKeyGen(col)"
                         :draggable="isHeaderDraggable(col) ? 'true' : 'false'"
-                        :rowspan="virtualX_on ? 1 : col.rowSpan"
-                        :colspan="col.colSpan"
+                        :rowspan="virtualX_on ? 1 : col.__R_SP__"
+                        :colspan="col.__C_SP__"
                         :style="cellStyleMap[TagType.TH].get(colKeyGen(col))"
                         :title="getHeaderTitle(col)"
                         :class="[
@@ -93,7 +93,7 @@
                             class="table-header-resizer left"
                             @mousedown="onThResizeMouseDown($event, col, true)"
                         ></div>
-                        <div class="table-header-cell-wrapper" :style="{ '--row-span': virtualX_on ? 1 : col.rowSpan }">
+                        <div class="table-header-cell-wrapper" :style="{ '--row-span': virtualX_on ? 1 : col.__R_SP__ }">
                             <component :is="col.customHeaderCell" v-if="col.customHeaderCell" :col="col" :colIndex="colIndex" :rowIndex="rowIndex" />
                             <template v-else>
                                 <slot name="tableHeader" :col="col">
@@ -114,7 +114,7 @@
             <!-- <tbody v-if="virtual_on" :style="{ height: `${virtualScroll.offsetTop}px` }"></tbody> -->
             <!-- <tbody :style="{ transform: `translateY(${virtualScroll.offsetTop}px)` }"> -->
             <tbody class="stk-tbody-main" @dragover="onTrDragOver" @dragenter="onTrDragEnter" @dragend="onTrDragEnd">
-                <tr v-if="virtual_on && !props.scrollRowByRow" :style="`height:${virtualScroll.offsetTop}px`" class="padding-top-tr">
+                <tr v-if="virtual_on && !isSRBRActive" :style="`height:${virtualScroll.offsetTop}px`" class="padding-top-tr">
                     <!--这个td用于配合虚拟滚动的th对应，防止列错位-->
                     <td v-if="virtualX_on && fixedMode && headless" class="vt-x-left"></td>
                     <template v-if="fixedMode && headless">
@@ -142,6 +142,7 @@
                     @dblclick="onRowDblclick($event, row, getRowIndex(rowIndex))"
                     @contextmenu="onRowMenu($event, row, getRowIndex(rowIndex))"
                     @mouseover="onTrMouseOver($event, row)"
+                    @mouseleave="onTrMouseLeave($event)"
                     @drop="onTrDrop($event, getRowIndex(rowIndex))"
                 >
                     <!--这个td用于配合虚拟滚动的th对应，防止列错位-->
@@ -155,90 +156,96 @@
                         </div>
                     </td>
                     <template v-else>
-                        <td
-                            v-for="(col, colIndex) in virtualX_columnPart"
-                            :key="colKeyGen(col)"
-                            :data-cell-key="cellKeyGen(row, col)"
-                            :style="cellStyleMap[TagType.TD].get(colKeyGen(col))"
-                            :class="[
-                                col.className,
-                                fixedColClassMap.get(colKeyGen(col)),
-                                {
-                                    'seq-column': col.type === 'seq',
-                                    active: currentSelectedCellKey === cellKeyGen(row, col),
-                                    expanded: col.type === 'expand' && (row.__EXPANDED__ ? colKeyGen(row.__EXPANDED__) === colKeyGen(col) : false),
-                                    'tree-expanded': col.type === 'tree-node' && row.__T_EXPANDED__,
-                                    'drag-row-cell': col.type === 'dragRow',
-                                },
-                            ]"
-                            @click="onCellClick($event, row, col, getRowIndex(rowIndex))"
-                            @mousedown="onCellMouseDown($event, row, col, getRowIndex(rowIndex))"
-                            @mouseenter="onCellMouseEnter($event, row, col)"
-                            @mouseleave="onCellMouseLeave($event, row, col)"
-                            @mouseover="onCellMouseOver($event, row, col)"
-                        >
-                            <template v-if="col.type === 'expand' || col.type === 'tree-node'">
-                                <div
-                                    class="table-cell-wrapper"
-                                    :title="row?.[col.dataIndex]"
-                                    :style="{ paddingLeft: row.__T_LV__ && row.__T_LV__ * 16 + 'px' }"
-                                >
+                        <template v-for="(col, colIndex) in virtualX_columnPart">
+                            <td
+                                v-if="!hiddenCellMap[rowKeyGen(row)]?.has(colKeyGen(col))"
+                                :key="colKeyGen(col)"
+                                :data-cell-key="cellKeyGen(row, col)"
+                                :style="cellStyleMap[TagType.TD].get(colKeyGen(col))"
+                                :class="[
+                                    col.className,
+                                    fixedColClassMap.get(colKeyGen(col)),
+                                    {
+                                        'cell-hover': col.mergeCells && hoverMergedCells.has(cellKeyGen(row, col)),
+                                        'cell-active': col.mergeCells && activeMergedCells.has(cellKeyGen(row, col)),
+                                        'seq-column': col.type === 'seq',
+                                        active: props.cellActive && currentSelectedCellKey === cellKeyGen(row, col),
+                                        expanded:
+                                            col.type === 'expand' && (row.__EXPANDED__ ? colKeyGen(row.__EXPANDED__) === colKeyGen(col) : false),
+                                        'tree-expanded': col.type === 'tree-node' && row.__T_EXPANDED__,
+                                        'drag-row-cell': col.type === 'dragRow',
+                                    },
+                                ]"
+                                v-bind="mergeCellsWrapper(row, col, rowIndex, colIndex)"
+                                @click="onCellClick($event, row, col, getRowIndex(rowIndex))"
+                                @mousedown="onCellMouseDown($event, row, col, getRowIndex(rowIndex))"
+                                @mouseenter="onCellMouseEnter($event, row, col)"
+                                @mouseleave="onCellMouseLeave($event, row, col)"
+                                @mouseover="onCellMouseOver($event, row, col)"
+                            >
+                                <template v-if="col.type === 'expand' || col.type === 'tree-node'">
+                                    <div
+                                        class="table-cell-wrapper"
+                                        :title="row?.[col.dataIndex]"
+                                        :style="{ paddingLeft: row.__T_LV__ && row.__T_LV__ * 16 + 'px' }"
+                                    >
+                                        <component
+                                            :is="col.customCell"
+                                            v-if="col.customCell"
+                                            :col="col"
+                                            :row="row"
+                                            :rowIndex="getRowIndex(rowIndex)"
+                                            :colIndex="colIndex"
+                                            :cellValue="row && row[col.dataIndex]"
+                                            :expanded="(row && row.__EXPANDED__) || null"
+                                            :tree-expanded="(row && row.__T_EXPANDED__) || null"
+                                        >
+                                            <template #foldIcon>
+                                                <TriangleIcon></TriangleIcon>
+                                            </template>
+                                        </component>
+                                        <template v-else>
+                                            <TriangleIcon
+                                                v-if="col.type === 'expand' || (col.type === 'tree-node' && row.children !== void 0)"
+                                                @click="triangleClick($event, row, col)"
+                                            />
+                                            <span :style="col.type === 'tree-node' && !row.children ? 'padding-left: 16px;' : ''">
+                                                {{ row?.[col.dataIndex] ?? '' }}
+                                            </span>
+                                        </template>
+                                    </div>
+                                </template>
+                                <template v-else>
                                     <component
                                         :is="col.customCell"
                                         v-if="col.customCell"
+                                        class="table-cell-wrapper"
                                         :col="col"
                                         :row="row"
                                         :rowIndex="getRowIndex(rowIndex)"
                                         :colIndex="colIndex"
                                         :cellValue="row && row[col.dataIndex]"
-                                        :expanded="(row && row.__EXPANDED__) || null"
-                                        :tree-expanded="(row && row.__T_EXPANDED__) || null"
-                                    >
-                                        <template #foldIcon>
-                                            <TriangleIcon></TriangleIcon>
+                                    />
+                                    <div v-else class="table-cell-wrapper" :title="col.type !== 'seq' ? row?.[col.dataIndex] : ''">
+                                        <template v-if="col.type === 'seq'">
+                                            {{ (props.seqConfig.startIndex || 0) + getRowIndex(rowIndex) + 1 }}
                                         </template>
-                                    </component>
-                                    <template v-else>
-                                        <TriangleIcon
-                                            v-if="col.type === 'expand' || (col.type === 'tree-node' && row.children !== void 0)"
-                                            @click="triangleClick($event, row, col)"
-                                        />
-                                        <span :style="col.type === 'tree-node' && !row.children ? 'padding-left: 16px;' : ''">
-                                            {{ row?.[col.dataIndex] ?? '' }}
-                                        </span>
-                                    </template>
-                                </div>
-                            </template>
-                            <template v-else>
-                                <component
-                                    :is="col.customCell"
-                                    v-if="col.customCell"
-                                    class="table-cell-wrapper"
-                                    :col="col"
-                                    :row="row"
-                                    :rowIndex="getRowIndex(rowIndex)"
-                                    :colIndex="colIndex"
-                                    :cellValue="row && row[col.dataIndex]"
-                                />
-                                <div v-else class="table-cell-wrapper" :title="col.type !== 'seq' ? row?.[col.dataIndex] : ''">
-                                    <template v-if="col.type === 'seq'">
-                                        {{ (props.seqConfig.startIndex || 0) + getRowIndex(rowIndex) + 1 }}
-                                    </template>
-                                    <template v-else-if="col.type === 'dragRow'">
-                                        <DragHandle @dragstart="onTrDragStart($event, getRowIndex(rowIndex))" />
-                                        <span>
-                                            {{ row?.[col.dataIndex] ?? '' }}
-                                        </span>
-                                    </template>
-                                    <template v-else>
-                                        {{ row?.[col.dataIndex] ?? getEmptyCellText(col, row) }}
-                                    </template>
-                                </div>
-                            </template>
-                        </td>
+                                        <template v-else-if="col.type === 'dragRow'">
+                                            <DragHandle @dragstart="onTrDragStart($event, getRowIndex(rowIndex))" />
+                                            <span>
+                                                {{ row?.[col.dataIndex] ?? '' }}
+                                            </span>
+                                        </template>
+                                        <template v-else>
+                                            {{ row?.[col.dataIndex] ?? getEmptyCellText(col, row) }}
+                                        </template>
+                                    </div>
+                                </template>
+                            </td>
+                        </template>
                     </template>
                 </tr>
-                <tr v-if="virtual_on && !props.scrollRowByRow" :style="`height: ${virtual_offsetBottom}px`"></tr>
+                <tr v-if="virtual_on && !isSRBRActive" :style="`height: ${virtual_offsetBottom}px`"></tr>
             </tbody>
         </table>
         <div v-if="(!dataSourceCopy || !dataSourceCopy.length) && showNoData" class="stk-table-no-data" :class="{ 'no-data-full': noDataFull }">
@@ -273,6 +280,7 @@ import {
     StkTableColumn,
     TagType,
     TreeConfig,
+    UniqKey,
     UniqKeyProp,
 } from './types/index';
 import { useAutoResize } from './useAutoResize';
@@ -283,12 +291,14 @@ import { useGetFixedColPosition } from './useGetFixedColPosition';
 import { useHighlight } from './useHighlight';
 import { useKeyboardArrowScroll } from './useKeyboardArrowScroll';
 import { useRowExpand } from './useRowExpand';
+import { useScrollRowByRow } from './useScrollRowByRow';
 import { useThDrag } from './useThDrag';
 import { useTrDrag } from './useTrDrag';
+import { useTree } from './useTree';
 import { useVirtualScroll } from './useVirtualScroll';
+import { useMergeCells } from './useMergeCells';
 import { createStkTableId, getCalculatedColWidth, getColWidth } from './utils/constRefUtils';
-import { howDeepTheHeader, tableSort, transformWidthToStr } from './utils/index';
-import { useTree } from './useTree';
+import { howDeepTheHeader, isEmptyValue, tableSort, transformWidthToStr } from './utils/index';
 
 /** Generic stands for DataType */
 type DT = any & PrivateRowDT;
@@ -331,7 +341,7 @@ const props = withDefaults(
         /** 当前行再次点击否可以取消 (rowActive=true)*/
         rowCurrentRevokable?: boolean;
         /** 表头行高。default = rowHeight */
-        headerRowHeight?: number | null;
+        headerRowHeight?: number | string | null;
         /** 虚拟滚动 */
         virtual?: boolean;
         /** x轴虚拟滚动(必须设置列宽)*/
@@ -428,8 +438,11 @@ const props = withDefaults(
          * - true: 不使用 onwheel 滚动。鼠标滚轮滚动时更加平滑。滚动过快时会白屏。
          */
         smoothScroll?: boolean;
-        /** 按整数行纵向滚动 */
-        scrollRowByRow?: boolean;
+        /**
+         * 按整数行纵向滚动
+         * - scrollbar：仅拖动滚动条生效
+         */
+        scrollRowByRow?: boolean | 'scrollbar';
     }>(),
     {
         width: '',
@@ -450,6 +463,7 @@ const props = withDefaults(
         columns: () => [],
         dataSource: () => [],
         rowKey: '',
+        colKey: void 0,
         emptyCellText: '--',
         noDataFull: false,
         showNoData: true,
@@ -648,9 +662,9 @@ const currentRow = shallowRef<DT>();
  * 保存当前选中行的key<br>
  * 原因：vue3 不用ref包dataSource时，row为原始对象，与currentItem（Ref）相比会不相等。
  */
-const currentRowKey = ref<any>(void 0);
+const currentRowKey = ref<UniqKey | undefined>();
 /** 当前选中的单元格key  */
-const currentSelectedCellKey = ref<any>(void 0);
+const currentSelectedCellKey = ref<string | undefined>();
 /** 当前hover行 */
 let currentHoverRow: DT | null = null;
 /** 当前hover的行的key */
@@ -676,7 +690,7 @@ const sortSwitchOrder: Order[] = [null, 'desc', 'asc'];
  * ]
  * ```
  */
-const tableHeaders = shallowRef<StkTableColumn<DT>[][]>([]);
+const tableHeaders = shallowRef<PrivateStkTableColumn<DT>[][]>([]);
 
 /**
  * 用于计算多级表头的tableHeaders。模拟rowSpan 位置的辅助数组。用于计算固定列。
@@ -738,6 +752,8 @@ const getEmptyCellText = computed(() => {
 
 const rowKeyGenCache = new WeakMap();
 
+const { isSRBRActive } = useScrollRowByRow({ props, tableContainerRef });
+
 const { onThDragStart, onThDragOver, onThDrop, isHeaderDraggable } = useThDrag({ props, emits, colKeyGen });
 
 const { onTrDragStart, onTrDrop, onTrDragOver, onTrDragEnd, onTrDragEnter } = useTrDrag({ props, emits, dataSourceCopy });
@@ -812,6 +828,14 @@ const { toggleExpandRow, setRowExpand } = useRowExpand({ dataSourceCopy, rowKeyG
 
 const { toggleTreeNode, setTreeExpand, flatTreeData } = useTree({ props, dataSourceCopy, rowKeyGen, emits });
 
+const { hiddenCellMap, mergeCellsWrapper, hoverMergedCells, updateHoverMergedCells, activeMergedCells, updateActiveMergedCells } = useMergeCells({
+    props,
+    tableHeaderLast,
+    rowKeyGen,
+    colKeyGen,
+    virtual_dataSourcePart,
+});
+
 watch(
     () => props.columns,
     () => {
@@ -870,7 +894,7 @@ watch(
             nextTick(() => initVirtualScrollY());
         }
         const sortColValue = sortCol.value;
-        if (sortColValue) {
+        if (!isEmptyValue(sortColValue) && !props.sortRemote) {
             // sort
             const colKey = colKeyGen.value;
             const column = tableHeaderLast.value.find(it => colKey(it) === sortColValue);
@@ -987,10 +1011,10 @@ function dealColumns() {
             const rowSpan = col.children ? 1 : maxDeep - depth + 1;
             const colSpan = colChildrenLen;
             if (rowSpan > 1) {
-                col.rowSpan = rowSpan;
+                col.__R_SP__ = rowSpan;
             }
             if (colSpan > 1) {
-                col.colSpan = colSpan;
+                col.__C_SP__ = colSpan;
             }
 
             allChildrenLen += colChildrenLen;
@@ -1148,9 +1172,11 @@ function onRowClick(e: MouseEvent, row: DT, rowIndex: number) {
         // 点击同一行，取消当前选中行。
         currentRow.value = void 0;
         currentRowKey.value = void 0;
+        updateActiveMergedCells(true);
     } else {
         currentRow.value = row;
         currentRowKey.value = rowKeyGen(row);
+        updateActiveMergedCells();
     }
     emits('current-change', e, row, { select: !isCurrentRow });
 }
@@ -1331,7 +1357,24 @@ function onTableScroll(e: Event) {
 function onTrMouseOver(_e: MouseEvent, row: DT) {
     if (currentHoverRow === row) return;
     currentHoverRow = row;
-    currentHoverRowKey.value = rowKeyGen(row);
+    const rowKey = rowKeyGen(row);
+    if (props.showTrHoverClass) {
+        currentHoverRowKey.value = rowKey;
+    }
+    if (props.rowHover) {
+        updateHoverMergedCells(rowKey);
+    }
+}
+
+function onTrMouseLeave(e: MouseEvent) {
+    if ((e.target as HTMLTableRowElement).tagName !== 'TR') return;
+    currentHoverRow = null;
+    if (props.showTrHoverClass) {
+        currentHoverRowKey.value = null;
+    }
+    if (props.rowHover) {
+        updateHoverMergedCells(void 0);
+    }
 }
 
 /**

package/src/StkTable/style.less

@@ -151,7 +151,6 @@
         }
     }
 
-    /* 斑马纹*/
     &.stripe {
         &:not(.vt-on) .stk-tbody-main tr:nth-child(even) {
             background-color: var(--stripe-bgc);
@@ -557,11 +556,17 @@
             transition: transform 0.2s ease;
         }
 
-        &:hover {
-            &::before {
-
-                border-left: 5px solid var(--fold-icon-hover-color);
-            }
+        &:hover::before {
+            border-left: 5px solid var(--fold-icon-hover-color);
         }
     }
+
+    td.cell-hover {
+        background-color: var(--tr-hover-bgc);
+    }
+    
+    td.cell-active {
+        background-color: var(--tr-active-bgc);
+    }
+
 }

package/src/StkTable/types/index.ts

@@ -1,4 +1,4 @@
-import { Component, ConcreteComponent } from 'vue';
+import { Component, ComputedRef, ConcreteComponent } from 'vue';
 
 /** 排序方式，asc-正序，desc-倒序，null-默认顺序 */
 export type Order = null | 'asc' | 'desc';
@@ -26,6 +26,15 @@ export type CustomHeaderCellProps<T extends Record<string, any>> = {
     colIndex: number;
 };
 
+export type MergeCellsParam<T extends Record<string, any>> = {
+    row: T;
+    col: StkTableColumn<T>;
+    rowIndex: number;
+    colIndex: number;
+};
+
+export type MergeCellsFn<T extends Record<string, any>> = (data: MergeCellsParam<T>) => { rowspan?: number; colspan?: number } | undefined;
+
 /**
  * 自定义渲染单元格
  *
@@ -82,8 +91,6 @@ export type StkTableColumn<T extends Record<string, any>> = {
     sortConfig?: Pick<SortConfig<T>, 'emptyToBottom' | 'stringLocaleCompare'>;
     /** 固定列 */
     fixed?: 'left' | 'right' | null;
-    /** private */ rowSpan?: number;
-    /** private */ colSpan?: number;
     /**
      * 自定义 td 渲染内容。
      *
@@ -106,17 +113,23 @@ export type StkTableColumn<T extends Record<string, any>> = {
     customHeaderCell?: CustomCell<CustomHeaderCellProps<T>, T>;
     /** 二级表头 */
     children?: StkTableColumn<T>[];
+    /** 单元格合并 */
+    mergeCells?: MergeCellsFn<T>;
 };
 
 /** private StkTableColumn type. Add some private key */
 export type PrivateStkTableColumn<T extends Record<string, any>> = StkTableColumn<T> & {
+    /** header rowSpan */
+    __R_SP__?: number;
+    /** header colSpan */
+    __C_SP__?: number;
     /**
-     * 父节点引用
+     * parent not ref
      * @private
      */
     __PARENT__?: StkTableColumn<T> | null;
     /**
-     * 保存计算的宽度。横向虚拟滚动用。
+     * Save the calculated width. Used for horizontal virtual scrolling.
      * @private
      */
     __WIDTH__?: number;
@@ -258,3 +271,9 @@ export type AutoRowHeightConfig<DT> = {
 export type ColResizableConfig<DT extends Record<string, any>> = {
     disabled: (col: StkTableColumn<DT>) => boolean;
 };
+
+export type RowKeyGen = (row: any) => UniqKey;
+
+export type ColKeyGen = ComputedRef<(col: StkTableColumn<any>) => UniqKey>;
+
+export type CellKeyGen = (row: any, col: StkTableColumn<any>) => string;