vxe-table 3.25.0-beta.0 → 3.25.0-beta.2

package/es/table/src/methods.js

@@ -6,6 +6,7 @@ import Cell from './cell';
 import { getRowUniqueId, createRowId, clearTableAllStatus, getColumnList, toFilters, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleRowidOrRow, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, getRootColumn, getColReMinWidth, getColReMaxWidth, createHandleUpdateRowId, createHandleGetRowId, getRefElem, getCellRestHeight, getLastChildColumn, getRowMaxHeight, handleCustomStoreConfig, encodeRowid } from './util';
 import { getSlotVNs } from '../../ui/src/vn';
 import { moveRowAnimateToTb, clearRowAnimate, moveColAnimateToLr, clearColAnimate } from '../../ui/src/anime';
+import { getThumbOffsetSize, getThumbSize, getScrollFromClick, getScrollFromDrag } from './scrollbar';
 import { createComponentLog } from '../../ui/src/log';
 import { getCrossTableDragRowInfo } from './store';
 const { warnLog, errLog } = createComponentLog('table');
@@ -996,7 +997,6 @@ function updateStyle($xeTable) {
     const isHeaderRenderOptimize = $xeTable.computeIsHeaderRenderOptimize;
     const isBodyRenderOptimize = $xeTable.computeIsBodyRenderOptimize;
     const isFooterRenderOptimize = $xeTable.computeIsFooterRenderOptimize;
-    const scrollbarOpts = $xeTable.computeScrollbarOpts;
     const mouseOpts = $xeTable.computeMouseOpts;
     const bodyWrapperElem = getRefElem(elemStore['main-body-wrapper']);
     const bodyTableElem = getRefElem(elemStore['main-body-table']);
@@ -1004,24 +1004,26 @@ function updateStyle($xeTable) {
         emptyPlaceholderElem.style.top = `${tHeaderHeight}px`;
         emptyPlaceholderElem.style.height = bodyWrapperElem ? `${bodyWrapperElem.offsetHeight - osbHeight}px` : '';
     }
-    const scrollbarXConf = scrollbarOpts.x || {};
-    const scrollbarYConf = scrollbarOpts.y || {};
+    const scrollXVisible = $xeTable.computeScrollXVisible;
+    const scrollYVisible = $xeTable.computeScrollYVisible;
     const scrollbarYToLeft = $xeTable.computeScrollbarYToLeft;
     let xScrollbarVisible = overflowX ? 'visible' : 'hidden';
-    if (scrollbarXConf.visible === 'visible' || $xeGanttView) {
+    const hideXScroll = scrollXVisible === false || scrollXVisible === 'hidden';
+    if (scrollXVisible === 'visible' || $xeGanttView) {
         osbHeight = scrollbarHeight;
         xScrollbarVisible = 'visible';
     }
-    else if (scrollbarXConf.visible === 'hidden' || scrollbarXConf.visible === false) {
+    else if (hideXScroll) {
         osbHeight = 0;
         xScrollbarVisible = 'hidden';
     }
     let yScrollbarVisible = overflowY ? 'visible' : 'hidden';
-    if ((scrollbarYConf.visible === 'hidden' || scrollbarYConf.visible === false) || (($xeGantt && $xeGanttView && $xeGantt.reactData.showRightView) && !scrollbarYToLeft)) {
+    const hideYScroll = scrollYVisible === false || scrollYVisible === 'hidden';
+    if (hideYScroll || (($xeGantt && $xeGanttView && $xeGantt.reactData.showRightView) && !scrollbarYToLeft)) {
         osbWidth = 0;
         yScrollbarVisible = 'hidden';
     }
-    else if (scrollbarYConf.visible === 'visible') {
+    else if (scrollYVisible === 'visible') {
         osbWidth = scrollbarWidth;
         yScrollbarVisible = 'visible';
     }
@@ -2349,14 +2351,6 @@ function autoCellWidth($xeTable) {
     if (!bodyWrapperElem) {
         return;
     }
-    const yHandleEl = $xeTable.$refs.refScrollYHandleElem;
-    if (!yHandleEl) {
-        return;
-    }
-    const xHandleEl = $xeTable.$refs.refScrollXHandleElem;
-    if (!xHandleEl) {
-        return;
-    }
     const columnOpts = $xeTable.computeColumnOpts;
     let tWidth = 0;
     const minCellWidth = 40; // 列宽最少限制 40px
@@ -3031,7 +3025,6 @@ function calcScrollbar($xeTable) {
     const internalData = $xeTable;
     const { scrollXWidth, scrollYHeight } = reactData;
     const { elemStore } = internalData;
-    const scrollbarOpts = $xeTable.computeScrollbarOpts;
     const el = $xeTable.$refs.refElem;
     if (!el || !el.clientWidth) {
         return;
@@ -3041,19 +3034,31 @@ function calcScrollbar($xeTable) {
     const footerTableElem = getRefElem(elemStore['main-footer-table']);
     const xHandleEl = $xeTable.$refs.refScrollXHandleElem;
     const yHandleEl = $xeTable.$refs.refScrollYHandleElem;
+    const thumbXElem = $xeTable.$refs.refThumbXElem;
+    const thumbYElem = $xeTable.$refs.refThumbYElem;
     let overflowY = false;
     let overflowX = false;
     if (bodyWrapperElem) {
+        const scrollbarOpts = $xeTable.computeScrollbarOpts;
+        const barWidth = $xeTable.computeScrollYWidth;
+        const barHeight = $xeTable.computeScrollXHeight;
         overflowY = scrollYHeight > bodyWrapperElem.clientHeight;
-        if (yHandleEl) {
-            reactData.scrollbarWidth = scrollbarOpts.width || (yHandleEl.offsetWidth - yHandleEl.clientWidth) || 14;
+        // 如果是虚拟滚动条
+        if (thumbYElem) {
+            reactData.scrollbarHeight = scrollbarOpts.padding ? thumbYElem.offsetWidth : 0;
+        }
+        else if (yHandleEl) {
+            reactData.scrollbarWidth = (barWidth || barHeight) || (yHandleEl.offsetWidth - yHandleEl.clientWidth) || 14;
         }
         reactData.overflowY = overflowY;
         overflowX = scrollXWidth > bodyWrapperElem.clientWidth;
-        if (xHandleEl) {
-            reactData.scrollbarHeight = scrollbarOpts.height || (xHandleEl.offsetHeight - xHandleEl.clientHeight) || 14;
+        // 如果是虚拟滚动条
+        if (thumbXElem) {
+            reactData.scrollbarHeight = scrollbarOpts.padding ? thumbXElem.offsetHeight : 0;
+        }
+        else if (xHandleEl) {
+            reactData.scrollbarHeight = (barHeight || barWidth) || (xHandleEl.offsetHeight - xHandleEl.clientHeight) || 14;
         }
-        reactData.overflowX = overflowX;
         const hHeight = headerTableElem ? headerTableElem.clientHeight : 0;
         const fHeight = footerTableElem ? footerTableElem.clientHeight : 0;
         internalData.tableHeight = bodyWrapperElem.offsetHeight;
@@ -3141,6 +3146,7 @@ function handleLazyRecalculate($xeTable, reFull, reWidth, reHeight, options) {
         const refreshDelay = resizeOpts.refreshDelay || 30;
         const reDelay = rceDelay + refreshDelay;
         const el = $xeTable.$refs.refElem;
+        $xeTable.updateScrollbar();
         if (el && el.clientWidth) {
             autoCellWidth($xeTable);
             updateRowExpandStyle($xeTable);
@@ -9943,6 +9949,14 @@ const tableMethods = {
         }
         return $xeTable.$nextTick();
     },
+    /**
+     * @private
+     */
+    updateScrollbar() {
+        const $xeTable = this;
+        $xeTable.updateThumbSize();
+        $xeTable.updateThumbOffset();
+    },
     /**
      * 表头单元格按下事件
      */
@@ -12249,19 +12263,18 @@ const tableMethods = {
         const props = $xeTable;
         const internalData = $xeTable;
         const { highlightHoverRow } = props;
-        const { lastScrollLeft, lastScrollTop } = internalData;
-        const xHandleEl = $xeTable.$refs.refScrollXHandleElem;
-        const yHandleEl = $xeTable.$refs.refScrollYHandleElem;
-        if (!xHandleEl || !yHandleEl) {
+        const { elemStore, lastScrollLeft, lastScrollTop } = internalData;
+        const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
+        if (!bodyScrollElem) {
             return;
         }
         const rowOpts = $xeTable.computeRowOpts;
         const validTip = $xeTable.$refs.refValidTooltip;
         const tooltip = $xeTable.$refs.refTooltip;
-        const bodyHeight = yHandleEl.clientHeight;
-        const bodyWidth = xHandleEl.clientWidth;
-        const scrollHeight = yHandleEl.scrollHeight;
-        const scrollWidth = xHandleEl.scrollWidth;
+        const bodyHeight = bodyScrollElem.clientHeight;
+        const bodyWidth = bodyScrollElem.clientWidth;
+        const scrollHeight = bodyScrollElem.scrollHeight;
+        const scrollWidth = bodyScrollElem.scrollWidth;
         let isTop = false;
         let isBottom = false;
         let isLeft = false;
@@ -12323,6 +12336,7 @@ const tableMethods = {
             isLeft,
             isRight,
             direction }, params);
+        $xeTable.updateThumbOffset();
         updateRowExpandStyle($xeTable);
         checkLastSyncScroll($xeTable, isRollX, isRollY);
         if (isRollX) {
@@ -12370,8 +12384,10 @@ const tableMethods = {
     },
     triggerBodyScrollEvent(evnt, fixedType) {
         const $xeTable = this;
+        const props = $xeTable;
         const reactData = $xeTable;
         const internalData = $xeTable;
+        const { useScrollbar } = props;
         const { scrollYLoad, scrollXLoad } = reactData;
         const { elemStore, intoRunScroll, lastScrollTop, lastScrollLeft, inWheelScroll, inVirtualScroll, inHeaderScroll, inBodyScroll, scrollRenderType, inFooterScroll } = internalData;
         if (inWheelScroll || inVirtualScroll || inHeaderScroll || inFooterScroll) {
@@ -12391,19 +12407,21 @@ const tableMethods = {
         if (!bodyScrollElem) {
             return;
         }
-        if (!xHandleEl) {
-            return;
-        }
-        if (!yHandleEl) {
-            return;
+        if (!useScrollbar) {
+            if (!xHandleEl) {
+                return;
+            }
+            if (!yHandleEl) {
+                return;
+            }
         }
         if (inBodyScroll) {
             if (scrollRenderType !== fixedType) {
                 return;
             }
         }
-        let scrollTop = yHandleEl.scrollTop;
-        let scrollLeft = xHandleEl.scrollLeft;
+        let scrollTop = 0;
+        let scrollLeft = 0;
         if (leftScrollElem && fixedType === 'left') {
             scrollTop = leftScrollElem.scrollTop;
         }
@@ -12555,8 +12573,8 @@ const tableMethods = {
         const rightFixedWidth = $xeTable.computeRightFixedWidth;
         const { elemStore, lastScrollTop, lastScrollLeft } = internalData;
         const rowOpts = $xeTable.computeRowOpts;
-        const scrollbarXOpts = $xeTable.computeScrollbarXOpts;
-        const scrollbarYOpts = $xeTable.computeScrollbarYOpts;
+        const scrollXVisible = $xeTable.computeScrollXVisible;
+        const scrollYVisible = $xeTable.computeScrollYVisible;
         const xHandleEl = $xeTable.$refs.refScrollXHandleElem;
         const yHandleEl = $xeTable.$refs.refScrollYHandleElem;
         const leftScrollElem = getRefElem(elemStore['left-body-scroll']);
@@ -12579,14 +12597,14 @@ const tableMethods = {
         const isRollY = overflowY && scrollTop !== lastScrollTop;
         if (isRollX) {
             // 如果禁用滚动
-            if (scrollbarXOpts.visible === 'hidden') {
+            if (scrollXVisible === false || scrollXVisible === 'hidden') {
                 evnt.preventDefault();
                 return;
             }
         }
         if (isRollY) {
             // 如果禁用滚动
-            if (scrollbarYOpts.visible === 'hidden') {
+            if (scrollYVisible === false || scrollYVisible === 'hidden') {
                 evnt.preventDefault();
                 return;
             }
@@ -13535,6 +13553,196 @@ const tableMethods = {
         const $xeTable = this;
         return $xeTable.handleClearStack();
     },
+    // 滚动条
+    updateThumbSize() {
+        const $xeTable = this;
+        const reactData = $xeTable;
+        const internalData = $xeTable;
+        const { elemStore } = internalData;
+        const viewEl = getRefElem(elemStore['main-body-scroll']);
+        if (!viewEl) {
+            return;
+        }
+        if (!viewEl.clientHeight || !viewEl.clientHeight) {
+            return;
+        }
+        const trackXEl = $xeTable.$refs.refTrackXElem;
+        const xThumbWidth = trackXEl ? getThumbSize(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0;
+        const thumbXElem = $xeTable.$refs.refThumbXElem;
+        if (thumbXElem) {
+            thumbXElem.style.width = xThumbWidth + 'px';
+        }
+        reactData.xThumbWidth = xThumbWidth;
+        const trackYEl = $xeTable.$refs.refTrackYElem;
+        const yThumbHeight = trackYEl ? getThumbSize(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0;
+        const thumbYElem = $xeTable.$refs.refThumbYElem;
+        if (thumbYElem) {
+            thumbYElem.style.height = yThumbHeight + 'px';
+        }
+        reactData.yThumbHeight = yThumbHeight;
+    },
+    updateThumbOffset() {
+        const $xeTable = this;
+        const reactData = $xeTable;
+        const internalData = $xeTable;
+        const { elemStore } = internalData;
+        const viewEl = getRefElem(elemStore['main-body-scroll']);
+        if (!viewEl) {
+            return;
+        }
+        if (!viewEl.clientHeight || !viewEl.clientHeight) {
+            return;
+        }
+        const { xThumbWidth, yThumbHeight } = reactData;
+        const trackXEl = $xeTable.$refs.refTrackXElem;
+        const thumbXElem = $xeTable.$refs.refThumbXElem;
+        const xThumbLeft = trackXEl && xThumbWidth ? getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth, xThumbWidth) : 0;
+        internalData.xThumbLeft = xThumbLeft;
+        if (thumbXElem && xThumbWidth) {
+            thumbXElem.style.width = xThumbWidth + 'px';
+            thumbXElem.style.transform = `translateX(${xThumbLeft}px)`;
+        }
+        const trackYEl = $xeTable.$refs.refTrackYElem;
+        const thumbYElem = $xeTable.$refs.refThumbYElem;
+        const yThumbTop = trackYEl && yThumbHeight ? getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight, yThumbHeight) : 0;
+        internalData.yThumbTop = yThumbTop;
+        if (thumbYElem && yThumbHeight) {
+            thumbYElem.style.height = yThumbHeight + 'px';
+            thumbYElem.style.transform = `translateY(${yThumbTop}px)`;
+        }
+    },
+    clickTrackXEvent(evnt) {
+        const $xeTable = this;
+        const reactData = $xeTable;
+        const internalData = $xeTable;
+        const { elemStore } = internalData;
+        const trackEl = evnt.currentTarget;
+        if (trackEl !== evnt.target) {
+            return;
+        }
+        const viewEl = getRefElem(elemStore['main-body-scroll']);
+        if (!viewEl) {
+            return;
+        }
+        const { xThumbWidth } = reactData;
+        const trackRect = trackEl.getBoundingClientRect();
+        viewEl.scrollTo({
+            left: getScrollFromClick(evnt.clientX - trackRect.left, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth),
+            behavior: 'auto'
+        });
+    },
+    clickTrackYEvent(evnt) {
+        const $xeTable = this;
+        const reactData = $xeTable;
+        const internalData = $xeTable;
+        const trackEl = evnt.currentTarget;
+        if (trackEl !== evnt.target) {
+            return;
+        }
+        const { elemStore } = internalData;
+        const viewEl = getRefElem(elemStore['main-body-scroll']);
+        if (!viewEl) {
+            return;
+        }
+        const { yThumbHeight } = reactData;
+        const trackRect = trackEl.getBoundingClientRect();
+        viewEl.scrollTo({
+            top: getScrollFromClick(evnt.clientY - trackRect.top, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight),
+            behavior: 'auto'
+        });
+    },
+    pointerdownThumbXEvent(evnt) {
+        const $xeTable = this;
+        const reactData = $xeTable;
+        const internalData = $xeTable;
+        const { elemStore } = internalData;
+        const thumbEl = evnt.currentTarget;
+        internalData.isThumbDrag = true;
+        thumbEl.setPointerCapture(evnt.pointerId);
+        const viewEl = getRefElem(elemStore['main-body-scroll']);
+        if (!viewEl) {
+            return;
+        }
+        const { xThumbWidth } = reactData;
+        const trackEl = thumbEl.parentElement;
+        const trackRect = trackEl.getBoundingClientRect();
+        const pointerPosition = evnt.clientX - trackRect.left;
+        // 记录 thumb 的偏移
+        const thumbOffset = getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
+        internalData.thumbDragOffset = pointerPosition - thumbOffset;
+    },
+    pointermoveThumbXEvent(evnt) {
+        const $xeTable = this;
+        const reactData = $xeTable;
+        const internalData = $xeTable;
+        const thumbEl = evnt.currentTarget;
+        if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
+            return;
+        }
+        const { elemStore, isThumbDrag, thumbDragOffset } = internalData;
+        if (isThumbDrag) {
+            const viewEl = getRefElem(elemStore['main-body-scroll']);
+            if (!viewEl) {
+                return;
+            }
+            const { xThumbWidth } = reactData;
+            const thumbEl = evnt.currentTarget;
+            const trackEl = thumbEl.parentElement;
+            const trackRect = trackEl.getBoundingClientRect();
+            // 更新偏移
+            viewEl.scrollLeft = getScrollFromDrag(evnt.clientX - trackRect.left, thumbDragOffset, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
+        }
+    },
+    cleatPointerThumbEvent(evnt) {
+        const $xeTable = this;
+        const internalData = $xeTable;
+        const thumbEl = evnt.currentTarget;
+        thumbEl.releasePointerCapture(evnt.pointerId);
+        internalData.isThumbDrag = false;
+    },
+    pointerdownThumbYEvent(evnt) {
+        const $xeTable = this;
+        const reactData = $xeTable;
+        const internalData = $xeTable;
+        const { elemStore } = internalData;
+        const thumbEl = evnt.currentTarget;
+        internalData.isThumbDrag = true;
+        thumbEl.setPointerCapture(evnt.pointerId);
+        const viewEl = getRefElem(elemStore['main-body-scroll']);
+        if (!viewEl) {
+            return;
+        }
+        const { yThumbHeight } = reactData;
+        const trackEl = thumbEl.parentElement;
+        const trackRect = trackEl.getBoundingClientRect();
+        const pointerPosition = evnt.clientY - trackRect.top;
+        // 记录 thumb 的偏移
+        const thumbOffset = getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
+        internalData.thumbDragOffset = pointerPosition - thumbOffset;
+    },
+    pointermoveThumbYEvent(evnt) {
+        const $xeTable = this;
+        const reactData = $xeTable;
+        const internalData = $xeTable;
+        const thumbEl = evnt.currentTarget;
+        if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
+            return;
+        }
+        const { elemStore, isThumbDrag, thumbDragOffset } = internalData;
+        if (isThumbDrag) {
+            const viewEl = getRefElem(elemStore['main-body-scroll']);
+            if (!viewEl) {
+                return;
+            }
+            const { yThumbHeight } = reactData;
+            const thumbEl = evnt.currentTarget;
+            const trackEl = thumbEl.parentElement;
+            const trackRect = trackEl.getBoundingClientRect();
+            // 更新偏移
+            viewEl.scrollTop = getScrollFromDrag(evnt.clientY - trackRect.top, thumbDragOffset, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
+        }
+    },
+    // 滚动条
     dispatchEvent(type, params, evnt) {
         const $xeTable = this;
         const $xeGrid = $xeTable.$xeGrid;

package/es/table/src/props.js

@@ -1,4 +1,5 @@
 import { VxeUI } from '../../ui';
+import { getDefaultConfig } from '../../ui/src/utils';
 const { getConfig } = VxeUI;
 export const tableProps = {
     /** 基本属性 */
@@ -292,6 +293,10 @@ export const tableProps = {
     virtualXConfig: Object,
     // 纵向虚拟滚动配置项
     virtualYConfig: Object,
+    useScrollbar: {
+        type: Boolean,
+        default: () => getDefaultConfig(getConfig().table.useScrollbar, getConfig().useScrollbar)
+    },
     // 滚动条配置项
     scrollbarConfig: Object,
     // 撤销/恢复历史配置项

package/es/table/src/scrollbar.js

@@ -0,0 +1,54 @@
+/**
+ * 计算滚动条滑块的长度
+ */
+export function getThumbSize(viewportSize, contentSize, trackSize) {
+    if (contentSize <= viewportSize) {
+        return 0;
+    }
+    const ratio = viewportSize / contentSize;
+    const ideal = trackSize * ratio;
+    return Math.max(20, Math.min(ideal, trackSize));
+}
+/**
+ * 计算滚动条滑块的偏移位置
+ */
+export function getThumbOffsetSize(offsetSize, viewportSize, contentSize, trackSize, thumbSize) {
+    const maxScroll = contentSize - viewportSize;
+    if (maxScroll <= 0) {
+        return 0;
+    }
+    const maxThumbOffset = trackSize - thumbSize;
+    if (maxThumbOffset <= 0) {
+        return 0;
+    }
+    const clamped = Math.min(Math.max(offsetSize, 0), maxScroll);
+    const ratio = clamped / maxScroll;
+    return ratio * maxThumbOffset;
+}
+/**
+ * 根据点击轨道的位置，计算滑块的偏移位置
+ */
+export function getScrollFromClick(clickPosition, viewportSize, contentSize, trackSize, thumbSize) {
+    const maxThumbOffset = trackSize - thumbSize;
+    const maxScroll = contentSize - viewportSize;
+    if (maxScroll <= 0 || maxThumbOffset <= 0) {
+        return 0;
+    }
+    let thumbOffset = clickPosition - thumbSize / 2;
+    thumbOffset = Math.min(Math.max(thumbOffset, 0), maxThumbOffset);
+    const scrollOffset = (thumbOffset / maxThumbOffset) * maxScroll;
+    return scrollOffset;
+}
+/**
+ * 拖拽 thumb 时，根据鼠标位置计算滑块的偏移位置
+ */
+export function getScrollFromDrag(pointerPosition, dragOffset, viewportSize, contentSize, trackSize, thumbSize) {
+    const maxScroll = contentSize - viewportSize;
+    const maxThumbOffset = trackSize - thumbSize;
+    if (maxScroll <= 0 || maxThumbOffset <= 0) {
+        return 0;
+    }
+    let thumbOffset = pointerPosition - dragOffset;
+    thumbOffset = Math.min(Math.max(thumbOffset, 0), maxThumbOffset);
+    return (thumbOffset / maxThumbOffset) * maxScroll;
+}