vxe-table 4.13.13 → 4.13.15

package/es/table/src/table.js

@@ -9,7 +9,7 @@ import TableHeaderComponent from './header';
 import TableFooterComponent from './footer';
 import tableProps from './props';
 import tableEmits from './emits';
-import { getRowUniqueId, clearTableAllStatus, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleRowidOrRow, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, getRootColumn, getRefElem, getColReMinWidth, createHandleUpdateRowId, createHandleGetRowId } from './util';
+import { getRowUniqueId, clearTableAllStatus, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleRowidOrRow, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, getRootColumn, getRefElem, getColReMinWidth, createHandleUpdateRowId, createHandleGetRowId, getCellHeight } from './util';
 import { getSlotVNs } from '../../ui/src/vn';
 import { warnLog, errLog } from '../../ui/src/log';
 import TableCustomPanelComponent from '../module/custom/panel';
@@ -509,16 +509,14 @@ export default defineComponent({
         });
         const computeHeaderCellOpts = computed(() => {
             const headerCellOpts = Object.assign({}, getConfig().table.headerCellConfig, props.headerCellConfig);
-            if (headerCellOpts.height) {
-                headerCellOpts.height = XEUtils.toNumber(headerCellOpts.height);
-            }
+            const cellOpts = computeCellOpts.value;
+            headerCellOpts.height = XEUtils.toNumber(getCellHeight(headerCellOpts.height || cellOpts.height));
             return headerCellOpts;
         });
         const computeFooterCellOpts = computed(() => {
             const footerCellOpts = Object.assign({}, getConfig().table.footerCellConfig, props.footerCellConfig);
-            if (footerCellOpts.height) {
-                footerCellOpts.height = XEUtils.toNumber(footerCellOpts.height);
-            }
+            const cellOpts = computeCellOpts.value;
+            footerCellOpts.height = XEUtils.toNumber(getCellHeight(footerCellOpts.height || cellOpts.height));
             return footerCellOpts;
         });
         const computeRowOpts = computed(() => {
@@ -2166,7 +2164,7 @@ export default defineComponent({
                         if (tableElem) {
                             tableElem.style.width = tWidth ? `${tWidth}px` : '';
                             // 兼容性处理
-                            tableElem.style.paddingRight = osbWidth && fixedType && (browseObj['-moz'] || browseObj.safari) ? `${osbWidth}px` : '';
+                            tableElem.style.paddingRight = osbWidth && fixedType && (browseObj.firefox || browseObj.safari) ? `${osbWidth}px` : '';
                         }
                         const emptyBlockElem = getRefElem(elemStore[`${name}-${layout}-emptyBlock`]);
                         if (emptyBlockElem) {
@@ -3589,40 +3587,40 @@ export default defineComponent({
                 return -1;
             };
         };
-        // const lazyScrollXData = () => {
-        //   const { lxTimeout, lxRunTime, scrollXStore } = internalData
-        //   const { visibleSize } = scrollXStore
-        //   const fpsTime = Math.max(5, Math.min(10, Math.floor(visibleSize / 3)))
-        //   if (lxTimeout) {
-        //     clearTimeout(lxTimeout)
-        //   }
-        //   if (!lxRunTime || lxRunTime + fpsTime < Date.now()) {
-        //     internalData.lxRunTime = Date.now()
-        //     loadScrollXData()
-        //   }
-        //   internalData.lxTimeout = setTimeout(() => {
-        //     internalData.lxTimeout = undefined
-        //     internalData.lxRunTime = undefined
-        //     loadScrollXData()
-        //   }, fpsTime)
-        // }
-        // const lazyScrollYData = () => {
-        //   const { lyTimeout, lyRunTime, scrollYStore } = internalData
-        //   const { visibleSize } = scrollYStore
-        //   const fpsTime = Math.floor(Math.max(4, Math.min(10, visibleSize / 3)))
-        //   if (lyTimeout) {
-        //     clearTimeout(lyTimeout)
-        //   }
-        //   if (!lyRunTime || lyRunTime + fpsTime < Date.now()) {
-        //     internalData.lyRunTime = Date.now()
-        //     loadScrollYData()
-        //   }
-        //   internalData.lyTimeout = setTimeout(() => {
-        //     internalData.lyTimeout = undefined
-        //     internalData.lyRunTime = undefined
-        //     loadScrollYData()
-        //   }, fpsTime)
-        // }
+        const lazyScrollXData = () => {
+            const { lxTimeout, lxRunTime, scrollXStore } = internalData;
+            const { visibleSize } = scrollXStore;
+            const fpsTime = visibleSize > 26 ? 26 : (visibleSize > 16 ? 14 : 6);
+            if (lxTimeout) {
+                clearTimeout(lxTimeout);
+            }
+            if (!lxRunTime || lxRunTime + fpsTime < Date.now()) {
+                internalData.lxRunTime = Date.now();
+                loadScrollXData();
+            }
+            internalData.lxTimeout = setTimeout(() => {
+                internalData.lxTimeout = undefined;
+                internalData.lxRunTime = undefined;
+                loadScrollXData();
+            }, fpsTime);
+        };
+        const lazyScrollYData = () => {
+            const { lyTimeout, lyRunTime, scrollYStore } = internalData;
+            const { visibleSize } = scrollYStore;
+            const fpsTime = visibleSize > 30 ? 32 : (visibleSize > 20 ? 18 : 8);
+            if (lyTimeout) {
+                clearTimeout(lyTimeout);
+            }
+            if (!lyRunTime || lyRunTime + fpsTime < Date.now()) {
+                internalData.lyRunTime = Date.now();
+                loadScrollYData();
+            }
+            internalData.lyTimeout = setTimeout(() => {
+                internalData.lyTimeout = undefined;
+                internalData.lyRunTime = undefined;
+                loadScrollYData();
+            }, fpsTime);
+        };
         const checkLastSyncScroll = (isRollX, isRollY) => {
             const { scrollXLoad, scrollYLoad } = reactData;
             const { lcsTimeout } = internalData;
@@ -9517,23 +9515,25 @@ export default defineComponent({
              * 横向 X 可视渲染事件处理
              */
             triggerScrollXEvent() {
-                // const virtualXOpts = computeVirtualXOpts.value
-                // if (virtualXOpts.immediate) {
-                loadScrollXData();
-                // } else {
-                //   lazyScrollXData()
-                // }
+                const virtualXOpts = computeVirtualXOpts.value;
+                if (virtualXOpts.immediate) {
+                    loadScrollXData();
+                }
+                else {
+                    lazyScrollXData();
+                }
             },
             /**
              * 纵向 Y 可视渲染事件处理
              */
             triggerScrollYEvent() {
-                // const virtualYOpts = computeVirtualYOpts.value
-                // if (virtualYOpts.immediate) {
-                loadScrollYData();
-                // } else {
-                //   lazyScrollYData()
-                // }
+                const virtualYOpts = computeVirtualYOpts.value;
+                if (virtualYOpts.immediate) {
+                    loadScrollYData();
+                }
+                else {
+                    lazyScrollYData();
+                }
             },
             triggerBodyScrollEvent(evnt, fixedType) {
                 const { scrollYLoad, scrollXLoad } = reactData;
@@ -9743,9 +9743,8 @@ export default defineComponent({
                 if (isRollX) {
                     evnt.preventDefault();
                     internalData.inWheelScroll = true;
-                    wheelScrollLeftTo(scrollLeft, (offsetLeft) => {
-                        internalData.inWheelScroll = true;
-                        const currLeftNum = offsetLeft;
+                    if (browseObj.firefox || browseObj.safari) {
+                        const currLeftNum = scrollLeft;
                         setScrollLeft(xHandleEl, currLeftNum);
                         setScrollLeft(bodyScrollElem, currLeftNum);
                         setScrollLeft(headerScrollElem, currLeftNum);
@@ -9757,14 +9756,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.firefox || browseObj.safari) {
+                        const currTopNum = scrollTop;
                         setScrollTop(yHandleEl, currTopNum);
                         setScrollTop(bodyScrollElem, currTopNum);
                         setScrollTop(leftScrollElem, currTopNum);
@@ -9777,7 +9792,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 +9946,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 +9968,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 +9986,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 +9996,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 +10051,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) {

package/es/ui/index.js

@@ -1,6 +1,6 @@
 import { VxeUI } from '@vxe-ui/core';
 import { getFuncText } from './src/utils';
-export const version = "4.13.13";
+export const version = "4.13.15";
 VxeUI.version = version;
 VxeUI.tableVersion = version;
 VxeUI.setConfig({

package/es/ui/src/dom.js

@@ -45,7 +45,7 @@ export function isScale(val) {
     return val && /^\d+%$/.test(val);
 }
 export function hasClass(elem, cls) {
-    return elem && elem.className && elem.className.match && elem.className.match(getClsRE(cls));
+    return !!(elem && elem.className && elem.className.match && elem.className.match(getClsRE(cls)));
 }
 export function removeClass(elem, cls) {
     if (elem && hasClass(elem, cls)) {

package/es/ui/src/log.js

@@ -1,5 +1,5 @@
 import { VxeUI } from '@vxe-ui/core';
 const { log } = VxeUI;
-const version = `table v${"4.13.13"}`;
+const version = `table v${"4.13.15"}`;
 export const warnLog = log.create('warn', version);
 export const errLog = log.create('error', version);