stk-table-vue 0.3.1 → 0.3.3

package/lib/style.css

@@ -11,6 +11,7 @@
   --border-color:#e8e8f4;
   --border-width:1px;
   --td-bgc:#fff;
+  --td-hover-color:#71a2fd;
   --th-bgc:#fafafc;
   --th-color:#272841;
   --tr-active-bgc:#e6f7ff;
@@ -44,6 +45,7 @@
   --th-bgc:#202029;
   --th-color:#C0C0D1;
   --td-bgc:#1b1b24;
+  --td-hover-color:#70a6ff;
   --border-color:#292933;
   --tr-active-bgc:#283f63;
   --tr-hover-bgc:#1a2b46;
@@ -86,23 +88,109 @@
 .stk-table.border thead tr:first-child th{
   background-image:var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
 }
-.stk-table.border.virtual-x .virtual-x-left{
-  background:none;
-  pointer-events:none;
-}
-.stk-table.border.virtual-x .virtual-x-right{
-  padding:0;
-  background:none;
-  pointer-events:none;
-}
 .stk-table.border-body-v tbody{
   --bg-border-bottom:linear-gradient(transparent, transparent);
 }
-.stk-table.stripe{
-}
 .stk-table.stripe tbody tr:nth-child(odd){
   background-color:var(--stripe-bgc);
 }
+.stk-table.cell-hover tbody td:hover{
+  box-shadow:inset 0 0 0 2px var(--td-hover-color);
+}
+.stk-table.text-overflow .table-cell-wrapper{
+  white-space:nowrap;
+  overflow:hidden;
+  text-overflow:ellipsis;
+}
+.stk-table.header-text-overflow .table-header-cell-wrapper{
+  white-space:nowrap;
+  overflow:hidden;
+}
+.stk-table.header-text-overflow .table-header-title{
+  text-overflow:ellipsis;
+  overflow:hidden;
+}
+.stk-table.virtual{
+}
+.stk-table.virtual .table-header-cell-wrapper{
+  overflow:hidden;
+  max-height:var(--header-row-height);
+}
+.stk-table.virtual tbody td{
+  height:var(--row-height);
+  line-height:1;
+}
+.stk-table.virtual tbody td .table-cell-wrapper{
+  max-height:var(--row-height);
+  overflow:hidden;
+}
+.stk-table.virtual .padding-top-tr td{
+  height:0;
+}
+.stk-table th,
+.stk-table td{
+  z-index:1;
+  font-size:14px;
+  box-sizing:border-box;
+  padding:0 var(--cell-padding-x);
+}
+.stk-table th{
+  color:var(--th-color);
+  background-color:inherit;
+}
+.stk-table th.sortable{
+  cursor:pointer;
+}
+.stk-table th:not(.sorter-desc):not(.sorter-asc):hover .table-header-sorter .arrow-up{
+  fill:var(--sort-arrow-hover-color);
+}
+.stk-table th:not(.sorter-desc):not(.sorter-asc):hover .table-header-sorter .arrow-down{
+  fill:var(--sort-arrow-hover-color);
+}
+.stk-table th.sorter-desc .table-header-sorter{
+  display:inline;
+  display:initial;
+}
+.stk-table th.sorter-desc .table-header-sorter .arrow-up{
+  fill:var(--sort-arrow-active-sub-color);
+}
+.stk-table th.sorter-desc .table-header-sorter .arrow-down{
+  fill:var(--sort-arrow-active-color);
+}
+.stk-table th.sorter-asc .table-header-sorter{
+  display:inline;
+  display:initial;
+}
+.stk-table th.sorter-asc .table-header-sorter .arrow-up{
+  fill:var(--sort-arrow-active-color);
+}
+.stk-table th.sorter-asc .table-header-sorter .arrow-down{
+  fill:var(--sort-arrow-active-sub-color);
+}
+.stk-table thead tr{
+  background-color:var(--th-bgc);
+  height:var(--header-row-height);
+}
+.stk-table thead tr:first-child th{
+  position:sticky;
+  top:0;
+}
+.stk-table .stk-table-main tbody tr{
+  background-color:var(--td-bgc);
+  height:var(--row-height);
+}
+.stk-table .stk-table-main tbody tr:hover{
+  background-color:var(--tr-hover-bgc);
+}
+.stk-table .stk-table-main tbody tr.active{
+  background-color:var(--tr-active-bgc);
+}
+.stk-table .virtual-x-left,
+.stk-table .virtual-x-right{
+  padding:0;
+  background:none;
+  pointer-events:none;
+}
 .stk-table .column-resize-indicator{
   width:0;
   height:100%;
@@ -124,56 +212,29 @@
   min-width:-moz-min-content;
   min-width:min-content;
 }
