stk-table-vue 0.4.6 → 0.4.9

package/README.md

@@ -13,6 +13,7 @@ repo:
 ## Bug TODO:
 * [x] props.dataSource 为 shallowRef 时，高亮行不生效。(bug:2024.02.21)(resolved:0.2.3)
 * [] 固定列列宽拖动目标。
+* [] 惯性滚动优化。
 
 ## Feature TODO:
 * [x] 高亮行，单元格。
@@ -587,6 +588,8 @@ export type SortConfig<T extends Record<string, any>> = {
   - 以下情况尝试开启此功能。
     - 在 `customCell` 较多且复杂时。
     - 大量 highlight 动画时。
+### props.autoResize
+* 手动设置为 `props.autoResize=false`。可取消监听的性能消耗。适用于宽度高度不变的表格。
 
 ## Tips
 ### props.fixedMode

package/lib/stk-table-vue.js

@@ -455,8 +455,6 @@ function useFixedStyle({
     if (tagType === TagType.TD && !fixed)
       return null;
     const style = {};
-    const { scrollLeft, scrollWidth, offsetLeft, containerWidth } = virtualScrollX.value;
-    const scrollRight = scrollWidth - containerWidth - scrollLeft;
     const isFixedLeft = fixed === "left";
     if (tagType === TagType.TH) {
       if (isRelativeMode.value) {
@@ -465,6 +463,8 @@ function useFixedStyle({
         style.top = depth * props.rowHeight + "px";
       }
     }
+    const { scrollLeft, scrollWidth, offsetLeft, containerWidth } = virtualScrollX.value;
+    const scrollRight = scrollWidth - containerWidth - scrollLeft;
     if (fixed === "left" || fixed === "right") {
       if (isRelativeMode.value) {
         if (isFixedLeft) {
@@ -740,7 +740,16 @@ function useHighlight({ props, stkTableId, tableContainerRef }) {
     setHighlightDimCell
   };
 }
-const SCROLL_CODES = ["ArrowUp", "ArrowRight", "ArrowDown", "ArrowLeft", "PageUp", "PageDown"];
+var ScrollCodes = /* @__PURE__ */ ((ScrollCodes2) => {
+  ScrollCodes2["ArrowUp"] = "ArrowUp";
+  ScrollCodes2["ArrowRight"] = "ArrowRight";
+  ScrollCodes2["ArrowDown"] = "ArrowDown";
+  ScrollCodes2["ArrowLeft"] = "ArrowLeft";
+  ScrollCodes2["PageUp"] = "PageUp";
+  ScrollCodes2["PageDown"] = "PageDown";
+  return ScrollCodes2;
+})(ScrollCodes || {});
+const ScrollCodesValues = Object.values(ScrollCodes);
 function useKeyboardArrowScroll(targetElement, { props, scrollTo, virtualScroll, virtualScrollX, tableHeaders, virtual_on }) {
   let isMouseOver = false;
   watch(virtual_on, (val) => {
@@ -767,7 +776,9 @@ function useKeyboardArrowScroll(targetElement, { props, scrollTo, virtualScroll,
     (_c = targetElement.value) == null ? void 0 : _c.removeEventListener("mousedown", handleMouseDown);
   }
   function handleKeydown(e) {
-    if (!SCROLL_CODES.includes(e.code))
+    if (!virtual_on.value)
+      return;
+    if (!ScrollCodesValues.includes(e.code))
       return;
     if (!isMouseOver)
       return;
@@ -777,17 +788,17 @@ function useKeyboardArrowScroll(targetElement, { props, scrollTo, virtualScroll,
     const { headless, headerRowHeight } = props;
     const headerHeight = headless ? 0 : tableHeaders.value.length * (headerRowHeight || rowHeight);
     const bodyPageSize = Math.floor((containerHeight - headerHeight) / rowHeight);
-    if (e.code === SCROLL_CODES[0]) {
+    if (e.code === "ArrowUp") {
       scrollTo(scrollTop - rowHeight, null);
-    } else if (e.code === SCROLL_CODES[1]) {
+    } else if (e.code === "ArrowRight") {
       scrollTo(null, scrollLeft + rowHeight);
-    } else if (e.code === SCROLL_CODES[2]) {
+    } else if (e.code === "ArrowDown") {
       scrollTo(scrollTop + rowHeight, null);
-    } else if (e.code === SCROLL_CODES[3]) {
+    } else if (e.code === "ArrowLeft") {
       scrollTo(null, scrollLeft - rowHeight);
-    } else if (e.code === SCROLL_CODES[4]) {
+    } else if (e.code === "PageUp") {
       scrollTo(scrollTop - rowHeight * bodyPageSize + headerHeight, null);
-    } else if (e.code === SCROLL_CODES[5]) {
+    } else if (e.code === "PageDown") {
       scrollTo(scrollTop + rowHeight * bodyPageSize - headerHeight, null);
     }
   }
@@ -937,6 +948,10 @@ function useVirtualScroll({
     const { headerRowHeight } = props;
     return headerRowHeight * tableHeaders.value.length;
   }
+  function initVirtualScroll(height) {
+    initVirtualScrollY(height);
+    initVirtualScrollX();
+  }
   function initVirtualScrollY(height) {
     var _a;
     if (height !== void 0 && typeof height !== "number") {
@@ -954,7 +969,7 @@ function useVirtualScroll({
     const headerHeight = getTableHeaderHeight();
     tableHeaderHeight.value = headerHeight;
     if (!headless) {
-      const headerToBodyRowHeightCount = Math.floor(headerHeight) / rowHeight;
+      const headerToBodyRowHeightCount = Math.floor(headerHeight / rowHeight);
       pageSize -= headerToBodyRowHeightCount;
     }
     const maxScrollTop = dataSourceCopy.value.length * rowHeight + tableHeaderHeight.value - containerHeight;
@@ -970,31 +985,21 @@ function useVirtualScroll({
     virtualScrollX.value.scrollWidth = scrollWidth || DEFAULT_TABLE_WIDTH;
     updateVirtualScrollX(scrollLeft);
   }
-  function initVirtualScroll(height) {
-    initVirtualScrollY(height);
-    initVirtualScrollX();
-  }
   let vue2ScrollYTimeout = null;
   function updateVirtualScrollY(sTop = 0) {
-    const { rowHeight, pageSize, scrollTop, startIndex: oldStartIndex } = virtualScroll.value;
+    const { rowHeight, pageSize, scrollTop, startIndex: oldStartIndex, endIndex: oldEndIndex } = virtualScroll.value;
     virtualScroll.value.scrollTop = sTop;
     if (!virtual_on.value) {
       return;
     }
     let startIndex = Math.floor(sTop / rowHeight);
-    if (startIndex < 0) {
-      startIndex = 0;
-    }
+    let endIndex = startIndex + pageSize;
     if (props.stripe && startIndex !== 0) {
-      const scrollRows = Math.abs(oldStartIndex - startIndex);
-      if (scrollRows % 2) {
+      if (startIndex % 2) {
         startIndex -= 1;
       }
     }
-    let endIndex = startIndex + pageSize;
-    if (props.stripe) {
-      endIndex += 1;
-    }
+    startIndex = Math.max(0, startIndex);
     endIndex = Math.min(endIndex, dataSourceCopy.value.length);
     if (startIndex >= endIndex) {
       startIndex = endIndex - pageSize;
@@ -1002,13 +1007,12 @@ function useVirtualScroll({
     if (vue2ScrollYTimeout) {
       window.clearTimeout(vue2ScrollYTimeout);
     }
+    if (oldStartIndex === startIndex && oldEndIndex === endIndex) {
+      return;
+    }
     const offsetTop = startIndex * rowHeight;
     if (!props.optimizeVue2Scroll || sTop <= scrollTop || Math.abs(oldStartIndex - startIndex) >= pageSize) {
-      Object.assign(virtualScroll.value, {
-        startIndex,
-        endIndex,
-        offsetTop
-      });
+      Object.assign(virtualScroll.value, { startIndex, endIndex, offsetTop });
     } else {
       virtualScroll.value.endIndex = endIndex;
       vue2ScrollYTimeout = window.setTimeout(() => {
@@ -1087,17 +1091,16 @@ function useVirtualScroll({
   };
 }
 const _hoisted_1 = ["data-col-key", "draggable", "rowspan", "colspan", "title", "onClick"];
-const _hoisted_2 = { class: "table-header-cell-wrapper" };
-const _hoisted_3 = {
+const _hoisted_2 = {
   key: 1,
   class: "table-header-title"
 };
-const _hoisted_4 = { class: "table-header-title" };
-const _hoisted_5 = {
+const _hoisted_3 = { class: "table-header-title" };
+const _hoisted_4 = {
   key: 3,
   class: "table-header-sorter"
 };
-const _hoisted_6 = /* @__PURE__ */ createElementVNode("svg", {
+const _hoisted_5 = /* @__PURE__ */ createElementVNode("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   width: "16px",
   height: "16px",
@@ -1114,31 +1117,23 @@ const _hoisted_6 = /* @__PURE__ */ createElementVNode("svg", {
     points: "8 10 4.8 14 11.2 14"
   })
 ], -1);
-const _hoisted_7 = [
-  _hoisted_6
+const _hoisted_6 = [
+  _hoisted_5
 ];
+const _hoisted_7 = ["onMousedown"];
 const _hoisted_8 = ["onMousedown"];
-const _hoisted_9 = ["onMousedown"];
+const _hoisted_9 = { class: "stk-tbody-main" };
 const _hoisted_10 = {
-  key: 1,
-  class: "virtual-top"
-};
-const _hoisted_11 = {
   key: 0,
-  class: "virtual-x-left"
+  class: "vt-x-left"
 };
-const _hoisted_12 = { class: "stk-tbody-main" };
-const _hoisted_13 = ["id", "data-row-key", "onClick", "onDblclick", "onContextmenu", "onMouseover"];
-const _hoisted_14 = {
+const _hoisted_11 = ["id", "data-row-key", "onClick", "onDblclick", "onContextmenu", "onMouseover"];
+const _hoisted_12 = {
   key: 0,
-  class: "virtual-x-left"
-};
-const _hoisted_15 = ["data-index", "onClick", "onMouseenter", "onMouseleave", "onMouseover"];
-const _hoisted_16 = ["title"];
-const _hoisted_17 = {
-  key: 2,
-  class: "virtual-bottom"
+  class: "vt-x-left"
 };
+const _hoisted_13 = ["data-index", "onClick", "onMouseenter", "onMouseleave", "onMouseover"];
+const _hoisted_14 = ["title"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "StkTable",
   props: {
@@ -1283,6 +1278,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         });
       }
     );
+    watch(
+      () => props.virtual,
+      () => {
+        nextTick(() => {
+          initVirtualScrollY();
+        });
+      }
+    );
     watch(
       () => props.virtualX,
       () => {
@@ -1466,9 +1469,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const sortConfig = props.sortConfig;
       const defaultSort = sortConfig.defaultSort;
       if (!order && defaultSort) {
-        order = defaultSort.order;
+        if (!defaultSort.dataIndex) {
+          console.error("sortConfig.defaultSort.dataIndex is required");
+          return;
+        }
+        order = defaultSort.order || "desc";
         sortOrderIndex.value = sortSwitchOrder.indexOf(order);
         sortCol.value = defaultSort.dataIndex;
+        const c = props.columns.find((item) => item.dataIndex === defaultSort.dataIndex);
+        if (c) {
+          col = c;
+        } else {
+          console.error("defaultSort.dataIndex not found in columns");
+          col = props.columns[0];
+        }
+        if (!col)
+          return;
       }
       if (!props.sortRemote || options.force) {
         dataSourceCopy.value = tableSort(col, order, props.dataSource, sortConfig);
@@ -1580,15 +1596,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function setCurrentRow(rowKey, option = { silent: false }) {
       if (!dataSourceCopy.value.length)
         return;
-      currentRow.value = dataSourceCopy.value.find((it) => rowKeyGen(it) === rowKey);
-      currentRowKey.value = rowKeyGen(currentRow.value);
+      const row = dataSourceCopy.value.find((it) => rowKeyGen(it) === rowKey);
+      if (!row) {
+        console.warn("setCurrentRow failed.rowKey:", rowKey);
+        return;
+      }
+      currentRow.value = row;
+      currentRowKey.value = rowKey;
       if (!option.silent) {
         emits(
           "current-change",
           /** no Event */
           null,
           currentRow.value,
-          { select: Boolean(currentRowKey.value) }
+          { select: true }
         );
       }
     }
@@ -1661,6 +1682,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         class: normalizeClass(["stk-table", {
           virtual: _ctx.virtual,
           "virtual-x": _ctx.virtualX,
+          "vt-on": unref(virtual_on),
           dark: _ctx.theme === "dark",
           headless: _ctx.headless,
           "is-col-resizing": unref(isColResizing),
@@ -1710,11 +1732,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               }, [
                 unref(virtualX_on) ? (openBlock(), createElementBlock("th", {
                   key: 0,
-                  class: "virtual-x-left",
-                  style: normalizeStyle({
-                    minWidth: unref(virtualScrollX).offsetLeft + "px",
-                    width: unref(virtualScrollX).offsetLeft + "px"
-                  })
+                  class: "vt-x-left",
+                  style: normalizeStyle(`min-width:${unref(virtualScrollX).offsetLeft}px;width:${unref(virtualScrollX).offsetLeft}px`)
                 }, null, 4)) : createCommentVNode("", true),
                 (openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtualX_on) && rowIndex === tableHeaders.value.length - 1 ? unref(virtualX_columnPart) : row, (col, colIndex) => {
                   return openBlock(), createElementBlock("th", {
@@ -1742,65 +1761,64 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     onDragover: _cache[2] || (_cache[2] = //@ts-ignore
                     (...args) => unref(onThDragOver) && unref(onThDragOver)(...args))
                   }, [
-                    createElementVNode("div", _hoisted_2, [
+                    createElementVNode("div", {
+                      class: "table-header-cell-wrapper",
+                      style: normalizeStyle(`--row-span:${unref(virtualX_on) ? 1 : col.rowSpan}`)
+                    }, [
                       col.customHeaderCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customHeaderCell), {
                         key: 0,
                         col,
                         colIndex,
                         rowIndex
-                      }, null, 8, ["col", "colIndex", "rowIndex"])) : col.type === "seq" ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(col.title), 1)) : renderSlot(_ctx.$slots, "tableHeader", {
+                      }, null, 8, ["col", "colIndex", "rowIndex"])) : col.type === "seq" ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(col.title), 1)) : renderSlot(_ctx.$slots, "tableHeader", {
                         key: 2,
                         col
                       }, () => [
-                        createElementVNode("span", _hoisted_4, toDisplayString(col.title), 1)
+                        createElementVNode("span", _hoisted_3, toDisplayString(col.title), 1)
                       ]),
-                      col.sorter ? (openBlock(), createElementBlock("span", _hoisted_5, _hoisted_7)) : createCommentVNode("", true),
+                      col.sorter ? (openBlock(), createElementBlock("span", _hoisted_4, _hoisted_6)) : createCommentVNode("", true),
                       _ctx.colResizable && colIndex > 0 ? (openBlock(), createElementBlock("div", {
                         key: 4,
                         class: "table-header-resizer left",
                         onMousedown: (e) => unref(onThResizeMouseDown)(e, col, true)
-                      }, null, 40, _hoisted_8)) : createCommentVNode("", true),
+                      }, null, 40, _hoisted_7)) : createCommentVNode("", true),
                       _ctx.colResizable ? (openBlock(), createElementBlock("div", {
                         key: 5,
                         class: "table-header-resizer right",
                         onMousedown: (e) => unref(onThResizeMouseDown)(e, col)
-                      }, null, 40, _hoisted_9)) : createCommentVNode("", true)
-                    ])
+                      }, null, 40, _hoisted_8)) : createCommentVNode("", true)
+                    ], 4)
                   ], 46, _hoisted_1);
                 }), 128)),
                 unref(virtualX_on) ? (openBlock(), createElementBlock("th", {
                   key: 1,
-                  class: "virtual-x-right",
-                  style: normalizeStyle({
-                    minWidth: unref(virtualX_offsetRight) + "px",
-                    width: unref(virtualX_offsetRight) + "px"
-                  })
+                  class: "vt-x-right",
+                  style: normalizeStyle(`min-width:${unref(virtualX_offsetRight)}px;width:${unref(virtualX_offsetRight)}px`)
                 }, null, 4)) : createCommentVNode("", true)
               ], 32);
             }), 128))
           ], 512)) : createCommentVNode("", true),
-          unref(virtual_on) ? (openBlock(), createElementBlock("tbody", _hoisted_10, [
-            createElementVNode("tr", {
-              style: normalizeStyle({ height: `${unref(virtualScroll).offsetTop}px` }),
+          createElementVNode("tbody", _hoisted_9, [
+            unref(virtual_on) ? (openBlock(), createElementBlock("tr", {
+              key: 0,
+              style: normalizeStyle(`height:${unref(virtualScroll).offsetTop}px`),
               class: "padding-top-tr"
             }, [
-              unref(virtualX_on) && _ctx.fixedMode && _ctx.headless ? (openBlock(), createElementBlock("td", _hoisted_11)) : createCommentVNode("", true),
+              unref(virtualX_on) && _ctx.fixedMode && _ctx.headless ? (openBlock(), createElementBlock("td", _hoisted_10)) : createCommentVNode("", true),
               _ctx.fixedMode && _ctx.headless ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(virtualX_columnPart), (col) => {
                 return openBlock(), createElementBlock("td", {
                   key: col.dataIndex,
                   style: normalizeStyle(cellStyleMap.value[unref(TagType).TD].get(colKeyGen.value(col)))
                 }, null, 4);
               }), 128)) : createCommentVNode("", true)
-            ], 4)
-          ])) : createCommentVNode("", true),
-          createElementVNode("tbody", _hoisted_12, [
+            ], 4)) : createCommentVNode("", true),
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtual_dataSourcePart), (row, rowIndex) => {
               return openBlock(), createElementBlock("tr", {
                 id: unref(stkTableId) + "-" + (_ctx.rowKey ? rowKeyGen(row) : rowIndex),
                 key: _ctx.rowKey ? rowKeyGen(row) : rowIndex,
                 "data-row-key": _ctx.rowKey ? rowKeyGen(row) : rowIndex,
                 class: normalizeClass({
-                  active: _ctx.rowKey ? rowKeyGen(row) === rowKeyGen(currentRow.value) : row === currentRow.value,
+                  active: _ctx.rowKey ? rowKeyGen(row) === currentRowKey.value : row === currentRow.value,
                   hover: props.showTrHoverClass && (_ctx.rowKey ? rowKeyGen(row) === currentHoverRowKey.value : row === currentHoverRowKey.value),
                   [_ctx.rowClassName(row, rowIndex)]: true
                 }),
@@ -1809,7 +1827,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 onContextmenu: (e) => onRowMenu(e, row),
                 onMouseover: (e) => onTrMouseOver(e, row)
               }, [
-                unref(virtualX_on) ? (openBlock(), createElementBlock("td", _hoisted_14)) : createCommentVNode("", true),
+                unref(virtualX_on) ? (openBlock(), createElementBlock("td", _hoisted_12)) : createCommentVNode("", true),
                 (openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtualX_columnPart), (col, colIndex) => {
                   return openBlock(), createElementBlock("td", {
                     key: col.dataIndex,
@@ -1838,17 +1856,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                         createTextVNode(toDisplayString((row == null ? void 0 : row[col.dataIndex]) ?? getEmptyCellText.value(col, row)), 1)
                       ], 64))
-                    ], 8, _hoisted_16))
-                  ], 46, _hoisted_15);
+                    ], 8, _hoisted_14))
+                  ], 46, _hoisted_13);
                 }), 128))
