stk-table-vue 0.3.1 → 0.3.3

package/src/StkTable/style.less

@@ -14,6 +14,7 @@
     --border-color: #e8e8f4;
     --border-width: 1px;
     --td-bgc: #fff;
+    --td-hover-color: #71a2fd;
     --th-bgc: #fafafc;
     --th-color: #272841;
     --tr-active-bgc: rgb(230, 247, 255);
@@ -48,11 +49,13 @@
     border-left: 1px solid var(--border-color);
     /* 下面border用于表格内容不满高度时，绘制表格边界线 */
     background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
+
     /**深色模式 */
     &.dark {
         --th-bgc: #202029;
         --th-color: #C0C0D1;
         --td-bgc: #1b1b24;
+        --td-hover-color: #70a6ff;
         --border-color: #292933;
         --tr-active-bgc: #283f63;
         --tr-hover-bgc: #1a2b46;
@@ -113,28 +116,8 @@
             background-image: var(--bg-border-right), var(--bg-border-bottom);
         }
 
-        thead {
-            tr {
-                &:first-child th {
-                    background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
-                }
-
-            }
-        }
-
-
-        &.virtual-x {
-            .virtual-x-left {
-                background: none;
-                pointer-events: none;
-            }
-
-            .virtual-x-right {
-                padding: 0;
-                background: none;
-                pointer-events: none;
-            }
-
+        thead tr:first-child th {
+            background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
         }
     }
 
@@ -144,240 +127,269 @@
         }
     }
 
