vxe-table 4.13.12 → 4.13.14

package/es/table/src/cell.js

@@ -11,7 +11,7 @@ function renderTitlePrefixIcon(params) {
     const titlePrefix = column.titlePrefix || column.titleHelp;
     if (titlePrefix) {
         return h('i', {
-            class: ['vxe-cell-title-prefix-icon', titlePrefix.icon || getIcon().TABLE_TITLE_PREFIX],
+            class: ['vxe-cell-title-prefix-icon', titlePrefix.iconStatus ? `theme--${titlePrefix.iconStatus}` : '', titlePrefix.icon || getIcon().TABLE_TITLE_PREFIX],
             onMouseenter(evnt) {
                 $table.triggerHeaderTitleEvent(evnt, titlePrefix, params);
             },
@@ -27,7 +27,7 @@ function renderTitleSuffixIcon(params) {
     const titleSuffix = column.titleSuffix;
     if (titleSuffix) {
         return h('i', {
-            class: ['vxe-cell-title-suffix-icon', titleSuffix.icon || getIcon().TABLE_TITLE_SUFFIX],
+            class: ['vxe-cell-title-suffix-icon', titleSuffix.iconStatus ? `theme--${titleSuffix.iconStatus}` : '', titleSuffix.icon || getIcon().TABLE_TITLE_SUFFIX],
             onMouseenter(evnt) {
                 $table.triggerHeaderTitleEvent(evnt, titleSuffix, params);
             },

package/es/table/src/table.js

@@ -376,6 +376,7 @@ export default defineComponent({
             insertRowMaps: {},
             // 已删除行
             removeRowMaps: {},
+            cvCacheMaps: {},
             inited: false,
             tooltipTimeout: null,
             initStatus: false,
@@ -2796,12 +2797,12 @@ export default defineComponent({
             if (bodyWrapperElem) {
                 overflowY = scrollYHeight > bodyWrapperElem.clientHeight;
                 if (yHandleEl) {
-                    reactData.scrollbarWidth = Math.max(scrollbarOpts.width || 0, yHandleEl.offsetWidth - yHandleEl.clientWidth);
+                    reactData.scrollbarWidth = scrollbarOpts.width || (yHandleEl.offsetWidth - yHandleEl.clientWidth) || 14;
                 }
                 reactData.overflowY = overflowY;
                 overflowX = scrollXWidth > bodyWrapperElem.clientWidth;
                 if (xHandleEl) {
-                    reactData.scrollbarHeight = Math.max(scrollbarOpts.height || 0, xHandleEl.offsetHeight - xHandleEl.clientHeight);
+                    reactData.scrollbarHeight = scrollbarOpts.height || (xHandleEl.offsetHeight - xHandleEl.clientHeight) || 14;
                 }
                 const headerHeight = headerTableElem ? headerTableElem.clientHeight : 0;
                 const footerHeight = footerTableElem ? footerTableElem.clientHeight : 0;
@@ -2994,6 +2995,7 @@ export default defineComponent({
             scrollYStore.endIndex = 1;
             scrollXStore.startIndex = 0;
             scrollXStore.endIndex = 1;
+            internalData.cvCacheMaps = {};
             reactData.isRowLoading = true;
             reactData.scrollVMLoading = false;
             internalData.treeExpandedMaps = {};
@@ -3590,7 +3592,7 @@ export default defineComponent({
         const lazyScrollXData = () => {
             const { lxTimeout, lxRunTime, scrollXStore } = internalData;
             const { visibleSize } = scrollXStore;
-            const fpsTime = Math.max(5, Math.min(10, Math.floor(visibleSize / 3)));
+            const fpsTime = visibleSize > 26 ? 26 : (visibleSize > 16 ? 14 : 6);
             if (lxTimeout) {
                 clearTimeout(lxTimeout);
             }
@@ -3607,7 +3609,7 @@ export default defineComponent({
         const lazyScrollYData = () => {
             const { lyTimeout, lyRunTime, scrollYStore } = internalData;
             const { visibleSize } = scrollYStore;
-            const fpsTime = Math.floor(Math.max(4, Math.min(10, visibleSize / 3)));
+            const fpsTime = visibleSize > 30 ? 32 : (visibleSize > 20 ? 18 : 8);
             if (lyTimeout) {
                 clearTimeout(lyTimeout);
             }
@@ -9743,9 +9745,8 @@ export default defineComponent({
                 if (isRollX) {
                     evnt.preventDefault();
                     internalData.inWheelScroll = true;
-                    wheelScrollLeftTo(scrollLeft, (offsetLeft) => {
-                        internalData.inWheelScroll = true;
-                        const currLeftNum = offsetLeft;
+                    if (browseObj['-moz'] || browseObj.safari) {
+                        const currLeftNum = scrollLeft;
                         setScrollLeft(xHandleEl, currLeftNum);
                         setScrollLeft(bodyScrollElem, currLeftNum);
                         setScrollLeft(headerScrollElem, currLeftNum);
@@ -9757,14 +9758,30 @@ export default defineComponent({
                             type: 'table',
                             fixed: ''
                         });
-                    });
+                    }
+                    else {
+                        wheelScrollLeftTo(scrollLeft, (offsetLeft) => {
+                            internalData.inWheelScroll = true;
+                            const currLeftNum = offsetLeft;
+                            setScrollLeft(xHandleEl, currLeftNum);
+                            setScrollLeft(bodyScrollElem, currLeftNum);
+                            setScrollLeft(headerScrollElem, currLeftNum);
+                            setScrollLeft(footerScrollElem, currLeftNum);
+                            if (scrollXLoad) {
+                                $xeTable.triggerScrollXEvent(evnt);
+                            }
+                            $xeTable.handleScrollEvent(evnt, isRollY, isRollX, bodyScrollElem.scrollTop, currLeftNum, {
+                                type: 'table',
+                                fixed: ''
+                            });
+                        });
+                    }
                 }
                 if (isRollY) {
                     evnt.preventDefault();
                     internalData.inWheelScroll = true;
-                    wheelScrollTopTo(scrollTop - currScrollTop, (offsetTop) => {
-                        internalData.inWheelScroll = true;
-                        const currTopNum = bodyScrollElem.scrollTop + offsetTop;
+                    if (browseObj['-moz'] || browseObj.safari) {
+                        const currTopNum = scrollTop;
                         setScrollTop(yHandleEl, currTopNum);
                         setScrollTop(bodyScrollElem, currTopNum);
                         setScrollTop(leftScrollElem, currTopNum);
@@ -9777,7 +9794,25 @@ export default defineComponent({
                             type: 'table',
                             fixed: ''
                         });
-                    });
+                    }
+                    else {
+                        wheelScrollTopTo(scrollTop - currScrollTop, (offsetTop) => {
+                            internalData.inWheelScroll = true;
+                            const currTopNum = bodyScrollElem.scrollTop + offsetTop;
+                            setScrollTop(yHandleEl, currTopNum);
+                            setScrollTop(bodyScrollElem, currTopNum);
+                            setScrollTop(leftScrollElem, currTopNum);
+                            setScrollTop(rightScrollElem, currTopNum);
+                            setScrollTop(rowExpandEl, currTopNum);
+                            if (scrollYLoad) {
+                                $xeTable.triggerScrollYEvent(evnt);
+                            }
+                            $xeTable.handleScrollEvent(evnt, isRollY, isRollX, currTopNum, bodyScrollElem.scrollLeft, {
+                                type: 'table',
+                                fixed: ''
+                            });
+                        });
+                    }
                 }
             },
             triggerVirtualScrollXEvent(evnt) {
@@ -9913,20 +9948,18 @@ export default defineComponent({
                         ySpaceWidth = maxXWidth;
                         isScrollXBig = true;
                     }
-                    let marginLeft = '';
-                    if (scrollXLoad && overflowX) {
-                        marginLeft = `${xSpaceLeft}px`;
+                    if (!(scrollXLoad && overflowX)) {
+                        xSpaceLeft = 0;
                     }
                     if (headerTableElem) {
-                        headerTableElem.style.marginLeft = headerTableElem.getAttribute('xvm') ? marginLeft : '';
+                        headerTableElem.style.transform = headerTableElem.getAttribute('xvm') ? `translate(${xSpaceLeft}px, 0px)` : '';
                     }
                     if (bodyTableElem) {
-                        bodyTableElem.style.marginLeft = marginLeft;
+                        bodyTableElem.style.transform = `translate(${xSpaceLeft}px, ${reactData.scrollYTop || 0}px)`;
                     }
                     if (footerTableElem) {
-                        footerTableElem.style.marginLeft = footerTableElem.getAttribute('xvm') ? marginLeft : '';
+                        footerTableElem.style.transform = footerTableElem.getAttribute('xvm') ? `translate(${xSpaceLeft}px, 0px)` : '';
                     }
-                    reactData.isScrollXBig = isScrollXBig;
                     const containerList = ['main'];
                     containerList.forEach(name => {
                         const layoutList = ['header', 'body', 'footer'];
@@ -9937,6 +9970,9 @@ export default defineComponent({
                             }
                         });
                     });
+                    reactData.scrollXLeft = xSpaceLeft;
+                    reactData.scrollXWidth = ySpaceWidth;
+                    reactData.isScrollXBig = isScrollXBig;
                     const scrollXSpaceEl = refScrollXSpaceElem.value;
                     if (scrollXSpaceEl) {
                         scrollXSpaceEl.style.width = `${ySpaceWidth}px`;
@@ -9952,7 +9988,7 @@ export default defineComponent({
             },
             // 更新纵向 Y 可视渲染上下剩余空间大小
             updateScrollYSpace() {
-                const { isAllOverflow, scrollYLoad, expandColumn } = reactData;
+                const { isAllOverflow, overflowY, scrollYLoad, expandColumn } = reactData;
                 const { scrollYStore, elemStore, isResizeCellHeight, afterFullData, fullAllDataRowIdData, rowExpandedMaps } = internalData;
                 const { startIndex } = scrollYStore;
                 const mouseOpts = computeMouseOpts.value;
@@ -9962,6 +9998,8 @@ export default defineComponent({
                 const defaultRowHeight = computeDefaultRowHeight.value;
                 const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
                 const bodyTableElem = getRefElem(elemStore['main-body-table']);
+                const leftBodyTableElem = getRefElem(elemStore['left-body-table']);
+                const rightbodyTableElem = getRefElem(elemStore['right-body-table']);
                 const containerList = ['main', 'left', 'right'];
                 let ySpaceTop = 0;
                 let scrollYHeight = 0;
@@ -10015,12 +10053,20 @@ export default defineComponent({
                     }
                     ySpaceHeight = maxYHeight;
                 }
+                if (!(scrollYLoad && overflowY)) {
+                    scrollYTop = 0;
+                }
+                if (leftBodyTableElem) {
+                    leftBodyTableElem.style.transform = `translate(0px, ${scrollYTop}px)`;
+                }
+                if (bodyTableElem) {
+                    bodyTableElem.style.transform = `translate(${reactData.scrollXLeft || 0}px, ${scrollYTop}px)`;
+                }
+                if (rightbodyTableElem) {
+                    rightbodyTableElem.style.transform = `translate(0px, ${scrollYTop}px)`;
+                }
                 containerList.forEach(name => {
                     const layoutList = ['header', 'body', 'footer'];
-                    const tableElem = getRefElem(elemStore[`${name}-body-table`]);
-                    if (tableElem) {
-                        tableElem.style.marginTop = scrollYTop ? `${scrollYTop}px` : '';
-                    }
                     layoutList.forEach(layout => {
                         const ySpaceElem = getRefElem(elemStore[`${name}-${layout}-ySpace`]);
                         if (ySpaceElem) {
@@ -11178,6 +11224,9 @@ export default defineComponent({
             if (tableViewportEl) {
                 tableViewportEl.removeEventListener('wheel', $xeTable.triggerBodyWheelEvent);
             }
+            internalData.cvCacheMaps = {};
+            internalData.prevDragRow = null;
+            internalData.prevDragCol = null;
             if (resizeObserver) {
                 resizeObserver.disconnect();
             }

package/es/table/style.css

@@ -2327,6 +2327,30 @@
 .vxe-header--column .vxe-cell-title-suffix-icon {
   cursor: help;
 }
+.vxe-header--column .vxe-cell-title-prefix-icon.theme--primary,
+.vxe-header--column .vxe-cell-title-suffix-icon.theme--primary {
+  color: var(--vxe-ui-font-primary-color);
+}
+.vxe-header--column .vxe-cell-title-prefix-icon.theme--success,
+.vxe-header--column .vxe-cell-title-suffix-icon.theme--success {
+  color: var(--vxe-ui-status-success-color);
+}
+.vxe-header--column .vxe-cell-title-prefix-icon.theme--info,
+.vxe-header--column .vxe-cell-title-suffix-icon.theme--info {
+  color: var(--vxe-ui-status-info-color);
+}
+.vxe-header--column .vxe-cell-title-prefix-icon.theme--warning,
+.vxe-header--column .vxe-cell-title-suffix-icon.theme--warning {
+  color: var(--vxe-ui-status-warning-color);
+}
+.vxe-header--column .vxe-cell-title-prefix-icon.theme--danger,
+.vxe-header--column .vxe-cell-title-suffix-icon.theme--danger {
+  color: var(--vxe-ui-status-danger-color);
+}
+.vxe-header--column .vxe-cell-title-prefix-icon.theme--error,
+.vxe-header--column .vxe-cell-title-suffix-icon.theme--error {
+  color: var(--vxe-ui-status-error-color);
+}
 
 .vxe-cell--col-resizable {
   position: absolute;