-              ], 42, _hoisted_13);
-            }), 128))
-          ]),
-          unref(virtual_on) ? (openBlock(), createElementBlock("tbody", _hoisted_17, [
-            createElementVNode("tr", {
-              style: normalizeStyle({ height: `${unref(virtual_offsetBottom)}px` })
-            }, null, 4)
-          ])) : createCommentVNode("", true)
+              ], 42, _hoisted_11);
+            }), 128)),
+            unref(virtual_on) ? (openBlock(), createElementBlock("tr", {
+              key: 1,
+              style: normalizeStyle(`height: ${unref(virtual_offsetBottom)}px`)
+            }, null, 4)) : createCommentVNode("", true)
+          ])
         ], 6),
         (!dataSourceCopy.value || !dataSourceCopy.value.length) && _ctx.showNoData ? (openBlock(), createElementBlock("div", {
           key: 1,

package/lib/style.css

@@ -91,13 +91,22 @@
 .stk-table.border-body-v tbody{
   --bg-border-bottom:linear-gradient(transparent, transparent);
 }
-.stk-table.stripe tbody tr:nth-child(even){
+.stk-table.stripe .stk-tbody-main tr:nth-child(even){
   background-color:var(--stripe-bgc);
 }
-.stk-table.row-hover tbody tr:hover{
+.stk-table.stripe.vt-on .stk-tbody-main tr:nth-child(odd){
+  background-color:var(--stripe-bgc);
+}
+.stk-table.stripe.row-hover .stk-tbody-main tr:hover{
+  background-color:var(--tr-hover-bgc);
+}
+.stk-table.stripe.row-active .stk-tbody-main tr.active{
+  background-color:var(--tr-active-bgc);
+}
+.stk-table.row-hover .stk-tbody-main tr:hover{
   background-color:var(--tr-hover-bgc);
 }
-.stk-table.row-active tbody tr.active{
+.stk-table.row-active .stk-tbody-main tr.active{
   background-color:var(--tr-active-bgc);
 }
 .stk-table.cell-hover tbody td:hover{
@@ -120,7 +129,7 @@
 }
 .stk-table.virtual .table-header-cell-wrapper{
   overflow:hidden;
-  max-height:var(--header-row-height);
+  max-height:calc(var(--header-row-height) * var(--row-span));
 }
 .stk-table.virtual tbody td{
   height:var(--row-height);
@@ -187,8 +196,8 @@
   background-color:var(--td-bgc);
   height:var(--row-height);
 }
-.stk-table .virtual-x-left,
-.stk-table .virtual-x-right{
+.stk-table .vt-x-left,
+.stk-table .vt-x-right{
   padding:0;
   background:none;
   pointer-events:none;

package/package.json

@@ -1,65 +1,65 @@
-{
-    "name": "stk-table-vue",
-    "version": "0.4.6",
-    "description": "Simple realtime virtual table for vue3 and vue2.7",
-    "main": "./lib/stk-table-vue.js",
-    "types": "./lib/src/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",
-        "vue2",
-        "vue3",
-        "highlight",
-        "sticky",
-        "virtual",
-        "table",
-        "list"
-    ],
-    "files": [
-        "lib",
-        "src"
-    ],
-    "author": "japlus",
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/ja-plus/stk-table-vue"
-    },
-    "license": "MIT",
-    "devDependencies": {
-        "@types/d3-interpolate": "^3.0.4",
-        "@types/node": "^20.12.10",
-        "@typescript-eslint/eslint-plugin": "^7.7.0",
-        "@typescript-eslint/parser": "^7.7.0",
-        "@vitejs/plugin-vue": "^5.0.4",
-        "@vue/test-utils": "2.4.4",
-        "eslint": "^8.57.0",
-        "eslint-config-prettier": "^9.1.0",
-        "eslint-plugin-html": "^8.1.0",
-        "eslint-plugin-prettier": "^5.1.3",
-        "eslint-plugin-vue": "^9.25.0",
-        "happy-dom": "^12.10.3",
-        "less": "^4.2.0",
-        "postcss-discard-comments": "^6.0.2",
-        "postcss-preset-env": "^9.5.11",
-        "prettier": "^3.2.5",
-        "typescript": "^5.4.5",
-        "vite": "^5.2.11",
-        "vite-plugin-dts": "^3.9.1",
-        "vitest": "^1.6.0",
-        "vue": "^3.4.26",
-        "vue-eslint-parser": "^9.4.2"
-    },
-    "dependencies": {
-        "d3-interpolate": "^3.0.1"
-    }
+{
+    "name": "stk-table-vue",
+    "version": "0.4.9",
+    "description": "Simple realtime virtual table for vue3 and vue2.7",
+    "main": "./lib/stk-table-vue.js",
+    "types": "./lib/src/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",
+        "vue2",
+        "vue3",
+        "highlight",
+        "sticky",
+        "virtual",
+        "table",
+        "list"
+    ],
+    "files": [
+        "lib",
+        "src"
+    ],
+    "author": "japlus",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/ja-plus/stk-table-vue"
+    },
+    "license": "MIT",
+    "devDependencies": {
+        "@types/d3-interpolate": "^3.0.4",
+        "@types/node": "^20.12.10",
+        "@typescript-eslint/eslint-plugin": "^7.7.0",
+        "@typescript-eslint/parser": "^7.7.0",
+        "@vitejs/plugin-vue": "^5.0.4",
+        "@vue/test-utils": "2.4.4",
+        "eslint": "^8.57.0",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint-plugin-html": "^8.1.0",
+        "eslint-plugin-prettier": "^5.1.3",
+        "eslint-plugin-vue": "^9.25.0",
+        "happy-dom": "^12.10.3",
+        "less": "^4.2.0",
+        "postcss-discard-comments": "^6.0.2",
+        "postcss-preset-env": "^9.5.11",
+        "prettier": "^3.2.5",
+        "typescript": "^5.4.5",
+        "vite": "^5.2.11",
+        "vite-plugin-dts": "^3.9.1",
+        "vitest": "^1.6.0",
+        "vue": "^3.4.26",
+        "vue-eslint-parser": "^9.4.2"
+    },
+    "dependencies": {
+        "d3-interpolate": "^3.0.1"
+    }
 }

package/src/StkTable/StkTable.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/attribute-hyphenation -->
 <template>
     <div
         ref="tableContainerRef"
@@ -5,6 +6,7 @@
         :class="{
             virtual,
             'virtual-x': virtualX,
+            'vt-on': virtual_on,
             dark: theme === 'dark',
             headless,
             'is-col-resizing': isColResizing,
@@ -52,11 +54,8 @@
                     <!-- 这个th用于横向虚拟滚动表格左边距,width、maxWidth 用于兼容低版本浏览器 -->
                     <th
                         v-if="virtualX_on"
-                        class="virtual-x-left"
-                        :style="{
-                            minWidth: virtualScrollX.offsetLeft + 'px',
-                            width: virtualScrollX.offsetLeft + 'px',
-                        }"
+                        class="vt-x-left"
+                        :style="`min-width:${virtualScrollX.offsetLeft}px;width:${virtualScrollX.offsetLeft}px`"
                     ></th>
                     <!-- v for中最后一行才用 切割。TODO:不支持多级表头虚拟横向滚动 -->
                     <th
@@ -84,7 +83,7 @@
                         @drop="onThDrop"
                         @dragover="onThDragOver"
                     >
-                        <div class="table-header-cell-wrapper">
+                        <div class="table-header-cell-wrapper" :style="`--row-span:${virtualX_on ? 1 : col.rowSpan}`">
                             <component :is="col.customHeaderCell" v-if="col.customHeaderCell" :col="col" :colIndex="colIndex" :rowIndex="rowIndex" />
                             <template v-else-if="col.type === 'seq'">
                                 <span class="table-header-title">{{ col.title }}</span>
@@ -116,46 +115,28 @@
                         </div>
                     </th>
                     <!-- 这个th用于横向虚拟滚动表格右边距 width、maxWidth 用于兼容低版本浏览器-->
-                    <th
-                        v-if="virtualX_on"
-                        class="virtual-x-right"
-                        :style="{
-                            minWidth: virtualX_offsetRight + 'px',
-                            width: virtualX_offsetRight + 'px',
-                        }"
-                    ></th>
+                    <th v-if="virtualX_on" class="vt-x-right" :style="`min-width:${virtualX_offsetRight}px;width:${virtualX_offsetRight}px`"></th>
                 </tr>
             </thead>
 
             <!-- 用于虚拟滚动表格内容定位 @deprecated 有兼容问题-->
-            <!-- <tbody v-if="virtual_on" :style="{ height: `${virtualScroll.offsetTop}px` }">
-          <!==这个tr兼容火狐==>
-          <tr></tr>
-        </tbody> -->
-            <!-- <td
-            v-for="col in virtualX_on ? virtualX_columnPart : tableHeaderLast"
-            :key="col.dataIndex"
-            class="perch-td top"
-          ></td> -->
+            <!-- <tbody v-if="virtual_on" :style="{ height: `${virtualScroll.offsetTop}px` }"></tbody> -->
             <!-- <tbody :style="{ transform: `translateY(${virtualScroll.offsetTop}px)` }"> -->
-            <tbody v-if="virtual_on" class="virtual-top">
-                <!-- 由于斑马纹选择器nth-child 原因，占位tr单独包在tbody中 -->
-                <tr :style="{ height: `${virtualScroll.offsetTop}px` }" class="padding-top-tr">
+            <tbody class="stk-tbody-main">
+                <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"></td>
+                    <td v-if="virtualX_on && fixedMode && headless" class="vt-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>
                 </tr>
-            </tbody>
-            <tbody class="stk-tbody-main">
                 <tr
                     v-for="(row, rowIndex) in virtual_dataSourcePart"
                     :id="stkTableId + '-' + (rowKey ? rowKeyGen(row) : rowIndex)"
                     :key="rowKey ? rowKeyGen(row) : rowIndex"
                     :data-row-key="rowKey ? rowKeyGen(row) : rowIndex"
                     :class="{
-                        active: rowKey ? rowKeyGen(row) === rowKeyGen(currentRow) : row === currentRow,
+                        active: rowKey ? rowKeyGen(row) === currentRowKey : row === currentRow,
                         hover: props.showTrHoverClass && (rowKey ? rowKeyGen(row) === currentHoverRowKey : row === currentHoverRowKey),
                         [rowClassName(row, rowIndex)]: true,
                     }"
@@ -165,7 +146,7 @@
                     @mouseover="e => onTrMouseOver(e, row)"
                 >
                     <!--这个td用于配合虚拟滚动的th对应，防止列错位-->
-                    <td v-if="virtualX_on" class="virtual-x-left"></td>
+                    <td v-if="virtualX_on" class="vt-x-left"></td>
                     <td
                         v-for="(col, colIndex) in virtualX_columnPart"
                         :key="col.dataIndex"
@@ -196,9 +177,7 @@
                         </div>
                     </td>
                 </tr>
-            </tbody>
-            <tbody v-if="virtual_on" class="virtual-bottom">
-                <tr :style="{ height: `${virtual_offsetBottom}px` }"></tr>
+                <tr v-if="virtual_on" :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 }">
@@ -633,6 +612,14 @@ watch(
         });
     },
 );