-.stk-table .stk-table-main th,
-.stk-table .stk-table-main td{
-  z-index:1;
-  font-size:14px;
-  box-sizing:border-box;
-  padding:0 var(--cell-padding-x);
-}
-.stk-table .stk-table-main th{
-  color:var(--th-color);
-  background-color:var(--th-bgc);
-}
-.stk-table .stk-table-main th.sortable{
-  cursor:pointer;
-}
-.stk-table .stk-table-main th.text-overflow .table-header-cell-wrapper{
-  white-space:nowrap;
-  overflow:hidden;
-}
-.stk-table .stk-table-main th.text-overflow .table-header-title{
-  text-overflow:ellipsis;
-  overflow:hidden;
-}
-.stk-table .stk-table-main td.fixed-cell{
+.stk-table .fixed-cell{
   background-color:inherit;
 }
-.stk-table .stk-table-main td.highlight-cell{
+.stk-table .highlight-cell{
   animation:stk-table-dim var(--highlight-duration);
   animation-timing-function:var(--highlight-timing-function);
 }
-.stk-table .stk-table-main td.text-overflow .table-cell-wrapper{
-  white-space:nowrap;
-  overflow:hidden;
-  text-overflow:ellipsis;
-}
-.stk-table .stk-table-main td.seq-column{
+.stk-table .seq-column{
   text-align:center;
 }
-.stk-table .stk-table-main .fixed-cell--left{
+.stk-table .fixed-cell--left{
   --shadow-rotate:90deg;
 }
-.stk-table .stk-table-main .fixed-cell--left.fixed-cell--shadow::after{
+.stk-table .fixed-cell--left.fixed-cell--shadow::after{
   right:-10px;
 }
-.stk-table .stk-table-main .fixed-cell--right{
+.stk-table .fixed-cell--right{
   --shadow-rotate:-90deg;
 }
-.stk-table .stk-table-main .fixed-cell--right.fixed-cell--shadow::after{
+.stk-table .fixed-cell--right.fixed-cell--shadow::after{
   left:-10px;
 }
-.stk-table .stk-table-main .fixed-cell--shadow::after{
+.stk-table .fixed-cell--shadow::after{
   content:'';
   width:10px;
   height:100%;
@@ -182,88 +243,43 @@
   pointer-events:none;
   background-image:linear-gradient(var(--shadow-rotate), var(--fixed-col-shadow-color-from), var(--fixed-col-shadow-color-to));
 }
-.stk-table .stk-table-main thead tr{
-  height:var(--header-row-height);
-}
-.stk-table .stk-table-main thead tr:first-child th{
-  position:sticky;
-  top:0;
-}
-.stk-table .stk-table-main th:not(.sorter-desc):not(.sorter-asc):hover .table-header-sorter .arrow-up{
-  fill:var(--sort-arrow-hover-color);
-}
-.stk-table .stk-table-main th:not(.sorter-desc):not(.sorter-asc):hover .table-header-sorter .arrow-down{
-  fill:var(--sort-arrow-hover-color);
-}
-.stk-table .stk-table-main th.sorter-desc .table-header-sorter{
-  display:inline;
-  display:initial;
-}
-.stk-table .stk-table-main th.sorter-desc .table-header-sorter .arrow-up{
-  fill:var(--sort-arrow-active-sub-color);
-}
-.stk-table .stk-table-main th.sorter-desc .table-header-sorter .arrow-down{
-  fill:var(--sort-arrow-active-color);
-}
-.stk-table .stk-table-main th.sorter-asc .table-header-sorter{
-  display:inline;
-  display:initial;
-}
-.stk-table .stk-table-main th.sorter-asc .table-header-sorter .arrow-up{
-  fill:var(--sort-arrow-active-color);
-}
-.stk-table .stk-table-main th.sorter-asc .table-header-sorter .arrow-down{
-  fill:var(--sort-arrow-active-sub-color);
-}
-.stk-table .stk-table-main .table-header-cell-wrapper{
+.stk-table .table-header-cell-wrapper{
   max-width:100%;
   display:inline-flex;
   align-items:center;
 }
-.stk-table .stk-table-main .table-header-title{
+.stk-table .table-header-title{
   overflow:hidden;
   align-self:flex-start;
 }
-.stk-table .stk-table-main .table-header-sorter{
+.stk-table .table-header-sorter{
   flex-shrink:0;
   margin-left:4px;
   width:16px;
   height:16px;
   display:none;
 }
-.stk-table .stk-table-main .table-header-sorter .arrow-up,
-.stk-table .stk-table-main .table-header-sorter .arrow-down{
+.stk-table .table-header-sorter .arrow-up,
+.stk-table .table-header-sorter .arrow-down{
   fill:var(--sort-arrow-color);
 }
-.stk-table .stk-table-main .table-header-resizer{
+.stk-table .table-header-resizer{
   position:absolute;
   top:0;
   bottom:0;
   cursor:col-resize;
   width:var(--resize-handle-width);
 }
-.stk-table .stk-table-main .table-header-resizer.left{
+.stk-table .table-header-resizer.left{
   left:0;
 }
-.stk-table .stk-table-main .table-header-resizer.right{
+.stk-table .table-header-resizer.right{
   right:0;
 }
-.stk-table .stk-table-main tbody tr{
-  background-color:var(--td-bgc);
-  height:var(--row-height);
-  transform:translateZ(0);
-}
-.stk-table .stk-table-main tbody tr.highlight-row{
+.stk-table .highlight-row{
   animation:stk-table-dim var(--highlight-duration);
   animation-timing-function:var(--highlight-timing-function);
 }
-.stk-table .stk-table-main tbody tr.hover,
-.stk-table .stk-table-main tbody tr:hover{
-  background-color:var(--tr-hover-bgc);
-}
-.stk-table .stk-table-main tbody tr.active{
-  background-color:var(--tr-active-bgc);
-}
 .stk-table .stk-table-no-data{
   background-color:var(--table-bgc);
   line-height:var(--row-height);
@@ -281,26 +297,3 @@
 .stk-table .stk-table-no-data.no-data-full{
   flex:1;
 }
-.stk-table.virtual{
-}
-.stk-table.virtual .table-header-cell-wrapper{
-  overflow:hidden;
-  max-height:var(--header-row-height);
-}
-.stk-table.virtual tbody{
-  position:relative;
-}
-.stk-table.virtual tbody tr td{
-  height:var(--row-height);
-  line-height:1;
-}
-.stk-table.virtual tbody tr td .table-cell-wrapper{
-  max-height:var(--row-height);
-  overflow:hidden;
-}
-.stk-table.virtual .padding-top-tr td{
-  height:0;
-}
-.stk-table.virtual-x .virtual-x-left{
-  padding:0;
-}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "stk-table-vue",
-    "version": "0.3.1",
+    "version": "0.3.3",
     "description": "Simple realtime virtual table for vue3&vue2.7",
     "main": "./lib/stk-table-vue.js",
     "types": "./lib/src/StkTable/index.d.ts",

package/src/StkTable/StkTable.vue

@@ -14,6 +14,9 @@
             'border-v': props.bordered === 'v',
             'border-body-v': props.bordered === 'body-v',
             stripe: props.stripe,
+            'cell-hover': props.cellHover,
+            'text-overflow': props.showOverflow,
+            'header-text-overflow': props.showHeaderOverflow,
         }"
         :style="[
             virtual && {
@@ -69,7 +72,6 @@
                         :class="[
                             col.sorter ? 'sortable' : '',
                             col.dataIndex === sortCol && sortOrderIndex !== 0 && 'sorter-' + sortSwitchOrder[sortOrderIndex],
-                            showHeaderOverflow ? 'text-overflow' : '',
                             col.headerClassName,
                             fixedColClassMap.get(colKeyGen(col)),
                         ]"
@@ -140,7 +142,7 @@
             <tbody>
                 <tr v-if="virtual_on" :style="{ height: `${virtualScroll.offsetTop}px` }" class="padding-top-tr">
                     <!--这个td用于配合虚拟滚动的th对应，防止列错位-->
-                    <td v-if="virtualX_on && fixedMode && headless" class="virtual-x-left" style="padding: 0"></td>
+                    <td v-if="virtualX_on && fixedMode && headless" class="virtual-x-left"></td>
                     <template v-if="fixedMode && headless">
                         <td v-for="col in virtualX_columnPart" :key="col.dataIndex" :style="cellStyleMap[TagType.TD].get(colKeyGen(col))"></td
                     ></template>
@@ -151,8 +153,8 @@
                     :key="rowKey ? rowKeyGen(row) : rowIndex"
                     :data-row-key="rowKey ? rowKeyGen(row) : rowIndex"
                     :class="{
-                        active: rowKey ? rowKeyGen(row) === rowKeyGen(currentItem) : row === currentItem,
-                        hover: rowKey ? rowKeyGen(row) === currentHover : row === currentHover,
+                        active: rowKey ? rowKeyGen(row) === rowKeyGen(currentRow) : row === currentRow,
+                        hover: props.showTrHoverClass && (rowKey ? rowKeyGen(row) === currentHoverRowKey : row === currentHoverRowKey),
                         [rowClassName(row, rowIndex)]: true,
                     }"
                     @click="e => onRowClick(e, row)"
@@ -161,19 +163,17 @@
                     @mouseover="e => onTrMouseOver(e, row)"
                 >
                     <!--这个td用于配合虚拟滚动的th对应，防止列错位-->
-                    <td v-if="virtualX_on" class="virtual-x-left" style="padding: 0"></td>
+                    <td v-if="virtualX_on" class="virtual-x-left"></td>
                     <td
                         v-for="(col, colIndex) in virtualX_columnPart"
                         :key="col.dataIndex"
                         :data-index="col.dataIndex"
-                        :class="[
-                            col.className,
-                            fixedColClassMap.get(colKeyGen(col)),
-                            showOverflow ? 'text-overflow' : '',
-                            col.type === 'seq' ? 'seq-column' : '',
-                        ]"
                         :style="cellStyleMap[TagType.TD].get(colKeyGen(col))"
+                        :class="[col.className, fixedColClassMap.get(colKeyGen(col)), col.type === 'seq' ? 'seq-column' : '']"
                         @click="e => onCellClick(e, row, col)"
+                        @mouseenter="e => onCellMouseEnter(e, row, col)"
+                        @mouseleave="e => onCellMouseLeave(e, row, col)"
+                        @mouseover="e => onCellMouseOver(e, row, col)"
                     >
                         <component
                             :is="col.customCell"
@@ -212,9 +212,9 @@
  * [] 计算的高亮颜色，挂在数据源上对象上，若多个表格使用同一个数据源对象会有问题。需要深拷贝。(解决方案：获取组件uid)
  * [] highlight-row 颜色不能恢复到active的颜色
  */
-import { CSSProperties, computed, onMounted, ref, shallowRef, toRaw, watch } from 'vue';
+import { CSSProperties, computed, nextTick, onMounted, ref, shallowRef, toRaw, watch } from 'vue';
 import { DEFAULT_ROW_HEIGHT } from './const';
-import { HighlightConfig, Order, SeqConfig, SortConfig, SortOption, SortState, StkTableColumn, TagType, UniqKeyProp } from './types/index';
+import { HighlightConfig, Order, SeqConfig, SortConfig, SortOption, SortState, StkTableColumn, TagType, UniqKey, UniqKeyProp } from './types/index';
 import { useAutoResize } from './useAutoResize';
 import { useColResize } from './useColResize';
 import { useFixedCol } from './useFixedCol';
@@ -223,7 +223,7 @@ import { useHighlight } from './useHighlight';
 import { useKeyboardArrowScroll } from './useKeyboardArrowScroll';
 import { useThDrag } from './useThDrag';
 import { useVirtualScroll } from './useVirtualScroll';
-import { createStkTableId, getCalculatedColWidth, getColWidth, transformWidthToStr, howDeepTheHeader, tableSort } from './utils';
+import { createStkTableId, getCalculatedColWidth, getColWidth, howDeepTheHeader, tableSort, transformWidthToStr } from './utils';
 
 /** Generic stands for DataType */
 type DT = any;
@@ -277,6 +277,8 @@ const props = withDefaults(
         showOverflow?: boolean;
         /** 是否增加行hover class */
         showTrHoverClass?: boolean;
+        /** 是否高亮鼠标悬浮的单元格 */
+        cellHover?: boolean;
         /** 表头是否可拖动。支持回调函数。 */
         headerDrag?: boolean | ((col: StkTableColumn<DT>) => boolean);
         /**
@@ -318,6 +320,14 @@ const props = withDefaults(
         highlightConfig?: HighlightConfig;
         /** 序号列配置 */
         seqConfig?: SeqConfig;
+        /**
+         * 固定头，固定列实现方式。
+         *
+         * relative：固定列只能放在props.columns的两侧。如果列宽会变动则谨慎使用。
+         *
+         * 低版本浏览器只能为'relative',
+         */
+        cellFixedMode?: 'sticky' | 'relative';
     }>(),
     {
         width: '',
@@ -342,6 +352,7 @@ const props = withDefaults(
         showHeaderOverflow: false,
         showOverflow: false,
         showTrHoverClass: false,
+        cellHover: false,
         headerDrag: false,
         rowClassName: () => '',
         colResizable: false,
@@ -357,6 +368,7 @@ const props = withDefaults(
         hideHeaderTitle: false,
         highlightConfig: () => ({}),
         seqConfig: () => ({}),
+        cellFixedMode: 'sticky',
     },
 );
 
@@ -373,9 +385,9 @@ const emits = defineEmits<{
     (e: 'row-click', ev: MouseEvent, row: DT): void;
     /**
      * 选中一行触发。ev返回null表示不是点击事件触发的
-     * ```(ev: MouseEvent | null, row: DT)```
+     * ```(ev: MouseEvent | null, row: DT, data: { select: boolean })```
      */
-    (e: 'current-change', ev: MouseEvent | null, row: DT): void;
+    (e: 'current-change', ev: MouseEvent | null, row: DT, data: { select: boolean }): void;
     /**
      * 行双击事件
      * ```(ev: MouseEvent, row: DT)```
@@ -396,6 +408,21 @@ const emits = defineEmits<{
      * ```(ev: MouseEvent, row: DT, col: StkTableColumn<DT>)```
      */
     (e: 'cell-click', ev: MouseEvent, row: DT, col: StkTableColumn<DT>): void;
+    /**
+     * 单元格鼠标进入事件
+     * ```(ev: MouseEvent, row: DT, col: StkTableColumn<DT>)```
+     */
+    (e: 'cell-mouseenter', ev: MouseEvent, row: DT, col: StkTableColumn<DT>): void;
+    /**
+     * 单元格鼠标移出事件
+     * ```(ev: MouseEvent, row: DT, col: StkTableColumn<DT>)```
+     */
+    (e: 'cell-mouseleave', ev: MouseEvent, row: DT, col: StkTableColumn<DT>): void;
+    /**
+     * 单元格悬浮事件
+     * ```(ev: MouseEvent, row: DT, col: StkTableColumn<DT>)```
+     */
+    (e: 'cell-mouseover', ev: MouseEvent, row: DT, col: StkTableColumn<DT>): void;
     /**
      * 表头单元格点击事件
      * ```(ev: MouseEvent, col: StkTableColumn<DT>)```
@@ -441,14 +468,18 @@ const emits = defineEmits<{
 const tableContainerRef = ref<HTMLDivElement>();
 const colResizeIndicatorRef = ref<HTMLDivElement>();
 /** 当前选中的一行*/
-const currentItem = ref<DT | null>(null);
+const currentRow = ref<DT | null>(null);
 /**
  * 保存当前选中行的key<br>
  * 原因：vue3 不用ref包dataSource时，row为原始对象，与currentItem（Ref）相比会不相等。
  */
-const currentItemKey = ref<any>(null);
-/** 当前hover的行 */
-const currentHover = ref<any | null>(null);
+const currentRowKey = ref<any>(null);
+/** 当前hover行 */
+let currentHoverRow: DT = null;
+/** 当前hover的行的key */
+const currentHoverRowKey = ref(null);
+/** 当前hover的列的key */
+// const currentColHoverKey = ref(null);
 
 /** 排序的列dataIndex*/
 let sortCol = ref<string | null>();
@@ -474,6 +505,18 @@ const tableHeaderLast = shallowRef<StkTableColumn<DT>[]>([]);
 
 const dataSourceCopy = shallowRef<DT[]>([...props.dataSource]);
 
+/**
+ * 列唯一键
+ * @param col
+ */
+const colKeyGen = computed(() => {
+    if (typeof props.colKey === 'function') {
+        return (col: StkTableColumn<DT>) => (props.colKey as (col: StkTableColumn<DT>) => string)(col);
+    } else {
+        return (col: StkTableColumn<DT>) => (col as any)[props.colKey as string];
+    }
+});
+
 /**高亮帧间隔 
 const highlightStepDuration = Highlight_Color_Change_Freq / 1000 + 's';*/
 
@@ -557,16 +600,17 @@ watch(
     () => props.columns,
     () => {
         dealColumns();
-        initVirtualScrollX();
+        nextTick(initVirtualScrollX);
     },
 );
 watch(
     () => props.virtualX,
-    () => dealColumns(),
+    () => {
+        dealColumns();
+        nextTick(initVirtualScrollX);
+    },
 );
 
-dealColumns();
-
 watch(
     () => props.dataSource,
     val => {
@@ -596,6 +640,8 @@ watch(
 
 watch(() => props.fixedColShadow, dealFixedColShadow);
 
+dealColumns();
+
 onMounted(() => {
     initVirtualScroll();
     updateFixedShadow();
@@ -695,21 +741,13 @@ function rowKeyGen(row: DT) {
     return key;
 }
 
-/**
- * 列唯一键
- * @param col
- */
-function colKeyGen(col: StkTableColumn<DT>) {
-    return typeof props.colKey === 'function' ? props.colKey(col) : (col as any)[props.colKey];
-}
-
 /** 单元格样式 */
 const cellStyleMap = computed(() => {
     const thMap = new Map();
     const tdMap = new Map();
     tableHeaders.value.forEach((cols, depth) => {
         cols.forEach(col => {
-            const colKey = colKeyGen(col);
+            const colKey = colKeyGen.value(col);
             const width = props.virtualX ? getCalculatedColWidth(col) + 'px' : transformWidthToStr(col.width);
             const style: CSSProperties = {
                 width,
@@ -791,11 +829,16 @@ function onColumnSort(col?: StkTableColumn<DT>, click = true, options: { force?:
 
 function onRowClick(e: MouseEvent, row: DT) {
     emits('row-click', e, row);
-    // 选中同一行不触发current-change 事件
-    if (props.rowKey ? currentItemKey.value === rowKeyGen(row) : currentItem.value === row) return;
-    currentItem.value = row;
-    currentItemKey.value = rowKeyGen(row);
-    emits('current-change', e, row);
+    // 选中同一行，取消当前选中行。
+    if (props.rowKey ? currentRowKey.value === rowKeyGen(row) : currentRow.value === row) {
+        currentRow.value = null;
+        currentRowKey.value = null;
+        emits('current-change', e, row, { select: false });
+    } else {
+        currentRow.value = row;
+        currentRowKey.value = rowKeyGen(row);
+        emits('current-change', e, row, { select: true });
+    }
 }
 
 function onRowDblclick(e: MouseEvent, row: DT) {
@@ -822,6 +865,23 @@ function onHeaderCellClick(e: MouseEvent, col: StkTableColumn<DT>) {
     emits('header-cell-click', e, col);
 }
 
+/** td mouseenter */
+function onCellMouseEnter(e: MouseEvent, row: DT, col: StkTableColumn<DT>) {
+    // currentColHoverKey.value = colKeyGen(col);
+    emits('cell-mouseenter', e, row, col);
+}
+
+/** td mouseleave */
+function onCellMouseLeave(e: MouseEvent, row: DT, col: StkTableColumn<DT>) {
+    // currentColHoverKey.value = null;
+    emits('cell-mouseleave', e, row, col);
+}
+
+/** td mouseover event */
+function onCellMouseOver(e: MouseEvent, row: DT, col: StkTableColumn<DT>) {
+    emits('cell-mouseover', e, row, col);
+}
+
 /**
  * 鼠标滚轮事件监听
  * @param {MouseEvent} e
@@ -849,7 +909,7 @@ function onTableScroll(e: Event) {
     const isXScroll = scrollLeft !== vScrollLeft;
 
     // 纵向滚动有变化
-    if (isYScroll && virtual_on.value) {
+    if (isYScroll) {
         updateVirtualScrollY(scrollTop);
     }
 
@@ -876,22 +936,22 @@ function onTableScroll(e: Event) {
 
 /** tr hover事件 */
 function onTrMouseOver(_e: MouseEvent, row: DT) {
-    if (props.showTrHoverClass) {
-        currentHover.value = rowKeyGen(row);
-    }
+    if (currentHoverRow === row) return;
+    currentHoverRow = row;
+    currentHoverRowKey.value = rowKeyGen(row);
 }
 
 /**
  * 选中一行，
- * @param {string} rowKey
+ * @param {string} rowKey selected rowKey, null to unselect
  * @param {boolean} option.silent 是否触发回调
  */
 function setCurrentRow(rowKey: string, option = { silent: false }) {
     if (!dataSourceCopy.value.length) return;
-    currentItem.value = dataSourceCopy.value.find(it => rowKeyGen(it) === rowKey);
-    currentItemKey.value = rowKeyGen(currentItem.value);
+    currentRow.value = dataSourceCopy.value.find(it => rowKeyGen(it) === rowKey);
+    currentRowKey.value = rowKeyGen(currentRow.value);
     if (!option.silent) {
-        emits('current-change', null, currentItem.value);
+        emits('current-change', /** no Event */ null, currentRow.value, { select: Boolean(currentRowKey.value) });
     }
 }