vxe-gantt 3.0.6 → 3.0.8

package/lib/gantt/src/gantt-view.js

@@ -23,6 +23,7 @@ var globalEvents = _core.VxeUI.globalEvents;
 function createInternalData() {
   return {
     xeTable: null,
+    visibleColumn: [],
     startMaps: {},
     endMaps: {},
     chartMaps: {},
@@ -37,16 +38,9 @@ function createInternalData() {
       startIndex: 0,
       endIndex: 0
     },
-    // 存放纵向 Y 虚拟滚动相关信息
-    scrollYStore: {
-      preloadSize: 0,
-      offsetSize: 0,
-      visibleSize: 0,
-      visibleStartIndex: 0,
-      visibleEndIndex: 0,
-      startIndex: 0,
-      endIndex: 0
-    }
+    // 最后滚动位置
+    lastScrollTop: 0,
+    lastScrollLeft: 0
   };
 }
 var maxYHeight = 5e6;
@@ -94,37 +88,37 @@ function handleParseColumn($xeGanttView) {
     var currTime = minViewDate.getTime();
     var diffDayNum = maxViewDate.getTime() - minViewDate.getTime();
     var countSize = Math.max(5, Math.floor(diffDayNum / gapTime) + 1);
-    switch (minScale.type) {
-      case 'day':
-      case 'date':
-        if (diffDayNum > 1000 * 60 * 60 * 24 * 366 * 3) {
-          reactData.tableColumn = [];
-          reactData.headerGroups = [];
-          return;
-        }
-        break;
-      case 'hour':
-        if (diffDayNum > 1000 * 60 * 60 * 24 * 31 * 3) {
-          reactData.tableColumn = [];
-          reactData.headerGroups = [];
-          return;
-        }
-        break;
-      case 'minute':
-        if (diffDayNum > 1000 * 60 * 60 * 24 * 3) {
-          reactData.tableColumn = [];
-          reactData.headerGroups = [];
-          return;
-        }
-        break;
-      case 'second':
-        if (diffDayNum > 1000 * 60 * 60 * 3) {
-          reactData.tableColumn = [];
-          reactData.headerGroups = [];
-          return;
-        }
-        break;
-    }
+    // switch (minScale.type) {
+    //   case 'day':
+    //   case 'date':
+    //     if (diffDayNum > (1000 * 60 * 60 * 24 * 366 * 3)) {
+    //       reactData.tableColumn = []
+    //       reactData.headerGroups = []
+    //       return
+    //     }
+    //     break
+    //   case 'hour':
+    //     if (diffDayNum > (1000 * 60 * 60 * 24 * 31 * 3)) {
+    //       reactData.tableColumn = []
+    //       reactData.headerGroups = []
+    //       return
+    //     }
+    //     break
+    //   case 'minute':
+    //     if (diffDayNum > (1000 * 60 * 60 * 24 * 3)) {
+    //       reactData.tableColumn = []
+    //       reactData.headerGroups = []
+    //       return
+    //     }
+    //     break
+    //   case 'second':
+    //     if (diffDayNum > (1000 * 60 * 60 * 3)) {
+    //       reactData.tableColumn = []
+    //       reactData.headerGroups = []
+    //       return
+    //     }
+    //     break
+    // }
     var renderListMaps = {
       year: [],
       quarter: [],
@@ -290,9 +284,13 @@ function handleParseColumn($xeGanttView) {
     if ($xeTable) {
       var startField = $xeGantt.computeStartField;
       var endField = $xeGantt.computeEndField;
+      var tableReactData = $xeTable;
+      var isRowGroupStatus = tableReactData.isRowGroupStatus;
       var tableInternalData = $xeTable;
       var afterFullData = tableInternalData.afterFullData,
-        afterTreeFullData = tableInternalData.afterTreeFullData;
+        afterTreeFullData = tableInternalData.afterTreeFullData,
+        afterGroupFullData = tableInternalData.afterGroupFullData;
+      var aggregateOpts = $xeTable.computeAggregateOpts;
       var treeOpts = $xeTable.computeTreeOpts;
       var transform = treeOpts.transform;
       var childrenField = treeOpts.children || treeOpts.childrenField;
@@ -314,7 +312,16 @@ function handleParseColumn($xeGanttView) {
           };
         }
       };
-      if (treeConfig) {
+      if (isRowGroupStatus) {
+        // 行分组
+        var mapChildrenField = aggregateOpts.mapChildrenField;
+        if (mapChildrenField) {
+          _xeUtils.default.eachTree(afterGroupFullData, handleParseRender, {
+            children: mapChildrenField
+          });
+        }
+      } else if (treeConfig) {
+        // 树结构
         _xeUtils.default.eachTree(afterTreeFullData, handleParseRender, {
           children: transform ? treeOpts.mapChildrenField : childrenField
         });
@@ -324,8 +331,10 @@ function handleParseColumn($xeGanttView) {
       internalData.chartMaps = ctMaps;
     }
   }
-  reactData.tableColumn = fullCols;
+  internalData.visibleColumn = fullCols;
   reactData.headerGroups = groupCols;
+  updateScrollXStatus($xeGanttView);
+  handleTableColumn($xeGanttView);
 }
 function handleUpdateData($xeGanttView) {
   var $xeGantt = $xeGanttView.$xeGantt;
@@ -333,6 +342,7 @@ function handleUpdateData($xeGanttView) {
   var internalData = $xeGanttView.internalData;
   var ganttProps = $xeGantt;
   var treeConfig = ganttProps.treeConfig;
+  var scrollXStore = internalData.scrollXStore;
   var $xeTable = internalData.xeTable;
   var sdMaps = {};
   var edMaps = {};
@@ -341,9 +351,13 @@ function handleUpdateData($xeGanttView) {
   if ($xeTable) {
     var startField = $xeGantt.computeStartField;
     var endField = $xeGantt.computeEndField;
+    var tableReactData = $xeTable;
+    var isRowGroupStatus = tableReactData.isRowGroupStatus;
     var tableInternalData = $xeTable;
     var afterFullData = tableInternalData.afterFullData,
-      afterTreeFullData = tableInternalData.afterTreeFullData;
+      afterTreeFullData = tableInternalData.afterTreeFullData,
+      afterGroupFullData = tableInternalData.afterGroupFullData;
+    var aggregateOpts = $xeTable.computeAggregateOpts;
     var treeOpts = $xeTable.computeTreeOpts;
     var transform = treeOpts.transform;
     var childrenField = treeOpts.children || treeOpts.childrenField;
@@ -361,7 +375,16 @@ function handleUpdateData($xeGanttView) {
         }
       }
     };
-    if (treeConfig) {
+    if (isRowGroupStatus) {
+      // 行分组
+      var mapChildrenField = aggregateOpts.mapChildrenField;
+      if (mapChildrenField) {
+        _xeUtils.default.eachTree(afterGroupFullData, handleMinMaxData, {
+          children: mapChildrenField
+        });
+      }
+    } else if (treeConfig) {
+      // 树结构
       _xeUtils.default.eachTree(afterTreeFullData, handleMinMaxData, {
         children: transform ? treeOpts.mapChildrenField : childrenField
       });
@@ -369,6 +392,8 @@ function handleUpdateData($xeGanttView) {
       afterFullData.forEach(handleMinMaxData);
     }
   }
+  scrollXStore.startIndex = 0;
+  scrollXStore.endIndex = Math.max(1, scrollXStore.visibleSize);
   reactData.minViewDate = minDate;
   reactData.maxViewDate = maxDate;
   internalData.startMaps = sdMaps;
@@ -416,10 +441,8 @@ function updateChart($xeGanttView) {
       }
       var rowid = rowEl.getAttribute('rowid');
       var rowRest = rowid ? chartMaps[rowid] : null;
-      if (rowRest) {
-        barEl.style.left = "".concat(viewCellWidth * rowRest.oLeftSize, "px");
-        barEl.style.width = "".concat(viewCellWidth * rowRest.oWidthSize, "px");
-      }
+      barEl.style.left = "".concat(rowRest ? viewCellWidth * rowRest.oLeftSize : 0, "px");
+      barEl.style.width = "".concat(rowRest ? viewCellWidth * rowRest.oWidthSize : 0, "px");
     });
   }
   return $xeGanttView.$nextTick();
@@ -430,9 +453,10 @@ function updateStyle($xeGanttView) {
   var internalData = $xeGanttView.internalData;
   var scrollbarWidth = reactData.scrollbarWidth,
     scrollbarHeight = reactData.scrollbarHeight,
-    tableColumn = reactData.tableColumn,
-    headerGroups = reactData.headerGroups;
-  var elemStore = internalData.elemStore;
+    headerGroups = reactData.headerGroups,
+    tableColumn = reactData.tableColumn;
+  var elemStore = internalData.elemStore,
+    visibleColumn = internalData.visibleColumn;
   var $xeTable = internalData.xeTable;
   var el = $xeGanttView.$refs.refElem;
   if (!el || !el.clientHeight) {
@@ -513,82 +537,210 @@ function updateStyle($xeGanttView) {
     yBottomCornerEl.style.display = tFooterHeight ? 'block' : '';
   }
   var colInfoElem = $xeGanttView.$refs.refColInfoElem;
+  var viewCellWidth = 40;
   if (colInfoElem) {
-    reactData.viewCellWidth = colInfoElem.clientWidth || 40;
+    viewCellWidth = colInfoElem.clientWidth || 40;
   }
-  var viewTableWidth = reactData.viewCellWidth * tableColumn.length;
+  var viewTableWidth = viewCellWidth * visibleColumn.length;
   if (bodyScrollElem) {
     var viewWidth = bodyScrollElem.clientWidth;
     var remainWidth = viewWidth - viewTableWidth;
     if (remainWidth > 0) {
-      reactData.viewCellWidth += Math.floor(remainWidth / tableColumn.length);
+      viewCellWidth += Math.floor(remainWidth / visibleColumn.length);
       viewTableWidth = viewWidth;
     }
   }
+  reactData.viewCellWidth = viewCellWidth;
   var headerTableElem = (0, _util.getRefElem)(elemStore['main-header-table']);
   var bodyTableElem = (0, _util.getRefElem)(elemStore['main-body-table']);
+  var vmTableWidth = viewCellWidth * tableColumn.length;
   if (headerTableElem) {
     headerTableElem.style.width = "".concat(viewTableWidth, "px");
   }
   if (bodyTableElem) {
-    bodyTableElem.style.width = "".concat(viewTableWidth, "px");
+    bodyTableElem.style.width = "".concat(vmTableWidth, "px");
   }
   reactData.scrollXWidth = viewTableWidth;
   return updateChart($xeGanttView);
 }
-function _handleLazyRecalculate($xeGanttView) {
+function handleRecalculateStyle($xeGanttView) {
+  var internalData = $xeGanttView.internalData;
+  var el = $xeGanttView.$refs.refElem;
+  internalData.rceRunTime = Date.now();
+  if (!el || !el.clientWidth) {
+    return $xeGanttView.$nextTick();
+  }
   calcScrollbar($xeGanttView);
   updateStyle($xeGanttView);
   updateChart($xeGanttView);
+  return computeScrollLoad($xeGanttView);
+}
+function _handleLazyRecalculate($xeGanttView) {
+  var internalData = $xeGanttView.internalData;
+  return new Promise(function (resolve) {
+    var rceTimeout = internalData.rceTimeout,
+      rceRunTime = internalData.rceRunTime;
+    var $xeTable = internalData.xeTable;
+    var refreshDelay = 50;
+    if ($xeTable) {
+      var resizeOpts = $xeTable.computeResizeOpts;
+      refreshDelay = resizeOpts.refreshDelay || 50;
+    }
+    if (rceTimeout) {
+      clearTimeout(rceTimeout);
+      if (rceRunTime && rceRunTime + (refreshDelay - 5) < Date.now()) {
+        resolve(handleRecalculateStyle($xeGanttView));
+      } else {
+        $xeGanttView.$nextTick(function () {
+          resolve();
+        });
+      }
+    } else {
+      resolve(handleRecalculateStyle($xeGanttView));
+    }
+    internalData.rceTimeout = setTimeout(function () {
+      internalData.rceTimeout = undefined;
+      handleRecalculateStyle($xeGanttView);
+    }, refreshDelay);
+  });
+}
+function computeScrollLoad($xeGanttView) {
+  var reactData = $xeGanttView.reactData;
+  var internalData = $xeGanttView.internalData;
+  return $xeGanttView.$nextTick().then(function () {
+    var scrollXLoad = reactData.scrollXLoad;
+    var scrollXStore = internalData.scrollXStore;
+    // 计算 X 逻辑
+    if (scrollXLoad) {
+      var _handleVirtualXVisibl = handleVirtualXVisible($xeGanttView),
+        toXVisibleIndex = _handleVirtualXVisibl.toVisibleIndex,
+        visibleXSize = _handleVirtualXVisibl.visibleSize;
+      var offsetXSize = 2;
+      scrollXStore.preloadSize = 1;
+      scrollXStore.offsetSize = offsetXSize;
+      scrollXStore.visibleSize = visibleXSize;
+      scrollXStore.endIndex = Math.max(scrollXStore.startIndex + scrollXStore.visibleSize + offsetXSize, scrollXStore.endIndex);
+      scrollXStore.visibleStartIndex = Math.max(scrollXStore.startIndex, toXVisibleIndex);
+      scrollXStore.visibleEndIndex = Math.min(scrollXStore.endIndex, toXVisibleIndex + visibleXSize);
+      updateScrollXData($xeGanttView).then(function () {
+        loadScrollXData($xeGanttView);
+      });
+    } else {
+      updateScrollXSpace($xeGanttView);
+    }
+  });
+}
+function handleVirtualXVisible($xeGanttView) {
+  var reactData = $xeGanttView.reactData;
+  var internalData = $xeGanttView.internalData;
+  var viewCellWidth = reactData.viewCellWidth;
+  var elemStore = internalData.elemStore;
+  var bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
+  if (bodyScrollElem) {
+    var clientWidth = bodyScrollElem.clientWidth;
+    var scrollLeft = bodyScrollElem.scrollLeft;
+    var toVisibleIndex = Math.floor(scrollLeft / viewCellWidth) - 1;
+    var visibleSize = Math.ceil(clientWidth / viewCellWidth) + 1;
+    return {
+      toVisibleIndex: Math.max(0, toVisibleIndex),
+      visibleSize: Math.max(1, visibleSize)
+    };
+  }
+  return {
+    toVisibleIndex: 0,
+    visibleSize: 6
+  };
+}
+function loadScrollXData($xeGanttView) {
+  var reactData = $xeGanttView.reactData;
+  var internalData = $xeGanttView.internalData;
+  var isScrollXBig = reactData.isScrollXBig;
+  var scrollXStore = internalData.scrollXStore;
+  var preloadSize = scrollXStore.preloadSize,
+    startIndex = scrollXStore.startIndex,
+    endIndex = scrollXStore.endIndex,
+    offsetSize = scrollXStore.offsetSize;
+  var _handleVirtualXVisibl2 = handleVirtualXVisible($xeGanttView),
+    toVisibleIndex = _handleVirtualXVisibl2.toVisibleIndex,
+    visibleSize = _handleVirtualXVisibl2.visibleSize;
+  var offsetItem = {
+    startIndex: Math.max(0, isScrollXBig ? toVisibleIndex - 1 : toVisibleIndex - 1 - offsetSize - preloadSize),
+    endIndex: isScrollXBig ? toVisibleIndex + visibleSize : toVisibleIndex + visibleSize + offsetSize + preloadSize
+  };
+  scrollXStore.visibleStartIndex = toVisibleIndex - 1;
+  scrollXStore.visibleEndIndex = toVisibleIndex + visibleSize + 1;
+  var offsetStartIndex = offsetItem.startIndex,
+    offsetEndIndex = offsetItem.endIndex;
+  if (toVisibleIndex <= startIndex || toVisibleIndex >= endIndex - visibleSize - 1) {
+    if (startIndex !== offsetStartIndex || endIndex !== offsetEndIndex) {
+      scrollXStore.startIndex = offsetStartIndex;
+      scrollXStore.endIndex = offsetEndIndex;
+      updateScrollXData($xeGanttView);
+    }
+  }
+}
+function updateScrollXData($xeGanttView) {
+  handleTableColumn($xeGanttView);
+  updateScrollXSpace($xeGanttView);
+  return $xeGanttView.$nextTick();
+}
+function updateScrollXStatus($xeGanttView) {
+  var reactData = $xeGanttView.reactData;
+  var scrollXLoad = true;
+  reactData.scrollXLoad = scrollXLoad;
+  return scrollXLoad;
+}
+function handleTableColumn($xeGanttView) {
+  var reactData = $xeGanttView.reactData;
+  var internalData = $xeGanttView.internalData;
+  var scrollXLoad = reactData.scrollXLoad;
+  var visibleColumn = internalData.visibleColumn,
+    scrollXStore = internalData.scrollXStore;
+  var tableColumn = scrollXLoad ? visibleColumn.slice(scrollXStore.startIndex, scrollXStore.endIndex) : visibleColumn.slice(0);
+  reactData.tableColumn = tableColumn;
+}
+function updateScrollXSpace($xeGanttView) {
+  var reactData = $xeGanttView.reactData;
+  var internalData = $xeGanttView.internalData;
+  var scrollXLoad = reactData.scrollXLoad,
+    scrollXWidth = reactData.scrollXWidth,
+    viewCellWidth = reactData.viewCellWidth;
+  var elemStore = internalData.elemStore,
+    scrollXStore = internalData.scrollXStore;
+  var bodyTableElem = (0, _util.getRefElem)(elemStore['main-body-table']);
+  // const headerTableElem = getRefElem(elemStore['main-header-table'])
+  // const footerTableElem = getRefElem(elemStore['main-footer-table'])
+  var startIndex = scrollXStore.startIndex;
+  var xSpaceLeft = 0;
+  if (scrollXLoad) {
+    xSpaceLeft = Math.max(0, startIndex * viewCellWidth);
+  }
+  // if (headerTableElem) {
+  //   headerTableElem.style.transform = `translate(${xSpaceLeft}px, 0px)`
+  // }
+  if (bodyTableElem) {
+    bodyTableElem.style.transform = "translate(".concat(xSpaceLeft, "px, ").concat(reactData.scrollYTop || 0, "px)");
+  }
+  // if (footerTableElem) {
+  //   footerTableElem.style.transform = `translate(${xSpaceLeft}px, 0px)`
+  // }
+  var layoutList = ['header', 'body', 'footer'];
+  layoutList.forEach(function (layout) {
+    var xSpaceElem = (0, _util.getRefElem)(elemStore["main-".concat(layout, "-xSpace")]);
+    if (xSpaceElem) {
+      xSpaceElem.style.width = scrollXLoad ? "".concat(scrollXWidth, "px") : '';
+    }
+  });
+  var scrollXSpaceEl = $xeGanttView.$refs.refScrollXSpaceElem;
+  if (scrollXSpaceEl) {
+    scrollXSpaceEl.style.width = "".concat(scrollXWidth, "px");
+  }
+  calcScrollbar($xeGanttView);
   return $xeGanttView.$nextTick();
 }
-// function updateScrollXSpace ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPrivateMethods) {
-//   const reactData = $xeGanttView.reactData
-//   const internalData = $xeGanttView.internalData
-//   const { scrollXLoad, scrollXWidth } = reactData
-//   const { elemStore } = internalData
-//   const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
-//   const bodyTableElem = getRefElem(elemStore['main-body-table'])
-//   let xSpaceLeft = 0
-//   let clientWidth = 0
-//   if (bodyScrollElem) {
-//     clientWidth = bodyScrollElem.clientWidth
-//   }
-//   // 虚拟渲染
-//   let isScrollXBig = false
-//   let ySpaceWidth = scrollXWidth
-//   if (scrollXWidth > maxXWidth) {
-//     // 触右
-//     if (bodyScrollElem && bodyTableElem && bodyScrollElem.scrollLeft + clientWidth >= maxXWidth) {
-//       xSpaceLeft = maxXWidth - bodyTableElem.clientWidth
-//     } else {
-//       xSpaceLeft = (maxXWidth - clientWidth) * (xSpaceLeft / (scrollXWidth - clientWidth))
-//     }
-//     ySpaceWidth = maxXWidth
-//     isScrollXBig = true
-//   }
-//   if (bodyTableElem) {
-//     bodyTableElem.style.transform = `translate(${xSpaceLeft}px, ${reactData.scrollYTop || 0}px)`
-//   }
-//   const layoutList = ['header', 'body', 'footer']
-//   layoutList.forEach(layout => {
-//     const xSpaceElem = getRefElem(elemStore[`main-${layout}-xSpace`])
-//     if (xSpaceElem) {
-//       xSpaceElem.style.width = scrollXLoad ? `${ySpaceWidth}px` : ''
-//     }
-//   })
-//   reactData.scrollXLeft = xSpaceLeft
-//   reactData.scrollXWidth = ySpaceWidth
-//   reactData.isScrollXBig = isScrollXBig
-//   const scrollXSpaceEl = $xeGanttView.$refs.refScrollXSpaceElem as HTMLDivElement
-//   if (scrollXSpaceEl) {
-//     scrollXSpaceEl.style.width = `${ySpaceWidth}px`
-//   }
-//   calcScrollbar($xeGanttView)
-//   return $xeGanttView.$nextTick().then(() => {
-//     updateStyle($xeGanttView)
-//   })
-// }
+function triggerScrollXEvent($xeGanttView) {
+  loadScrollXData($xeGanttView);
+}
 function updateScrollYSpace($xeGanttView) {
   var reactData = $xeGanttView.reactData;
   var internalData = $xeGanttView.internalData;
@@ -717,6 +869,8 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       scrollbarWidth: 0,
       // 横向滚动条的高度
       scrollbarHeight: 0,
+      // 最后滚动时间戳
+      lastScrollTime: 0,
       lazScrollLoading: false,
       scrollVMLoading: false,
       scrollYHeight: 0,
@@ -845,11 +999,15 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     },
     triggerBodyScrollEvent: function triggerBodyScrollEvent(evnt) {
       var $xeGanttView = this;
+      var reactData = $xeGanttView.reactData;
       var internalData = $xeGanttView.internalData;
+      var scrollXLoad = reactData.scrollXLoad;
       var elemStore = internalData.elemStore,
         inVirtualScroll = internalData.inVirtualScroll,
         inHeaderScroll = internalData.inHeaderScroll,
-        inFooterScroll = internalData.inFooterScroll;
+        inFooterScroll = internalData.inFooterScroll,
+        lastScrollLeft = internalData.lastScrollLeft,
+        lastScrollTop = internalData.lastScrollTop;
       if (inVirtualScroll) {
         return;
       }
@@ -860,42 +1018,49 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       var headerScrollElem = (0, _util.getRefElem)(elemStore['main-header-scroll']);
       var xHandleEl = $xeGanttView.$refs.refScrollXHandleElem;
       var yHandleEl = $xeGanttView.$refs.refScrollYHandleElem;
-      if (headerScrollElem && wrapperEl) {
-        var isRollX = true;
-        var isRollY = true;
-        var currLeftNum = wrapperEl.scrollLeft;
-        var currTopNum = wrapperEl.scrollTop;
-        internalData.inBodyScroll = true;
-        (0, _dom.setScrollLeft)(xHandleEl, currLeftNum);
-        (0, _dom.setScrollLeft)(headerScrollElem, currLeftNum);
-        (0, _dom.setScrollTop)(yHandleEl, currTopNum);
-        syncTableScrollTop($xeGanttView, currTopNum);
-        handleScrollEvent($xeGanttView, evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum);
-      }
-    },
-    triggerFooterScrollEvent: function triggerFooterScrollEvent(evnt) {
-      var $xeGanttView = this;
-      var internalData = $xeGanttView.internalData;
-      var inVirtualScroll = internalData.inVirtualScroll,
-        inHeaderScroll = internalData.inHeaderScroll,
-        inBodyScroll = internalData.inBodyScroll;
-      if (inVirtualScroll) {
-        return;
-      }
-      if (inHeaderScroll || inBodyScroll) {
-        return;
+      var scrollLeft = wrapperEl.scrollLeft;
+      var scrollTop = wrapperEl.scrollTop;
+      var isRollX = scrollLeft !== lastScrollLeft;
+      var isRollY = scrollTop !== lastScrollTop;
+      internalData.inBodyScroll = true;
+      internalData.scrollRenderType = '';
+      if (isRollY) {
+        (0, _dom.setScrollTop)(yHandleEl, scrollTop);
+        syncTableScrollTop($xeGanttView, scrollTop);
       }
-      var wrapperEl = evnt.currentTarget;
-      if (wrapperEl) {
-        var isRollX = true;
-        var isRollY = false;
-        var currLeftNum = wrapperEl.scrollLeft;
-        handleScrollEvent($xeGanttView, evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum);
+      if (isRollX) {
+        internalData.inBodyScroll = true;
+        (0, _dom.setScrollLeft)(xHandleEl, scrollLeft);
+        (0, _dom.setScrollLeft)(headerScrollElem, scrollLeft);
+        if (scrollXLoad) {
+          triggerScrollXEvent($xeGanttView);
+        }
       }
+      handleScrollEvent($xeGanttView, evnt, isRollY, isRollX, wrapperEl.scrollTop, scrollLeft);
     },
+    // triggerFooterScrollEvent (evnt: Event) {
+    //   const $xeGanttView = this
+    //   const internalData = $xeGanttView.internalData
+    //   const { inVirtualScroll, inHeaderScroll, inBodyScroll } = internalData
+    //   if (inVirtualScroll) {
+    //     return
+    //   }
+    //   if (inHeaderScroll || inBodyScroll) {
+    //     return
+    //   }
+    //   const wrapperEl = evnt.currentTarget as HTMLDivElement
+    //   if (wrapperEl) {
+    //     const isRollX = true
+    //     const isRollY = false
+    //     const currLeftNum = wrapperEl.scrollLeft
+    //     handleScrollEvent($xeGanttView, evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum)
+    //   }
+    // },
     triggerVirtualScrollXEvent: function triggerVirtualScrollXEvent(evnt) {
       var $xeGanttView = this;
+      var reactData = $xeGanttView.reactData;
       var internalData = $xeGanttView.internalData;
+      var scrollXLoad = reactData.scrollXLoad;
       var elemStore = internalData.elemStore,
         inHeaderScroll = internalData.inHeaderScroll,
         inBodyScroll = internalData.inBodyScroll;
@@ -912,6 +1077,9 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         internalData.inVirtualScroll = true;
         (0, _dom.setScrollLeft)(headerScrollElem, currLeftNum);
         (0, _dom.setScrollLeft)(bodyScrollElem, currLeftNum);
+        if (scrollXLoad) {
+          triggerScrollXEvent($xeGanttView);
+        }
         handleScrollEvent($xeGanttView, evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum);
       }
     },
@@ -938,24 +1106,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     },
     handleUpdateSXSpace: function handleUpdateSXSpace() {
       var $xeGanttView = this;
-      var reactData = $xeGanttView.reactData;
-      var internalData = $xeGanttView.internalData;
-      var scrollXLoad = reactData.scrollXLoad,
-        scrollXWidth = reactData.scrollXWidth;
-      var elemStore = internalData.elemStore;
-      var layoutList = ['header', 'body', 'footer'];
-      layoutList.forEach(function (layout) {
-        var xSpaceElem = (0, _util.getRefElem)(elemStore["main-".concat(layout, "-xSpace")]);
-        if (xSpaceElem) {
-          xSpaceElem.style.width = scrollXLoad ? "".concat(scrollXWidth, "px") : '';
-        }
-      });
-      var scrollXSpaceEl = $xeGanttView.$refs.refScrollXSpaceElem;
-      if (scrollXSpaceEl) {
-        scrollXSpaceEl.style.width = "".concat(scrollXWidth, "px");
-      }
-      calcScrollbar($xeGanttView);
-      return $xeGanttView.$nextTick();
+      return updateScrollXSpace($xeGanttView);
     },
     handleUpdateSYSpace: function handleUpdateSYSpace() {
       var $xeGanttView = this;