vxe-table 3.15.13 → 3.15.15

package/es/table/src/methods.js

@@ -1031,7 +1031,7 @@ function updateStyle($xeTable) {
                 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) {
@@ -3049,42 +3049,42 @@ const createGetColumnCacheProp = (prop) => {
         return -1;
     };
 };
-// function lazyScrollXData ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
-//   const internalData = $xeTable as unknown as TableInternalData
-//   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($xeTable)
-//   }
-//   internalData.lxTimeout = setTimeout(() => {
-//     internalData.lxTimeout = undefined
-//     internalData.lxRunTime = undefined
-//     loadScrollXData($xeTable)
-//   }, fpsTime)
-// }
-// function lazyScrollYData ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
-//   const internalData = $xeTable as unknown as TableInternalData
-//   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($xeTable)
-//   }
-//   internalData.lyTimeout = setTimeout(() => {
-//     internalData.lyTimeout = undefined
-//     internalData.lyRunTime = undefined
-//     loadScrollYData($xeTable)
-//   }, fpsTime)
-// }
+function lazyScrollXData($xeTable) {
+    const internalData = $xeTable;
+    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($xeTable);
+    }
+    internalData.lxTimeout = setTimeout(() => {
+        internalData.lxTimeout = undefined;
+        internalData.lxRunTime = undefined;
+        loadScrollXData($xeTable);
+    }, fpsTime);
+}
+function lazyScrollYData($xeTable) {
+    const internalData = $xeTable;
+    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($xeTable);
+    }
+    internalData.lyTimeout = setTimeout(() => {
+        internalData.lyTimeout = undefined;
+        internalData.lyRunTime = undefined;
+        loadScrollYData($xeTable);
+    }, fpsTime);
+}
 function checkLastSyncScroll($xeTable, isRollX, isRollY) {
     const reactData = $xeTable;
     const internalData = $xeTable;
@@ -9023,24 +9023,26 @@ const Methods = {
      */
     triggerScrollXEvent() {
         const $xeTable = this;
-        // const virtualXOpts = $xeTable.computeVirtualXOpts
-        // if (virtualXOpts.immediate) {
-        loadScrollXData($xeTable);
-        // } else {
-        //   lazyScrollXData($xeTable)
-        // }
+        const virtualXOpts = $xeTable.computeVirtualXOpts;
+        if (virtualXOpts.immediate) {
+            loadScrollXData($xeTable);
+        }
+        else {
+            lazyScrollXData($xeTable);
+        }
     },
     /**
      * 纵向 Y 可视渲染事件处理
      */
     triggerScrollYEvent() {
         const $xeTable = this;
-        // const virtualYOpts = $xeTable.computeVirtualYOpts
-        // if (virtualYOpts.immediate) {
-        loadScrollYData($xeTable);
-        // } else {
-        //   lazyScrollYData($xeTable)
-        // }
+        const virtualYOpts = $xeTable.computeVirtualYOpts;
+        if (virtualYOpts.immediate) {
+            loadScrollYData($xeTable);
+        }
+        else {
+            lazyScrollYData($xeTable);
+        }
     },
     triggerBodyScrollEvent(evnt, fixedType) {
         const $xeTable = this;
@@ -9263,8 +9265,8 @@ const Methods = {
         if (isRollX) {
             evnt.preventDefault();
             internalData.inWheelScroll = true;
-            wheelScrollLeftTo(scrollLeft, (offsetLeft) => {
-                const currLeftNum = offsetLeft;
+            if (browseObj.firefox || browseObj.safari) {
+                const currLeftNum = scrollLeft;
                 setScrollLeft(xHandleEl, currLeftNum);
                 setScrollLeft(bodyScrollElem, currLeftNum);
                 setScrollLeft(headerScrollElem, currLeftNum);
@@ -9276,13 +9278,28 @@ const Methods = {
                     type: 'table',
                     fixed: ''
                 });
-            });
+            }
+            else {
+                wheelScrollLeftTo(scrollLeft, (offsetLeft) => {
+                    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();
-            wheelScrollTopTo(scrollTop - currScrollTop, (offsetTop) => {
-                const currTopNum = bodyScrollElem.scrollTop + offsetTop;
-                internalData.inWheelScroll = true;
+            if (browseObj.firefox || browseObj.safari) {
+                const currTopNum = scrollTop;
                 setScrollTop(yHandleEl, currTopNum);
                 setScrollTop(bodyScrollElem, currTopNum);
                 setScrollTop(leftScrollElem, currTopNum);
@@ -9295,7 +9312,25 @@ const Methods = {
                     type: 'table',
                     fixed: ''
                 });
-            });
+            }
+            else {
+                wheelScrollTopTo(scrollTop - currScrollTop, (offsetTop) => {
+                    const currTopNum = bodyScrollElem.scrollTop + offsetTop;
+                    internalData.inWheelScroll = true;
+                    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) {
@@ -9427,20 +9462,18 @@ const Methods = {
                 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'];
@@ -9451,6 +9484,9 @@ const Methods = {
                     }
                 });
             });
+            reactData.scrollXLeft = xSpaceLeft;
+            reactData.scrollXWidth = ySpaceWidth;
+            reactData.isScrollXBig = isScrollXBig;
             const scrollXSpaceEl = $xeTable.$refs.refScrollXSpaceElem;
             if (scrollXSpaceEl) {
                 scrollXSpaceEl.style.width = `${ySpaceWidth}px`;
@@ -9488,6 +9524,8 @@ const Methods = {
         const defaultRowHeight = $xeTable.computeDefaultRowHeight;
         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;
@@ -9541,12 +9579,17 @@ const Methods = {
             }
             ySpaceHeight = maxYHeight;
         }
+        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/table/src/table.js

@@ -1,7 +1,7 @@
 import XEUtils from 'xe-utils';
 import { getFuncText, isEnableConf } from '../../ui/src/utils';
 import { initTpImg } from '../../ui/src/dom';
-import { createHandleGetRowId } from './util';
+import { createHandleGetRowId, getCellHeight } from './util';
 import { VxeUI } from '../../ui';
 import methods from './methods';
 import TableBodyComponent from './body';
@@ -791,18 +791,16 @@ export default {
             const $xeTable = this;
             const props = $xeTable;
             const headerCellOpts = Object.assign({}, getConfig().table.headerCellConfig, props.headerCellConfig);
-            if (headerCellOpts.height) {
-                headerCellOpts.height = XEUtils.toNumber(headerCellOpts.height);
-            }
+            const cellOpts = $xeTable.computeCellOpts;
+            headerCellOpts.height = XEUtils.toNumber(getCellHeight(headerCellOpts.height || cellOpts.height));
             return headerCellOpts;
         },
         computeFooterCellOpts() {
             const $xeTable = this;
             const props = $xeTable;
             const footerCellOpts = Object.assign({}, getConfig().table.footerCellConfig, props.footerCellConfig);
-            if (footerCellOpts.height) {
-                footerCellOpts.height = XEUtils.toNumber(footerCellOpts.height);
-            }
+            const cellOpts = $xeTable.computeCellOpts;
+            footerCellOpts.height = XEUtils.toNumber(getCellHeight(footerCellOpts.height || cellOpts.height));
             return footerCellOpts;
         },
         rowOpts() {

package/es/ui/index.js

@@ -1,6 +1,6 @@
 import { VxeUI } from '@vxe-ui/core';
 import { getFuncText } from './src/utils';
-export const version = "3.15.13";
+export const version = "3.15.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${"3.15.13"}`;
+const version = `table v${"3.15.15"}`;
 export const warnLog = log.create('warn', version);
 export const errLog = log.create('error', version);

package/lib/index.umd.js

@@ -2220,7 +2220,7 @@ function getClass(property, params) {
 ;// CONCATENATED MODULE: ./packages/ui/index.ts
 
 
-const version = "3.15.13";
+const version = "3.15.15";
 core_.VxeUI.version = version;
 core_.VxeUI.tableVersion = version;
 core_.VxeUI.setConfig({
@@ -2718,7 +2718,7 @@ function isScale(val) {
   return val && /^\d+%$/.test(val);
 }
 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)));
 }
 function removeClass(elem, cls) {
   if (elem && hasClass(elem, cls)) {
@@ -2858,7 +2858,7 @@ function isNodeElement(elem) {
 const {
   log: log_log
 } = core_.VxeUI;
-const log_version = `table v${"3.15.13"}`;
+const log_version = `table v${"3.15.15"}`;
 const warnLog = log_log.create('warn', log_version);
 const errLog = log_log.create('error', log_version);
 ;// CONCATENATED MODULE: ./packages/table/src/columnInfo.ts
@@ -6568,7 +6568,7 @@ function updateStyle($xeTable) {
         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) {
@@ -8888,42 +8888,54 @@ const createGetColumnCacheProp = prop => {
     return -1;
   };
 };
-// function lazyScrollXData ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
-//   const internalData = $xeTable as unknown as TableInternalData
-//   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($xeTable)
-//   }
-//   internalData.lxTimeout = setTimeout(() => {
-//     internalData.lxTimeout = undefined
-//     internalData.lxRunTime = undefined
-//     loadScrollXData($xeTable)
-//   }, fpsTime)
-// }
-// function lazyScrollYData ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
-//   const internalData = $xeTable as unknown as TableInternalData
-//   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($xeTable)
-//   }
-//   internalData.lyTimeout = setTimeout(() => {
-//     internalData.lyTimeout = undefined
-//     internalData.lyRunTime = undefined
-//     loadScrollYData($xeTable)
-//   }, fpsTime)
-// }
+function lazyScrollXData($xeTable) {
+  const internalData = $xeTable;
+  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($xeTable);
+  }
+  internalData.lxTimeout = setTimeout(() => {
+    internalData.lxTimeout = undefined;
+    internalData.lxRunTime = undefined;
+    loadScrollXData($xeTable);
+  }, fpsTime);
+}
+function lazyScrollYData($xeTable) {
+  const internalData = $xeTable;
+  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($xeTable);
+  }
+  internalData.lyTimeout = setTimeout(() => {
+    internalData.lyTimeout = undefined;
+    internalData.lyRunTime = undefined;
+    loadScrollYData($xeTable);
+  }, fpsTime);
+}
 function checkLastSyncScroll($xeTable, isRollX, isRollY) {
   const reactData = $xeTable;
   const internalData = $xeTable;
@@ -15831,24 +15843,24 @@ const Methods = {
    */
   triggerScrollXEvent() {
     const $xeTable = this;
-    // const virtualXOpts = $xeTable.computeVirtualXOpts
-    // if (virtualXOpts.immediate) {
-    loadScrollXData($xeTable);
-    // } else {
-    //   lazyScrollXData($xeTable)
-    // }
+    const virtualXOpts = $xeTable.computeVirtualXOpts;
+    if (virtualXOpts.immediate) {
+      loadScrollXData($xeTable);
+    } else {
+      lazyScrollXData($xeTable);
+    }
   },
   /**
    * 纵向 Y 可视渲染事件处理
    */
   triggerScrollYEvent() {
     const $xeTable = this;
-    // const virtualYOpts = $xeTable.computeVirtualYOpts
-    // if (virtualYOpts.immediate) {
-    loadScrollYData($xeTable);
-    // } else {
-    //   lazyScrollYData($xeTable)
-    // }
+    const virtualYOpts = $xeTable.computeVirtualYOpts;
+    if (virtualYOpts.immediate) {
+      loadScrollYData($xeTable);
+    } else {
+      lazyScrollYData($xeTable);
+    }
   },
   triggerBodyScrollEvent(evnt, fixedType) {
     const $xeTable = this;
@@ -16114,8 +16126,8 @@ const Methods = {
     if (isRollX) {
       evnt.preventDefault();
       internalData.inWheelScroll = true;
-      wheelScrollLeftTo(scrollLeft, offsetLeft => {
-        const currLeftNum = offsetLeft;
+      if (browseObj.firefox || browseObj.safari) {
+        const currLeftNum = scrollLeft;
         setScrollLeft(xHandleEl, currLeftNum);
         setScrollLeft(bodyScrollElem, currLeftNum);
         setScrollLeft(headerScrollElem, currLeftNum);
@@ -16127,13 +16139,27 @@ const Methods = {
           type: 'table',
           fixed: ''
         });
-      });
+      } else {
+        wheelScrollLeftTo(scrollLeft, offsetLeft => {
+          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();
-      wheelScrollTopTo(scrollTop - currScrollTop, offsetTop => {
-        const currTopNum = bodyScrollElem.scrollTop + offsetTop;
-        internalData.inWheelScroll = true;
+      if (browseObj.firefox || browseObj.safari) {
+        const currTopNum = scrollTop;
         setScrollTop(yHandleEl, currTopNum);
         setScrollTop(bodyScrollElem, currTopNum);
         setScrollTop(leftScrollElem, currTopNum);
@@ -16146,7 +16172,24 @@ const Methods = {
           type: 'table',
           fixed: ''
         });
-      });
+      } else {
+        wheelScrollTopTo(scrollTop - currScrollTop, offsetTop => {
+          const currTopNum = bodyScrollElem.scrollTop + offsetTop;
+          internalData.inWheelScroll = true;
+          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) {
@@ -16310,20 +16353,18 @@ const Methods = {
         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'];
@@ -16334,6 +16375,9 @@ const Methods = {
           }
         });
       });
+      reactData.scrollXLeft = xSpaceLeft;
+      reactData.scrollXWidth = ySpaceWidth;
+      reactData.isScrollXBig = isScrollXBig;
       const scrollXSpaceEl = $xeTable.$refs.refScrollXSpaceElem;
       if (scrollXSpaceEl) {
         scrollXSpaceEl.style.width = `${ySpaceWidth}px`;
@@ -16384,6 +16428,8 @@ const Methods = {
     const defaultRowHeight = $xeTable.computeDefaultRowHeight;
     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;
@@ -16434,12 +16480,17 @@ const Methods = {
       }
       ySpaceHeight = maxYHeight;
     }
+    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) {
@@ -17938,7 +17989,7 @@ const header_renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) =>
   const cellOpts = $xeTable.computeCellOpts;
   const defaultRowHeight = $xeTable.computeDefaultRowHeight;
   const headerCellOpts = $xeTable.computeHeaderCellOpts;
-  const currCellHeight = getCellHeight(headerCellOpts.height || cellOpts.height) || defaultRowHeight;
+  const currCellHeight = getCellHeight(headerCellOpts.height) || defaultRowHeight;
   const {
     disabledMethod: dragDisabledMethod,
     isCrossDrag,
@@ -18404,7 +18455,7 @@ function footer_renderRows(h, _vm, isOptimizeMode, tableColumn, footerTableData,
   const defaultRowHeight = $xeTable.computeDefaultRowHeight;
   const cellOpts = $xeTable.computeCellOpts;
   const footerCellOpts = $xeTable.computeFooterCellOpts;
-  const currCellHeight = getCellHeight(footerCellOpts.height || cellOpts.height) || defaultRowHeight;
+  const currCellHeight = getCellHeight(footerCellOpts.height) || defaultRowHeight;
   return tableColumn.map((column, $columnIndex) => {
     const {
       type,
@@ -27686,18 +27737,16 @@ function renderBody(h, $xeTable) {
       const $xeTable = this;
       const props = $xeTable;
       const headerCellOpts = Object.assign({}, table_getConfig().table.headerCellConfig, props.headerCellConfig);
-      if (headerCellOpts.height) {
-        headerCellOpts.height = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(headerCellOpts.height);
-      }
+      const cellOpts = $xeTable.computeCellOpts;
+      headerCellOpts.height = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(getCellHeight(headerCellOpts.height || cellOpts.height));
       return headerCellOpts;
     },
     computeFooterCellOpts() {
       const $xeTable = this;
       const props = $xeTable;
       const footerCellOpts = Object.assign({}, table_getConfig().table.footerCellConfig, props.footerCellConfig);
-      if (footerCellOpts.height) {
-        footerCellOpts.height = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(footerCellOpts.height);
-      }
+      const cellOpts = $xeTable.computeCellOpts;
+      footerCellOpts.height = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(getCellHeight(footerCellOpts.height || cellOpts.height));
       return footerCellOpts;
     },
     rowOpts() {