+watch(
+    () => props.virtual,
+    () => {
+        nextTick(() => {
+            initVirtualScrollY();
+        });
+    },
+);
 watch(
     () => props.virtualX,
     () => {
@@ -869,10 +856,22 @@ function onColumnSort(col?: StkTableColumn<DT>, click = true, options: { force?:
     const defaultSort = sortConfig.defaultSort;
 
     if (!order && defaultSort) {
+        if (!defaultSort.dataIndex) {
+            console.error('sortConfig.defaultSort.dataIndex is required');
+            return;
+        }
         // 没有排序时变成默认排序
-        order = defaultSort.order;
+        order = defaultSort.order || 'desc';
         sortOrderIndex.value = sortSwitchOrder.indexOf(order);
         sortCol.value = defaultSort.dataIndex as string;
+        const c = props.columns.find(item => item.dataIndex === defaultSort.dataIndex);
+        if (c) {
+            col = c;
+        } else {
+            console.error('defaultSort.dataIndex not found in columns');
+            col = props.columns[0];
+        }
+        if (!col) return;
     }
     if (!props.sortRemote || options.force) {
         dataSourceCopy.value = tableSort(col, order, props.dataSource, sortConfig);
@@ -1036,10 +1035,15 @@ function onTrMouseOver(_e: MouseEvent, row: DT) {
  */
 function setCurrentRow(rowKey: string, option = { silent: false }) {
     if (!dataSourceCopy.value.length) return;
-    currentRow.value = dataSourceCopy.value.find(it => rowKeyGen(it) === rowKey);
-    currentRowKey.value = rowKeyGen(currentRow.value);
+    const row = dataSourceCopy.value.find(it => rowKeyGen(it) === rowKey);
+    if (!row) {
+        console.warn('setCurrentRow failed.rowKey:', rowKey);
+        return;
+    }
+    currentRow.value = row;
+    currentRowKey.value = rowKey;
     if (!option.silent) {
-        emits('current-change', /** no Event */ null, currentRow.value, { select: Boolean(currentRowKey.value) });
+        emits('current-change', /** no Event */ null, currentRow.value, { select: true });
     }
 }
 

package/src/StkTable/style.less

@@ -135,18 +135,30 @@
 
     /* 斑马纹*/
     &.stripe {
+        .stk-tbody-main tr:nth-child(even) {
+            background-color: var(--stripe-bgc);
+        }
 
-        tbody tr:nth-child(even) {
+        &.vt-on .stk-tbody-main tr:nth-child(odd) {
             background-color: var(--stripe-bgc);
         }
+
+        &.row-hover .stk-tbody-main tr:hover {
+            background-color: var(--tr-hover-bgc);
+        }
+
+        &.row-active .stk-tbody-main tr.active {
+            background-color: var(--tr-active-bgc);
+        }
     }
 
-    &.row-hover tbody tr:hover {
+
+    &.row-hover .stk-tbody-main tr:hover {
         background-color: var(--tr-hover-bgc);
     }
 
 
-    &.row-active tbody tr.active {
+    &.row-active .stk-tbody-main tr.active {
         background-color: var(--tr-active-bgc);
     }
 
@@ -183,7 +195,7 @@
         /* 为不影响布局，表头行高要定死*/
         .table-header-cell-wrapper {
             overflow: hidden;
-            max-height: var(--header-row-height);
+            max-height: calc(var(--header-row-height) * var(--row-span));
         }
 
         tbody td {
@@ -279,8 +291,8 @@
     }
 
 
-    .virtual-x-left,
-    .virtual-x-right {
+    .vt-x-left,
+    .vt-x-right {
         padding: 0;
         background: none;
         pointer-events: none;

package/src/StkTable/useFixedStyle.ts

@@ -37,9 +37,6 @@ export function useFixedStyle<DT extends Record<string, any>>({
 
         const style: CSSProperties = {};
 
-        const { scrollLeft, scrollWidth, offsetLeft, containerWidth } = virtualScrollX.value;
-        const scrollRight = scrollWidth - containerWidth - scrollLeft;
-
         const isFixedLeft = fixed === 'left';
         if (tagType === TagType.TH) {
             // TH
@@ -50,6 +47,9 @@ export function useFixedStyle<DT extends Record<string, any>>({
             }
         }
 
+        const { scrollLeft, scrollWidth, offsetLeft, containerWidth } = virtualScrollX.value;
+        const scrollRight = scrollWidth - containerWidth - scrollLeft;
+
         if (fixed === 'left' || fixed === 'right') {
             if (isRelativeMode.value) {
                 if (isFixedLeft) {

package/src/StkTable/useKeyboardArrowScroll.ts

@@ -3,7 +3,16 @@ import { StkTableColumn } from './types';
 import { VirtualScrollStore, VirtualScrollXStore } from './useVirtualScroll';
 
 /** 翻页按键 */
-const SCROLL_CODES = ['ArrowUp', 'ArrowRight', 'ArrowDown', 'ArrowLeft', 'PageUp', 'PageDown'] as const;
+enum ScrollCodes {
+    ArrowUp = 'ArrowUp',
+    ArrowRight = 'ArrowRight',
+    ArrowDown = 'ArrowDown',
+    ArrowLeft = 'ArrowLeft',
+    PageUp = 'PageUp',
+    PageDown = 'PageDown',
+}
+/** 所有翻页按键数组 */
+const ScrollCodesValues = Object.values(ScrollCodes);
 
 type Options<DT extends Record<string, any>> = {
     props: any;
@@ -52,7 +61,8 @@ export function useKeyboardArrowScroll<DT extends Record<string, any>>(
 
     /** 键盘按下事件 */
     function handleKeydown(e: KeyboardEvent) {
-        if (!SCROLL_CODES.includes(e.code as any)) return;
+        if (!virtual_on.value) return; // 非虚拟滚动使用浏览器默认滚动
+        if (!ScrollCodesValues.includes(e.code as any)) return;
         if (!isMouseOver) return; // 不悬浮还是要触发键盘事件的
         e.preventDefault(); // 不触发键盘默认的箭头事件
 
@@ -65,17 +75,17 @@ export function useKeyboardArrowScroll<DT extends Record<string, any>>(
         /** 表体的page */
         const bodyPageSize = Math.floor((containerHeight - headerHeight) / rowHeight);
 
-        if (e.code === SCROLL_CODES[0]) {
+        if (e.code === ScrollCodes.ArrowUp) {
             scrollTo(scrollTop - rowHeight, null);
-        } else if (e.code === SCROLL_CODES[1]) {
+        } else if (e.code === ScrollCodes.ArrowRight) {
             scrollTo(null, scrollLeft + rowHeight);
-        } else if (e.code === SCROLL_CODES[2]) {
+        } else if (e.code === ScrollCodes.ArrowDown) {
             scrollTo(scrollTop + rowHeight, null);
-        } else if (e.code === SCROLL_CODES[3]) {
+        } else if (e.code === ScrollCodes.ArrowLeft) {
             scrollTo(null, scrollLeft - rowHeight);
-        } else if (e.code === SCROLL_CODES[4]) {
+        } else if (e.code === ScrollCodes.PageUp) {
             scrollTo(scrollTop - rowHeight * bodyPageSize + headerHeight, null);
-        } else if (e.code === SCROLL_CODES[5]) {
+        } else if (e.code === ScrollCodes.PageDown) {
             scrollTo(scrollTop + rowHeight * bodyPageSize - headerHeight, null);
         }
     }

package/src/StkTable/useVirtualScroll.ts

@@ -163,6 +163,15 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         // return theadRef.value?.offsetHeight || 0;
     }
 
+    /**
+     * 初始化虚拟滚动参数
+     * @param {number} [height] 虚拟滚动的高度
+     */
+    function initVirtualScroll(height?: number) {
+        initVirtualScrollY(height);
+        initVirtualScrollX();
+    }
+
     /**
      * 初始化Y虚拟滚动参数
      * @param {number} [height] 虚拟滚动的高度
@@ -184,7 +193,7 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         tableHeaderHeight.value = headerHeight;
         if (!headless) {
             /** 表头高度占几行表体高度数 */
-            const headerToBodyRowHeightCount = Math.floor(headerHeight) / rowHeight;
+            const headerToBodyRowHeightCount = Math.floor(headerHeight / rowHeight);
             pageSize -= headerToBodyRowHeightCount; //减去表头行数
         }
         /** 最大的scrollTop */
@@ -203,20 +212,12 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         virtualScrollX.value.scrollWidth = scrollWidth || DEFAULT_TABLE_WIDTH;
         updateVirtualScrollX(scrollLeft);
     }
-    /**
-     * 初始化虚拟滚动参数
-     * @param {number} [height] 虚拟滚动的高度
-     */
-    function initVirtualScroll(height?: number) {
-        initVirtualScrollY(height);
-        initVirtualScrollX();
-    }
 
     let vue2ScrollYTimeout: null | number = null;
 
     /** 通过滚动条位置，计算虚拟滚动的参数 */
     function updateVirtualScrollY(sTop = 0) {
-        const { rowHeight, pageSize, scrollTop, startIndex: oldStartIndex } = virtualScroll.value;
+        const { rowHeight, pageSize, scrollTop, startIndex: oldStartIndex, endIndex: oldEndIndex } = virtualScroll.value;
         // 先更新滚动条位置记录，其他地方有依赖。(stripe 时ArrowUp/Down滚动依赖)
         virtualScroll.value.scrollTop = sTop;
 
@@ -226,22 +227,18 @@ export function useVirtualScroll<DT extends Record<string, any>>({
         }
 
         let startIndex = Math.floor(sTop / rowHeight);
-        if (startIndex < 0) {
-            startIndex = 0;
-        }
+        let endIndex = startIndex + pageSize;
+
         if (props.stripe && startIndex !== 0) {
-            const scrollRows = Math.abs(oldStartIndex - startIndex);
             // 斑马纹情况下，每滚动偶数行才加载。防止斑马纹错位。
-            if (scrollRows % 2) {
+            if (startIndex % 2) {
                 startIndex -= 1; // 奇数-1变成偶数
             }
         }
-        let endIndex = startIndex + pageSize;
-        if (props.stripe) {
-            endIndex += 1; // 斑马纹下多渲染一些
-        }
 
-        // 溢出endIndex修正
+        startIndex = Math.max(0, startIndex);
+
+        // 溢出修正
         endIndex = Math.min(endIndex, dataSourceCopy.value.length);
 
         if (startIndex >= endIndex) {
@@ -253,6 +250,11 @@ export function useVirtualScroll<DT extends Record<string, any>>({
             window.clearTimeout(vue2ScrollYTimeout);
         }
 
+        if (oldStartIndex === startIndex && oldEndIndex === endIndex) {
+            // 没有变化，不需要更新
+            return;
+        }
+
         const offsetTop = startIndex * rowHeight; // startIndex之前的高度
 
         /**
@@ -260,11 +262,7 @@ export function useVirtualScroll<DT extends Record<string, any>>({
          */
         if (!props.optimizeVue2Scroll || sTop <= scrollTop || Math.abs(oldStartIndex - startIndex) >= pageSize) {
             // 向上滚动
-            Object.assign(virtualScroll.value, {
-                startIndex,
-                endIndex,
-                offsetTop,
-            });
+            Object.assign(virtualScroll.value, { startIndex, endIndex, offsetTop });
         } else {
             // vue2向下滚动优化
             virtualScroll.value.endIndex = endIndex;