stk-table-vue 0.6.7 → 0.6.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stk-table-vue",
-  "version": "0.6.7",
+  "version": "0.6.9",
   "description": "Simple realtime virtual table for vue3 and vue2.7",
   "main": "./lib/stk-table-vue.js",
   "types": "./lib/src/StkTable/index.d.ts",
@@ -62,7 +62,7 @@
     "prettier": "^3.2.5",
     "typescript": "^5.4.5",
     "vite": "^5.4.10",
-    "vite-plugin-dts": "^4.3.0",
+    "vite-plugin-dts": "3.9.1",
     "vitepress": "^1.5.0",
     "vitepress-demo-plugin": "^1.2.2",
     "vitest": "^2.1.3",

package/src/StkTable/StkTable.vue

@@ -24,6 +24,7 @@
             'header-text-overflow': props.showHeaderOverflow,
             'fixed-relative-mode': isRelativeMode,
             'auto-row-height': props.autoRowHeight,
+            'scroll-row-by-row': props.scrollRowByRow,
         }"
         :style="{
             '--row-height': props.autoRowHeight ? void 0 : virtualScroll.rowHeight + 'px',
@@ -34,13 +35,13 @@
         @scroll="onTableScroll"
         @wheel="onTableWheel"
     >
-        <!-- 这个元素用于虚拟滚动时，撑开父容器的高度 （已弃用，因为滚动条拖动过快，下方tr为加载出来时，会导致表头sticky闪动）
+        <!-- 这个元素用于整数行虚拟滚动时，撑开父容器的高度） -->
         <div
-          v-if="virtual"
-          class="virtual-table-height"
-          :style="{ height: dataSourceCopy.length * virtualScroll.rowHeight + 'px' }"
+            v-if="props.scrollRowByRow && virtual"
+            class="row-by-row-table-height"
+            :style="{ height: dataSourceCopy.length * virtualScroll.rowHeight + 'px' }"
         ></div>
-      -->
+
         <div v-if="colResizable" ref="colResizeIndicatorRef" class="column-resize-indicator"></div>
         <!-- 表格主体 -->
         <table
@@ -118,7 +119,7 @@
             <!-- <tbody v-if="virtual_on" :style="{ height: `${virtualScroll.offsetTop}px` }"></tbody> -->
             <!-- <tbody :style="{ transform: `translateY(${virtualScroll.offsetTop}px)` }"> -->
             <tbody class="stk-tbody-main" @dragover="onTrDragOver" @dragenter="onTrDragEnter" @dragend="onTrDragEnd">
-                <tr v-if="virtual_on" :style="`height:${virtualScroll.offsetTop}px`" class="padding-top-tr">
+                <tr v-if="virtual_on && !props.scrollRowByRow" :style="`height:${virtualScroll.offsetTop}px`" class="padding-top-tr">
                     <!--这个td用于配合虚拟滚动的th对应，防止列错位-->
                     <td v-if="virtualX_on && fixedMode && headless" class="vt-x-left"></td>
                     <template v-if="fixedMode && headless">
@@ -181,6 +182,7 @@
                                     onCellClick(e, row, col);
                                 }
                             "
+                            @mousedown="e => onCellMouseDown(e, row, col)"
                             @mouseenter="e => onCellMouseEnter(e, row, col)"
                             @mouseleave="e => onCellMouseLeave(e, row, col)"
                             @mouseover="e => onCellMouseOver(e, row, col)"
@@ -221,7 +223,7 @@
                         </td>
                     </template>
                 </tr>
-                <tr v-if="virtual_on" :style="`height: ${virtual_offsetBottom}px`"></tr>
+                <tr v-if="virtual_on && !props.scrollRowByRow" :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 }">
@@ -406,6 +408,8 @@ const props = withDefaults(
          * - true: 不使用 onwheel 滚动。鼠标滚轮滚动时更加平滑。滚动过快时会白屏。
          */
         smoothScroll?: boolean;
+        /** 按整数行纵向滚动 */
+        scrollRowByRow?: boolean;
     }>(),
     {
         width: '',
@@ -456,6 +460,7 @@ const props = withDefaults(
         dragRowConfig: () => ({}),
         cellFixedMode: 'sticky',
         smoothScroll: DEFAULT_SMOOTH_SCROLL,
+        scrollRowByRow: false,
     },
 );
 
