stk-table-vue 0.7.2 → 0.8.0

package/src/StkTable/StkTable.vue

@@ -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">
@@ -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,87 +156,93 @@
                         </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 && !isSRBRActive" :style="`height: ${virtual_offsetBottom}px`"></tr>
@@ -273,6 +280,7 @@ import {
     StkTableColumn,
     TagType,
     TreeConfig,
+    UniqKey,
     UniqKeyProp,
 } from './types/index';
 import { useAutoResize } from './useAutoResize';
@@ -288,6 +296,7 @@ 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, isEmptyValue, tableSort, transformWidthToStr } from './utils/index';
 
@@ -454,6 +463,7 @@ const props = withDefaults(
         columns: () => [],
         dataSource: () => [],
         rowKey: '',
+        colKey: void 0,
         emptyCellText: '--',
         noDataFull: false,
         showNoData: true,
@@ -652,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 */
@@ -680,7 +690,7 @@ const sortSwitchOrder: Order[] = [null, 'desc', 'asc'];
  * ]
  * ```
  */
-const tableHeaders = shallowRef<StkTableColumn<DT>[][]>([]);
+const tableHeaders = shallowRef<PrivateStkTableColumn<DT>[][]>([]);
 
 /**
  * 用于计算多级表头的tableHeaders。模拟rowSpan 位置的辅助数组。用于计算固定列。
@@ -818,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,
     () => {
@@ -993,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;
@@ -1154,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 });
 }
@@ -1337,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;

package/src/StkTable/useHighlight.ts

@@ -1,8 +1,8 @@
-// import { interpolateRgb } from 'd3-interpolate';
 import { Ref, computed } from 'vue';
 import { HIGHLIGHT_CELL_CLASS, HIGHLIGHT_COLOR, HIGHLIGHT_DURATION, HIGHLIGHT_ROW_CLASS } from './const';
 import { HighlightConfig, UniqKey } from './types';
 import { HighlightDimCellOption, HighlightDimRowOption } from './types/highlightDimOptions';
+import { pureCellKeyGen } from './utils';
 
 type Params = {
     props: any;
@@ -108,7 +108,7 @@ export function useHighlight({ props, stkTableId, tableContainerRef }: Params) {
      * @param option.duration 动画时长。method='css'状态下，用于移除class，如果传入了className则需要与自定义的动画时间一致。
      */
     function setHighlightDimCell(rowKeyValue: UniqKey, colKeyValue: string, option: HighlightDimCellOption = {}) {
-        const cellEl = tableContainerRef.value?.querySelector<HTMLElement>(`[data-cell-key="${rowKeyValue}--${colKeyValue}"]`);
+        const cellEl = tableContainerRef.value?.querySelector<HTMLElement>(`[data-cell-key="${pureCellKeyGen(rowKeyValue, colKeyValue)}"]`);
         if (!cellEl) return;
         const { className, method, duration, keyframe } = {
             className: HIGHLIGHT_CELL_CLASS,

package/src/StkTable/useMergeCells.ts

@@ -0,0 +1,125 @@
+import { ref, ShallowRef, watch } from 'vue';
+import { ColKeyGen, MergeCellsParam, PrivateStkTableColumn, RowKeyGen, UniqKey } from './types';
+import { pureCellKeyGen } from './utils';
+
+export function useMergeCells({
+    props,
+    tableHeaderLast,
+    rowKeyGen,
+    colKeyGen,
+    virtual_dataSourcePart,
+}: {
+    props: any;
+    tableHeaderLast: ShallowRef<PrivateStkTableColumn<any>[]>;
+    rowKeyGen: RowKeyGen;
+    colKeyGen: ColKeyGen;
+    virtual_dataSourcePart: ShallowRef<any[]>;
+}) {
+    /**
+     * which cell need be hidden
+     * - key: rowKey
+     * - value: colKey Set
+     */
+    const hiddenCellMap = ref<Record<UniqKey, Set<UniqKey>>>({});
+    /**
+     * hover other row and rowspan cell should be highlighted
+     * - key: rowKey
+     * - value: cellKey Set
+     */
+    const hoverRowMap = ref<Record<UniqKey, Set<string>>>({});
+
+    /** hover current row , which rowspan cells should be highlight */
+    const hoverMergedCells = ref(new Set<string>());
+    /** click current row , which rowspan cells should be highlight */
+    const activeMergedCells = ref(new Set<string>());
+
+    watch([virtual_dataSourcePart, tableHeaderLast], () => {
+        hiddenCellMap.value = {};
+        hoverRowMap.value = {};
+    });
+
+    /** 抽象隐藏单元格的逻辑 */
+    function hideCells(rowKey: UniqKey, startIndex: number, count: number, isSelfRow = false, mergeCellKey: string) {
+        for (let i = startIndex; i < startIndex + count; i++) {
+            if (!isSelfRow || i !== startIndex) {
+                // 自己不需要隐藏
+                const nextCol = tableHeaderLast.value[i];
+                if (!nextCol) break;
+                const nextColKey = colKeyGen.value(nextCol);
+                if (!hiddenCellMap.value[rowKey]) hiddenCellMap.value[rowKey] = new Set();
+                hiddenCellMap.value[rowKey].add(nextColKey);
+            }
+
+            // if other row hovered, the rowspan cell need to be highlight
+            if (!hoverRowMap.value[rowKey]) hoverRowMap.value[rowKey] = new Set();
+            hoverRowMap.value[rowKey].add(mergeCellKey);
+        }
+    }
+
+    /**
+     * calculate colspan and rowspan
+     * @param row
+     * @param col
+     * @param rowIndex
+     * @param colIndex
+     * @returns
+     */
+    function mergeCellsWrapper(
+        row: MergeCellsParam<any>['row'],
+        col: MergeCellsParam<any>['col'],
+        rowIndex: MergeCellsParam<any>['rowIndex'],
+        colIndex: MergeCellsParam<any>['colIndex'],
+    ): { colspan?: number; rowspan?: number } | undefined {
+        if (!col.mergeCells) return;
+
+        let { colspan, rowspan } = col.mergeCells({ row, col, rowIndex, colIndex }) || {};
+
+        // default colspan and rowspan is 1
+        colspan = colspan || 1;
+        rowspan = rowspan || 1;
+
+        if (colspan === 1 && rowspan === 1) return;
+
+        const rowKey = rowKeyGen(row);
+        const colKey = colKeyGen.value(col);
+        const dataSourceSlice = virtual_dataSourcePart.value.slice();
+        const curColIndex = tableHeaderLast.value.findIndex(item => colKeyGen.value(item) === colKey);
+        const curRowIndex = dataSourceSlice.findIndex(item => rowKeyGen(item) === rowKey);
+        const mergedCellKey = pureCellKeyGen(rowKey, colKey);
+
+        if (curRowIndex === -1) return;
+
+        for (let i = curRowIndex; i < curRowIndex + rowspan; i++) {
+            const row = dataSourceSlice[i];
+            if (!row) break;
+            const rKey = rowKeyGen(row);
+            const isSelfRow = i === curRowIndex;
+            hideCells(rKey, curColIndex, colspan, isSelfRow, mergedCellKey);
+        }
+
+        return { colspan, rowspan };
+    }
+
+    function updateHoverMergedCells(rowKey: UniqKey | undefined) {
+        const set = rowKey === void 0 ? null : hoverRowMap.value[rowKey];
+        hoverMergedCells.value = set || new Set();
+    }
+
+    function updateActiveMergedCells(clear?: boolean) {
+        if (!props.rowActive) return;
+        if (clear) {
+            activeMergedCells.value.clear();
+        } else {
+            activeMergedCells.value = new Set(hoverMergedCells.value);
+        }
+    }
+
+    return {
+        hiddenCellMap,
+        mergeCellsWrapper,
+        hoverMergedCells,
+        updateHoverMergedCells,
+        activeMergedCells,
+        updateActiveMergedCells,
+    };
+}

package/src/StkTable/useRowExpand.ts

@@ -1,9 +1,9 @@
 import { ShallowRef } from 'vue';
-import { ExpandedRow, PrivateRowDT, StkTableColumn, UniqKey } from './types';
+import { ExpandedRow, PrivateRowDT, RowKeyGen, StkTableColumn, UniqKey } from './types';
 import { EXPANDED_ROW_KEY_PREFIX } from './const';
 type DT = PrivateRowDT;
 type Option<DT extends Record<string, any>> = {
-    rowKeyGen: (row: any) => UniqKey;
+    rowKeyGen: RowKeyGen;
     dataSourceCopy: ShallowRef<DT[]>;
     emits: any;
 };

package/src/StkTable/useScrollRowByRow.ts

@@ -8,8 +8,10 @@ type Params = {
 export function useScrollRowByRow({ props, tableContainerRef }: Params) {
     let isMouseDown = false;
     let isAddListeners = false;
+    /** record the last scroll bar position */
+    let lastScrollTop = 0;
 
-    /**记录滚动条是否正在被拖动 */
+    /** record is the scroll bar is dragging */
     const isDragScroll = ref(false);
     const onlyDragScroll = computed(() => props.scrollRowByRow === 'scrollbar');
 
@@ -21,16 +23,13 @@ export function useScrollRowByRow({ props, tableContainerRef }: Params) {
         return props.scrollRowByRow;
     });
 
-    watch(
-        () => onlyDragScroll.value,
-        v => {
-            if (v) {
-                addEventListener();
-            } else {
-                removeEventListener();
-            }
-        },
-    );
+    watch(onlyDragScroll, v => {
+        if (v) {
+            addEventListener();
+        } else {
+            removeEventListener();
+        }
+    });
 
     onMounted(() => {
         addEventListener();
@@ -59,17 +58,21 @@ export function useScrollRowByRow({ props, tableContainerRef }: Params) {
         isAddListeners = false;
     }
 
-    function handleMouseDown() {
+    function handleMouseDown(e: Event) {
         isMouseDown = true;
+        lastScrollTop = (e.target as HTMLElement).scrollTop;
     }
 
     function handleMouseUp() {
         isMouseDown = false;
         isDragScroll.value = false;
+        lastScrollTop = 0;
     }
 
-    function handleScroll() {
-        if (!isMouseDown) return;
+    function handleScroll(e: Event) {
+        const scrollTop = (e.target as HTMLElement).scrollTop;
+        // if scrollTop === lastScrollTop means horizontal scroll
+        if (!isMouseDown || scrollTop === lastScrollTop) return;
         isDragScroll.value = true;
     }
     return { isSRBRActive, isDragScroll };

package/src/StkTable/useThDrag.ts

@@ -1,17 +1,17 @@
-import { computed, ComputedRef } from 'vue';
-import { StkTableColumn, UniqKey } from './types';
+import { computed } from 'vue';
+import { ColKeyGen, StkTableColumn } from './types';
 import { isEmptyValue } from './utils';
 
-type Params<T extends Record<string, any>> = {
+type Params = {
     props: any;
     emits: any;
-    colKeyGen: ComputedRef<(col: StkTableColumn<T>) => UniqKey>;
+    colKeyGen: ColKeyGen;
 };
 /**
  * 列顺序拖动
  * @returns
  */
-export function useThDrag<DT extends Record<string, any>>({ props, emits, colKeyGen }: Params<DT>) {
+export function useThDrag({ props, emits, colKeyGen }: Params) {
     const findParentTH = (e: DragEvent) => (e.target as HTMLElement).closest('th');
 
     const dragConfig = computed(() => {
@@ -97,6 +97,6 @@ export function useThDrag<DT extends Record<string, any>>({ props, emits, colKey
         onThDragOver,
         onThDrop,
         /** 是否可拖拽 */
-        isHeaderDraggable: (col: StkTableColumn<DT>) => dragConfig.value.draggable && !dragConfig.value.disabled(col),
+        isHeaderDraggable: (col: StkTableColumn<any>) => dragConfig.value.draggable && !dragConfig.value.disabled(col),
     };
 }