stk-table-vue 0.3.4 → 0.3.5

package/README.md

@@ -549,16 +549,19 @@ export type SortConfig<T extends Record<string, any>> = {
 ### 鼠标悬浮表头时，不展示title
 * 将 `StkTableColumn` 中的 `title` 字段置为 "" 空字符串。这样th中就没有title了。
 * 使用 `StkTableColumn` 中的 `customHeaderCell` 属性中，自定义表头渲染。
-### 性能
-#### highlight
-* 在虚拟滚动下高亮强制使用 `css @keyframes` 实现动画。`setHighlightDimRow`/`setHighlightCellRow` 最后一个参数传入 `{method: 'css'}` 即可。（滚动后动画会中断） 
-* 指定 `{method:'animation'}` 在虚拟滚动下使用animation api实现动画。好处是动画流畅，且滚动后动画不中断。坏处是不支持帧率配置。
+
+## Performance optimization
+### highlight
 * 配置 `props.highlightConfig.fps` 指定高亮帧率。降低帧率有利于性能。
-#### relative fixed
+### relative fixed
 * 配置 `props.cellFixedMode` 为 `relative` 时，将使用相对定位实现固定列与固定表头，相较于`sticky`的实现，渲染合成层更少。
 * 问题：若开启了纵向虚拟滚动，不开启横向虚拟滚动，且不设置某些列宽时。如果纵向滚动导致某些列宽变化，则会导致右侧固定列计算错误。
-#### tr 分层
-* 通过css选择器将 stk-table tbody tr 配置 `transform:translateZ(0)` 对每行 tr 进行分层。在 `customCell` 较多且复杂时，尝试开启此功能可能对性能有帮助。
+### tr 分层
+* 通过css选择器将 stk-table tbody tr 配置 `transform:translateZ(0)` 对每行 tr 进行分层。对性能有帮助。
+  - 提升合成层可能导致黑底红字字体颜色发生变化。
+  - 以下情况尝试开启此功能。
+    - 在 `customCell` 较多且复杂时。
+    - 大量 highlight 动画时。
 
 ## Other
 * `$*$` 兼容注释

package/lib/src/StkTable/types/index.d.ts

@@ -8,7 +8,10 @@ type Sorter<T> = boolean | ((data: T[], option: {
 export type CustomCellFunc<T extends Record<string, any>> = (props: {
     row: T;
     col: StkTableColumn<T>;
+    /** row[col.dataIndex] 的值 */
     cellValue: any;
+    rowIndex: number;
+    colIndex: number;
 }) => VNode;
 export type CustomHeaderCellFunc<T extends Record<string, any>> = (props: {
     col: StkTableColumn<T>;

package/lib/stk-table-vue.js

@@ -909,11 +909,15 @@ function useVirtualScroll({
     return width;
   });
   function initVirtualScrollY(height) {
+    if (height !== void 0 && typeof height !== "number") {
+      console.warn("initVirtualScrollY: height must be a number");
+      height = 0;
+    }
     if (!virtual_on.value)
       return;
     const { offsetHeight, scrollTop } = tableContainerRef.value || {};
     const { rowHeight } = virtualScroll.value;
-    const containerHeight = height ?? (offsetHeight || DEFAULT_TABLE_HEIGHT);
+    const containerHeight = height || offsetHeight || DEFAULT_TABLE_HEIGHT;
     const { headless, headerRowHeight } = props;
     let pageSize = Math.ceil(containerHeight / rowHeight);
     if (!headless) {
@@ -1706,10 +1710,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       key: 0,
                       col,
                       row,
-                      "row-index": rowIndex,
-                      "col-index": colIndex,
-                      "cell-value": row[col.dataIndex]
-                    }, null, 8, ["col", "row", "row-index", "col-index", "cell-value"])) : (openBlock(), createElementBlock("div", {
+                      rowIndex,
+                      colIndex,
+                      cellValue: row[col.dataIndex]
+                    }, null, 8, ["col", "row", "rowIndex", "colIndex", "cellValue"])) : (openBlock(), createElementBlock("div", {
                       key: 1,
                       class: "table-cell-wrapper",
                       title: !col.type ? row[col.dataIndex] : ""

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "stk-table-vue",
-    "version": "0.3.4",
+    "version": "0.3.5",
     "description": "Simple realtime virtual table for vue3 and vue2.7",
     "main": "./lib/stk-table-vue.js",
     "types": "./lib/src/StkTable/index.d.ts",
@@ -32,7 +32,7 @@
     "author": "japlus",
     "repository": {
         "type": "git",
-        "url": "https://gitee.com/japlus/stk-table-vue"
+        "url": "https://github.com/ja-plus/stk-table-vue"
     },
     "license": "MIT",
     "devDependencies": {

package/src/StkTable/StkTable.vue

@@ -176,9 +176,9 @@
                             v-if="col.customCell"
                             :col="col"
                             :row="row"
-                            :row-index="rowIndex"
-                            :col-index="colIndex"
-                            :cell-value="row[col.dataIndex]"
+                            :rowIndex="rowIndex"
+                            :colIndex="colIndex"
+                            :cellValue="row[col.dataIndex]"
                         />
                         <div v-else class="table-cell-wrapper" :title="!col.type ? row[col.dataIndex] : ''">
                             <template v-if="col.type === 'seq'">

package/src/StkTable/types/index.ts

@@ -5,7 +5,15 @@ export type Order = null | 'asc' | 'desc';
 
 type Sorter<T> = boolean | ((data: T[], option: { order: Order; column: any }) => T[]);
 
-export type CustomCellFunc<T extends Record<string, any>> = (props: { row: T; col: StkTableColumn<T>; cellValue: any }) => VNode;
+export type CustomCellFunc<T extends Record<string, any>> = (props: {
+    row: T;
+    col: StkTableColumn<T>;
+    /** row[col.dataIndex] 的值 */
+    cellValue: any;
+    rowIndex: number;
+    colIndex: number;
+}) => VNode;
+
 export type CustomHeaderCellFunc<T extends Record<string, any>> = (props: { col: StkTableColumn<T> }) => VNode;
 
 /** 表格列配置 */

package/src/StkTable/useVirtualScroll.ts

@@ -143,10 +143,14 @@ export function useVirtualScroll<DT extends Record<string, any>>({
      * @param {number} [height] 虚拟滚动的高度
      */
     function initVirtualScrollY(height?: number) {
+        if (height !== void 0 && typeof height !== 'number') {
+            console.warn('initVirtualScrollY: height must be a number');
+            height = 0;
+        }
         if (!virtual_on.value) return;
         const { offsetHeight, scrollTop } = tableContainerRef.value || {};
         const { rowHeight } = virtualScroll.value;
-        const containerHeight = height ?? (offsetHeight || DEFAULT_TABLE_HEIGHT);
+        const containerHeight = height || offsetHeight || DEFAULT_TABLE_HEIGHT;
         const { headless, headerRowHeight } = props;
         let pageSize = Math.ceil(containerHeight / rowHeight);
         if (!headless) {