@@ -526,6 +531,12 @@ const emits = defineEmits<{
      * ```(ev: MouseEvent, row: DT, col: StkTableColumn<DT>)```
      */
     (e: 'cell-mouseover', ev: MouseEvent, row: DT, col: StkTableColumn<DT>): void;
+    /**
+     * 单元格鼠标按下事件
+     *
+     * ```(ev: MouseEvent, row: DT, col: StkTableColumn<DT>)```
+     */
+    (e: 'cell-mousedown', ev: MouseEvent, row: DT, col: StkTableColumn<DT>): void;
     /**
      * 表头单元格点击事件
      *
@@ -571,9 +582,9 @@ const emits = defineEmits<{
     /**
      * 列宽变动时触发
      *
-     *  ```(cols: StkTableColumn<DT>)```
+     *  ```(col: StkTableColumn<DT>)```
      */
-    (e: 'col-resize', cols: StkTableColumn<DT>): void;
+    (e: 'col-resize', col: StkTableColumn<DT>): void;
     /**
      * 展开行触发
      *
@@ -1149,6 +1160,10 @@ function onCellMouseOver(e: MouseEvent, row: DT, col: StkTableColumn<DT>) {
     emits('cell-mouseover', e, row, col);
 }
 
+function onCellMouseDown(e: MouseEvent, row: DT, col: StkTableColumn<DT>) {
+    emits('cell-mousedown', e, row, col);
+}
+
 /**
  * 鼠标滚轮事件监听。代理滚轮事件，防止滚动过快出现白屏。
  * @param e

package/src/StkTable/style.less

@@ -54,7 +54,7 @@
     /**深色模式 */
     &.dark {
         --th-bgc: #202029;
-        --th-color: #C0C0D1;
+        --th-color: #c0c0d1;
         --td-bgc: #1b1b24;
         --td-hover-color: #70a6ff;
         --td-active-color: #386ccc;
@@ -83,7 +83,6 @@
         /* ⭐这里加background-color会导致表格出滚动白屏*/
         color: #d1d1e0;
     }
-       
 
     &.headless {
         &.border {
@@ -140,8 +139,6 @@
         --bg-border-top: linear-gradient(transparent, transparent);
     }
 
-
-
     &.border-body-v {
         tbody {
             --bg-border-bottom: linear-gradient(transparent, transparent);
@@ -167,13 +164,11 @@
         }
     }
 
-
     /** more weight for custom row background*/
     &.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);
     }
@@ -212,7 +207,6 @@
 
     /**虚拟滚动模式 */
     &.virtual {
-
         /* 为不影响布局，表头行高要定死*/
         .table-header-cell-wrapper {
             overflow: hidden;
@@ -246,7 +240,6 @@
     }
 
     &.auto-row-height {
-
         tbody td {
             height: unset;
 
@@ -255,7 +248,6 @@
                 overflow: initial;
             }
         }
-
     }
 
     &.fixed-relative-mode {
@@ -268,6 +260,19 @@
         }
     }
 
+    &.scroll-row-by-row {
+        .stk-table-main {
+            position: sticky;
+            top: 0;
+        }
+    }
+
+    .row-by-row-table-height {
+        width: 1px;
+        position: absolute;
+        left: 0;
+    }
+
     th,
     td {
         font-size: 14px;
@@ -322,7 +327,6 @@
                 fill: var(--sort-arrow-active-sub-color);
             }
         }
-
     }
 
     thead tr {
@@ -330,13 +334,11 @@
         height: var(--header-row-height);
     }
 
-
     tbody tr {
         background-color: var(--td-bgc);
         height: var(--row-height);
     }
 
-
     .vt-x-left,
     .vt-x-right {
         padding: 0;
@@ -344,7 +346,6 @@
         pointer-events: none;
     }
 
-
     /** 列宽调整指示器 */
     .column-resize-indicator {
         width: 0;
@@ -387,23 +388,23 @@
     .expand-cell {
         cursor: pointer;
 
-            .expanded-cell-wrapper {
-                &::before {
-                    content: '';
-                    display: inline-block;
-                    margin: 0 2px;
-                    width: 0;
-                    height: 0;
-                    border-left: 5px solid #757699;
-                    border-top: 4px solid transparent;
-                    border-bottom: 4px solid transparent;
-                    transition: transform 0.2s ease;
-                }
-
-                >span {
-                    margin-left: var(--cell-padding-x)
-                }
+        .expanded-cell-wrapper {
+            &::before {
+                content: '';
+                display: inline-block;
+                margin: 0 2px;
+                width: 0;
+                height: 0;
+                border-left: 5px solid #757699;
+                border-top: 4px solid transparent;
+                border-bottom: 4px solid transparent;
+                transition: transform 0.2s ease;
+            }
+
+            > span {
+                margin-left: var(--cell-padding-x);
             }
+        }
 
         &.expanded {
             .table-cell-wrapper::before {
@@ -430,14 +431,14 @@
                 cursor: grabbing;
             }
 
-            >svg {
+            > svg {
                 vertical-align: -2px;
             }
         }
     }
 
     .tr-dragging {
-        opacity: .5;
+        opacity: 0.5;
     }
 
     .tr-dragging-over {
@@ -470,7 +471,7 @@
         top: 0px;
         position: absolute;
         pointer-events: none;
-        background-image: linear-gradient(var(--shadow-rotate), var(--fixed-col-shadow-color-from), var(--fixed-col-shadow-color-to)),
+        background-image: linear-gradient(var(--shadow-rotate), var(--fixed-col-shadow-color-from), var(--fixed-col-shadow-color-to));
     }
 
     .fixed-cell--active {
@@ -551,7 +552,4 @@
             flex: 1;
         }
     }
-
-
-
-}
+}