+    /* 斑马纹*/
     &.stripe {
 
-        /* 斑马纹*/
-        tbody {
-            tr:nth-child(odd) {
-                background-color: var(--stripe-bgc);
-            }
+        tbody tr:nth-child(odd) {
+            background-color: var(--stripe-bgc);
         }
     }
 
-    /** 列宽调整指示器 */
-    .column-resize-indicator {
-        width: 0;
-        height: 100%;
-        border-left: 2px solid var(--col-resize-indicator-color);
-        position: absolute;
-        z-index: 10;
-        display: none;
-        pointer-events: none;
+    /* 单元格悬浮 */
+    &.cell-hover tbody td:hover {
+        box-shadow: inset 0 0 0 2px var(--td-hover-color);
     }
 
-    .stk-table-main {
-        border-spacing: 0;
-        border-collapse: separate;
-        width: fit-content;
-        /* 不加会导致width 超过100%时为100%，行hover高亮会断开*/
-        min-width: 100%;
+    /* td 溢出*/
+    &.text-overflow {
+        .table-cell-wrapper {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
 
-        &.fixed-mode {
-            table-layout: fixed;
-            min-width: min-content;
+    /* th 溢出*/
+    &.header-text-overflow {
+        .table-header-cell-wrapper {
+            white-space: nowrap;
+            overflow: hidden;
         }
 
-        th,
-        td {
-            z-index: 1;
-            font-size: 14px;
-            box-sizing: border-box;
-            padding: 0 var(--cell-padding-x);
+        .table-header-title {
+            text-overflow: ellipsis;
+            overflow: hidden;
         }
+    }
 
-        th {
-            color: var(--th-color);
-            background-color: var(--th-bgc);
+    /**虚拟滚动模式 */
+    &.virtual {
 
-            &.sortable {
-                cursor: pointer;
-            }
+        /* 为不影响布局，表头行高要定死*/
+        .table-header-cell-wrapper {
+            overflow: hidden;
+            max-height: var(--header-row-height);
+        }
 
-            &.text-overflow {
-                .table-header-cell-wrapper {
-                    white-space: nowrap;
-                    overflow: hidden;
-                }
+        tbody td {
+            height: var(--row-height);
+            line-height: 1;
 
-                .table-header-title {
-                    text-overflow: ellipsis;
-                    overflow: hidden;
-                }
+            .table-cell-wrapper {
+                max-height: var(--row-height);
+                overflow: hidden;
             }
         }
 
-        td {
-            &.fixed-cell {
-                background-color: inherit;
-                /* 防止横向滚动后透明*/
-            }
+        .padding-top-tr td {
+            height: 0;
+        }
+    }
 
-            &.highlight-cell {
-                animation: stk-table-dim var(--highlight-duration);
-                animation-timing-function: var(--highlight-timing-function); /* 必须分开些，否则var(step(x))不兼容旧浏览器*/
-            }
+    th,
+    td {
+        z-index: 1;
+        font-size: 14px;
+        box-sizing: border-box;
+        padding: 0 var(--cell-padding-x);
+    }
 
-            &.text-overflow {
-                .table-cell-wrapper {
-                    white-space: nowrap;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                }
-            }
-            
-            &.seq-column{
-                text-align: center;
-            }
+    th {
+        color: var(--th-color);
+        background-color: inherit;
+
+        &.sortable {
+            cursor: pointer;
         }
 
-        /*固定列阴影-左*/
-        .fixed-cell--left {
-            --shadow-rotate: 90deg;
+        &:not(.sorter-desc):not(.sorter-asc):hover .table-header-sorter {
+            .arrow-up {
+                fill: var(--sort-arrow-hover-color);
+            }
 
-            &.fixed-cell--shadow::after {
-                right: -10px;
+            .arrow-down {
+                fill: var(--sort-arrow-hover-color);
             }
         }
 
-        /*固定列阴影-右*/
-        .fixed-cell--right {
-            --shadow-rotate: -90deg;
+        &.sorter-desc .table-header-sorter {
+            display: initial;
 
-            &.fixed-cell--shadow::after {
-                left: -10px;
+            .arrow-up {
+                fill: var(--sort-arrow-active-sub-color);
             }
-        }
 
-        /*固定列阴影*/
-        .fixed-cell--shadow::after {
-            content: '';
-            width: 10px;
-            height: 100%;
-            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)),
+            .arrow-down {
+                fill: var(--sort-arrow-active-color);
+            }
         }
 
-        thead {
-            tr {
-                height: var(--header-row-height);
+        &.sorter-asc .table-header-sorter {
+            display: initial;
+
+            .arrow-up {
+                fill: var(--sort-arrow-active-color);
+            }
 
-                &:first-child th {
-                    position: sticky;
-                    top: 0;
-                }
+            .arrow-down {
+                fill: var(--sort-arrow-active-sub-color);
             }
         }
 
-        th {
+    }
 
-            &:not(.sorter-desc):not(.sorter-asc):hover .table-header-sorter {
-                .arrow-up {
-                    fill: var(--sort-arrow-hover-color);
-                }
+    thead {
+        tr {
+            background-color: var(--th-bgc);
+            height: var(--header-row-height);
 
-                .arrow-down {
-                    fill: var(--sort-arrow-hover-color);
-                }
+            &:first-child th {
+                position: sticky;
+                top: 0;
             }
+        }
+    }
 
-            &.sorter-desc .table-header-sorter {
-                display: initial;
+    /* stk-table-main 这层为了增加选择器优先级，防止被斑马纹颜色覆盖*/
+    .stk-table-main tbody tr {
+        background-color: var(--td-bgc);
+        height: var(--row-height);
+        /** 一行分层，有利于高亮行重绘
+        transform: translateZ(0);*/
 
-                .arrow-up {
-                    fill: var(--sort-arrow-active-sub-color);
-                }
+        &:hover {
+            background-color: var(--tr-hover-bgc);
+        }
 
-                .arrow-down {
-                    fill: var(--sort-arrow-active-color);
-                }
-            }
+        &.active {
+            background-color: var(--tr-active-bgc);
+        }
+    }
 
-            &.sorter-asc .table-header-sorter {
-                display: initial;
+    .virtual-x-left,
+    .virtual-x-right {
+        padding: 0;
+        background: none;
+        pointer-events: none;
+    }
 
-                .arrow-up {
-                    fill: var(--sort-arrow-active-color);
-                }
 
-                .arrow-down {
-                    fill: var(--sort-arrow-active-sub-color);
-                }
-            }
+    /** 列宽调整指示器 */
+    .column-resize-indicator {
+        width: 0;
+        height: 100%;
+        border-left: 2px solid var(--col-resize-indicator-color);
+        position: absolute;
+        z-index: 10;
+        display: none;
+        pointer-events: none;
+    }
 
+    .stk-table-main {
+        border-spacing: 0;
+        border-collapse: separate;
+        width: fit-content;
+        /* 不加会导致width 超过100%时为100%，行hover高亮会断开*/
+        min-width: 100%;
 
+        &.fixed-mode {
+            table-layout: fixed;
+            min-width: min-content;
         }
+    }
 
-        .table-header-cell-wrapper {
-            max-width: 100%;
-            /*最大宽度不超过列宽*/
-            display: inline-flex;
-            align-items: center;
-        }
+    .fixed-cell {
+        background-color: inherit;
+        /* 防止横向滚动后透明*/
+    }
 
-        .table-header-title {
-            overflow: hidden;
-            align-self: flex-start;
+    .highlight-cell {
+        animation: stk-table-dim var(--highlight-duration);
+        animation-timing-function: var(--highlight-timing-function);
+        /* 必须分开些，否则var(step(x))不兼容旧浏览器*/
+    }
+
+    .seq-column {
+        text-align: center;
+    }
+
+    /*固定列阴影-左*/
+    .fixed-cell--left {
+        --shadow-rotate: 90deg;
+
+        &.fixed-cell--shadow::after {
+            right: -10px;
         }
+    }
 
-        .table-header-sorter {
-            flex-shrink: 0;
-            margin-left: 4px;
-            width: 16px;
-            height: 16px;
-            display: none;
+    /*固定列阴影-右*/
+    .fixed-cell--right {
+        --shadow-rotate: -90deg;
 
-            .arrow-up,
-            .arrow-down {
-                fill: var(--sort-arrow-color);
-            }
+        &.fixed-cell--shadow::after {
+            left: -10px;
         }
+    }
+
+    /*固定列阴影*/
+    .fixed-cell--shadow::after {
+        content: '';
+        width: 10px;
+        height: 100%;
+        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)),
+    }
+
+    .table-header-cell-wrapper {
+        max-width: 100%;
+        /*最大宽度不超过列宽*/
+        display: inline-flex;
+        align-items: center;
+    }
 
-        .table-header-resizer {
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            cursor: col-resize;
-            width: var(--resize-handle-width);
+    .table-header-title {
+        overflow: hidden;
+        align-self: flex-start;
+    }
 
-            &.left {
-                left: 0;
-            }
+    .table-header-sorter {
+        flex-shrink: 0;
+        margin-left: 4px;
+        width: 16px;
+        height: 16px;
+        display: none;
 
-            &.right {
-                right: 0;
-            }
+        .arrow-up,
+        .arrow-down {
+            fill: var(--sort-arrow-color);
         }
+    }
 
-        tbody {
+    .table-header-resizer {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        cursor: col-resize;
+        width: var(--resize-handle-width);
 
-            tr {
-                background-color: var(--td-bgc);
-                height: var(--row-height);
-                /** 一行分层，有利于高亮行重绘*/
-                transform: translateZ(0); 
-
-                /* td inherit tr bgc*/
-                &.highlight-row {
-                    animation: stk-table-dim var(--highlight-duration);
-                    animation-timing-function: var(--highlight-timing-function); /* 必须分开些，否则var(step(x))不兼容旧浏览器*/
-                }
-                
-
-                &.hover,
-                &:hover {
-                    background-color: var(--tr-hover-bgc);
-                }
-
-                &.active {
-                    background-color: var(--tr-active-bgc);
-                }
-            }
+        &.left {
+            left: 0;
+        }
 
+        &.right {
+            right: 0;
         }
     }
 
+    /* td inherit tr bgc*/
+    .highlight-row {
+        animation: stk-table-dim var(--highlight-duration);
+        /* 必须分开写，否则var(step(x))不兼容旧浏览器*/
+        animation-timing-function: var(--highlight-timing-function);
+    }
+
     .stk-table-no-data {
         background-color: var(--table-bgc);
         line-height: var(--row-height);
@@ -397,40 +409,4 @@
         }
     }
 
-    /**虚拟滚动模式 */
-    &.virtual {
-
-        /* 为不影响布局，表头行高要定死*/
-        .table-header-cell-wrapper {
-            overflow: hidden;
-            max-height: var(--header-row-height);
-        }
-
-        tbody {
-            position: relative;
-
-            tr {
-
-                td {
-                    height: var(--row-height);
-                    line-height: 1;
-
-                    .table-cell-wrapper {
-                        max-height: var(--row-height);
-                        overflow: hidden;
-                    }
-                }
-            }
-        }
-
-        .padding-top-tr td {
-            height: 0;
-        }
-    }
-
-    &.virtual-x {
-        .virtual-x-left {
-            padding: 0;
-        }
-    }
 }

package/src/StkTable/useColResize.ts

@@ -1,5 +1,5 @@
-import { Ref, ShallowRef, onBeforeUnmount, onMounted, ref } from 'vue';
-import { StkTableColumn } from './types';
+import { ComputedRef, Ref, ShallowRef, onBeforeUnmount, onMounted, ref } from 'vue';
+import { StkTableColumn, UniqKey } from './types';
 import { getCalculatedColWidth } from './utils';
 
 type ColResizeState<DT extends Record<string, any>> = {
@@ -21,7 +21,7 @@ type Params<DT extends Record<string, any>> = {
     tableContainerRef: Ref<HTMLElement | undefined>;
     tableHeaderLast: ShallowRef<StkTableColumn<DT>[]>;
     colResizeIndicatorRef: Ref<HTMLElement | undefined>;
-    colKeyGen: (p: any) => string;
+    colKeyGen: ComputedRef<(p: any) => UniqKey>;
 };
 
 /** 列宽拖动 */
@@ -78,7 +78,7 @@ export function useColResize<DT extends Record<string, any>>({
         const { scrollLeft, scrollTop } = tableContainerRef.value;
         const { left } = tableContainerRef.value.getBoundingClientRect();
         /** 列下标 */
-        let colIndex = tableHeaderLast.value.findIndex(it => colKeyGen(it) === colKeyGen(col));
+        let colIndex = tableHeaderLast.value.findIndex(it => colKeyGen.value(it) === colKeyGen.value(col));
         if (isPrev) {
             // 上一列
             colIndex -= 1;
@@ -139,7 +139,7 @@ export function useColResize<DT extends Record<string, any>>({
         let width = getCalculatedColWidth(lastCol) + moveX;
         if (width < props.colMinWidth) width = props.colMinWidth;
 
-        const curCol = tableHeaderLast.value.find(it => colKeyGen(it) === colKeyGen(lastCol));
+        const curCol = tableHeaderLast.value.find(it => colKeyGen.value(it) === colKeyGen.value(lastCol));
         if (!curCol) return;
         curCol.width = width + 'px';
 

package/src/StkTable/useFixedCol.ts

@@ -1,9 +1,9 @@
-import { computed, ref, Ref, ShallowRef, shallowRef } from 'vue';
-import { StkTableColumn } from './types';
+import { computed, ComputedRef, ref, Ref, ShallowRef, shallowRef } from 'vue';
+import { StkTableColumn, UniqKey } from './types';
 
 type Params<T extends Record<string, any>> = {
     props: any;
-    colKeyGen: (col: StkTableColumn<T>) => string;
+    colKeyGen: ComputedRef<(col: StkTableColumn<T>) => UniqKey>;
     tableHeaders: ShallowRef<StkTableColumn<T>[][]>;
     tableHeaderLast: ShallowRef<StkTableColumn<T>[]>;
     tableContainerRef: Ref<HTMLDivElement | undefined>;
@@ -42,7 +42,7 @@ export function useFixedCol<DT extends Record<string, any>>({ props, colKeyGen,
                     ['fixed-cell--' + col.fixed]: col.fixed,
                     'fixed-cell--shadow': showShadow,
                 };
-                colMap.set(colKeyGen(col), classObj);
+                colMap.set(colKeyGen.value(col), classObj);
             });
         });
         return colMap;

package/src/StkTable/useFixedStyle.ts

@@ -75,37 +75,58 @@ export function useFixedStyle<DT extends Record<string, any>>({
         const { fixed } = col;
         if (tagType === TagType.TD && !fixed) return null;
 
-        const isFixedLeft = fixed === 'left';
         const style: CSSProperties = {};
         const { colKeyStore, refStore } = fixedColumnsPositionStore.value;
 
+        /** 是否是relative模式完成固定列 */
+        let isRelativeMode = true;
+        if (props.cellFixedMode === 'sticky') {
+            isRelativeMode = false;
+        }
+
         if (IS_LEGACY_MODE) {
+            // 低版本浏览器只能为固定列设置position: sticky
+            isRelativeMode = true;
+        }
+
+        const { scrollLeft, scrollWidth, offsetLeft, containerWidth } = virtualScrollX.value;
+        const scrollRight = scrollWidth - containerWidth - scrollLeft;
+
+        if (virtualScrollX.value.scrollLeft === 0 && fixed === 'left' && tagType === TagType.TD) {
+            // 滚动条在最左侧时，左侧固定列不需要，防止分层
+            style.position = void 0;
+        } else if (scrollRight === 0 && fixed === 'right' && tagType === TagType.TD) {
+            // 滚动条在最右侧时，右侧固定列不需要，防止分层
+            style.position = void 0;
+        } else if (isRelativeMode) {
             style.position = 'relative';
         } else {
             style.position = 'sticky';
         }
 
+        const isFixedLeft = fixed === 'left';
         if (tagType === TagType.TH) {
             // TH
-            if (IS_LEGACY_MODE) {
-                style.top = virtualScroll.value.scrollTop + depth * props.rowHeight + 'px';
+            if (isRelativeMode) {
+                style.top = virtualScroll.value.scrollTop + 'px';
             } else {
                 style.top = depth * props.rowHeight + 'px';
             }
             style.zIndex = isFixedLeft ? '3' : '2'; // 保证固定列高于其他单元格
         } else {
             // TD
-            style.zIndex = isFixedLeft ? '2' : '1';
+            if (isFixedLeft) {
+                style.zIndex = '2';
+            }
         }
 
         if (fixed === 'left' || fixed === 'right') {
-            if (IS_LEGACY_MODE) {
+            if (isRelativeMode) {
                 if (isFixedLeft) {
-                    if (virtualX_on.value) style.left = virtualScrollX.value.scrollLeft - virtualScrollX.value.offsetLeft + 'px';
-                    else style.left = virtualScrollX.value.scrollLeft + 'px';
+                    style.left = scrollLeft - (virtualX_on.value ? offsetLeft : 0) + 'px';
                 } else {
-                    // TODO:计算右侧距离
-                    style.right = `${virtualX_offsetRight.value}px`;
+                    // fixed right
+                    style.right = Math.max(scrollRight - (virtualX_on.value ? virtualX_offsetRight.value : 0), 0) + 'px';
                 }
             } else {
                 const lr = (col.dataIndex ? colKeyStore[col.dataIndex] : refStore.get(col)) + 'px';