vxe-gantt 3.0.6 → 3.0.8

package/es/gantt/src/gantt-header.js

@@ -20,8 +20,10 @@ export default defineVxeComponent({
             const _vm = this;
             const $xeGantt = _vm.$xeGantt;
             const $xeGanttView = _vm.$xeGanttView;
-            const { reactData } = $xeGanttView;
-            const { tableColumn, headerGroups, viewCellWidth } = reactData;
+            const reactData = $xeGanttView.reactData;
+            const internalData = $xeGanttView.internalData;
+            const { headerGroups, viewCellWidth } = reactData;
+            const { visibleColumn } = internalData;
             return h('div', {
                 ref: 'refElem',
                 class: 'vxe-gantt-view--header-wrapper'
@@ -41,7 +43,7 @@ export default defineVxeComponent({
                         ref: 'refHeaderTable',
                         class: 'vxe-gantt-view--header-table'
                     }, [
-                        h('colgroup', {}, tableColumn.map((column, cIndex) => {
+                        h('colgroup', {}, visibleColumn.map((column, cIndex) => {
                             return h('col', {
                                 key: cIndex,
                                 style: {

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

@@ -10,6 +10,7 @@ const { globalEvents } = VxeUI;
 function createInternalData() {
     return {
         xeTable: null,
+        visibleColumn: [],
         startMaps: {},
         endMaps: {},
         chartMaps: {},
@@ -24,16 +25,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
     };
 }
 const maxYHeight = 5e6;
@@ -77,37 +71,37 @@ function handleParseColumn($xeGanttView) {
         const currTime = minViewDate.getTime();
         const diffDayNum = maxViewDate.getTime() - minViewDate.getTime();
         const 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
+        // }
         const renderListMaps = {
             year: [],
             quarter: [],
@@ -255,8 +249,11 @@ function handleParseColumn($xeGanttView) {
         if ($xeTable) {
             const startField = $xeGantt.computeStartField;
             const endField = $xeGantt.computeEndField;
+            const tableReactData = $xeTable;
+            const { isRowGroupStatus } = tableReactData;
             const tableInternalData = $xeTable;
-            const { afterFullData, afterTreeFullData } = tableInternalData;
+            const { afterFullData, afterTreeFullData, afterGroupFullData } = tableInternalData;
+            const aggregateOpts = $xeTable.computeAggregateOpts;
             const treeOpts = $xeTable.computeTreeOpts;
             const { transform } = treeOpts;
             const childrenField = treeOpts.children || treeOpts.childrenField;
@@ -278,7 +275,15 @@ function handleParseColumn($xeGanttView) {
                     };
                 }
             };
-            if (treeConfig) {
+            if (isRowGroupStatus) {
+                // 行分组
+                const mapChildrenField = aggregateOpts.mapChildrenField;
+                if (mapChildrenField) {
+                    XEUtils.eachTree(afterGroupFullData, handleParseRender, { children: mapChildrenField });
+                }
+            }
+            else if (treeConfig) {
+                // 树结构
                 XEUtils.eachTree(afterTreeFullData, handleParseRender, { children: transform ? treeOpts.mapChildrenField : childrenField });
             }
             else {
@@ -287,8 +292,10 @@ function handleParseColumn($xeGanttView) {
             internalData.chartMaps = ctMaps;
         }
     }
-    reactData.tableColumn = fullCols;
+    internalData.visibleColumn = fullCols;
     reactData.headerGroups = groupCols;
+    updateScrollXStatus($xeGanttView);
+    handleTableColumn($xeGanttView);
 }
 function handleUpdateData($xeGanttView) {
     const $xeGantt = $xeGanttView.$xeGantt;
@@ -296,6 +303,7 @@ function handleUpdateData($xeGanttView) {
     const internalData = $xeGanttView.internalData;
     const ganttProps = $xeGantt;
     const { treeConfig } = ganttProps;
+    const { scrollXStore } = internalData;
     const $xeTable = internalData.xeTable;
     const sdMaps = {};
     const edMaps = {};
@@ -304,8 +312,11 @@ function handleUpdateData($xeGanttView) {
     if ($xeTable) {
         const startField = $xeGantt.computeStartField;
         const endField = $xeGantt.computeEndField;
+        const tableReactData = $xeTable;
+        const { isRowGroupStatus } = tableReactData;
         const tableInternalData = $xeTable;
-        const { afterFullData, afterTreeFullData } = tableInternalData;
+        const { afterFullData, afterTreeFullData, afterGroupFullData } = tableInternalData;
+        const aggregateOpts = $xeTable.computeAggregateOpts;
         const treeOpts = $xeTable.computeTreeOpts;
         const { transform } = treeOpts;
         const childrenField = treeOpts.children || treeOpts.childrenField;
@@ -323,13 +334,23 @@ function handleUpdateData($xeGanttView) {
                 }
             }
         };
-        if (treeConfig) {
+        if (isRowGroupStatus) {
+            // 行分组
+            const mapChildrenField = aggregateOpts.mapChildrenField;
+            if (mapChildrenField) {
+                XEUtils.eachTree(afterGroupFullData, handleMinMaxData, { children: mapChildrenField });
+            }
+        }
+        else if (treeConfig) {
+            // 树结构
             XEUtils.eachTree(afterTreeFullData, handleMinMaxData, { children: transform ? treeOpts.mapChildrenField : childrenField });
         }
         else {
             afterFullData.forEach(handleMinMaxData);
         }
     }
+    scrollXStore.startIndex = 0;
+    scrollXStore.endIndex = Math.max(1, scrollXStore.visibleSize);
     reactData.minViewDate = minDate;
     reactData.maxViewDate = maxDate;
     internalData.startMaps = sdMaps;
@@ -375,10 +396,8 @@ function updateChart($xeGanttView) {
             }
             const rowid = rowEl.getAttribute('rowid');
             const rowRest = rowid ? chartMaps[rowid] : null;
-            if (rowRest) {
-                barEl.style.left = `${viewCellWidth * rowRest.oLeftSize}px`;
-                barEl.style.width = `${viewCellWidth * rowRest.oWidthSize}px`;
-            }
+            barEl.style.left = `${rowRest ? viewCellWidth * rowRest.oLeftSize : 0}px`;
+            barEl.style.width = `${rowRest ? viewCellWidth * rowRest.oWidthSize : 0}px`;
         });
     }
     return $xeGanttView.$nextTick();
@@ -387,8 +406,8 @@ function updateStyle($xeGanttView) {
     const $xeGantt = $xeGanttView.$xeGantt;
     const reactData = $xeGanttView.reactData;
     const internalData = $xeGanttView.internalData;
-    const { scrollbarWidth, scrollbarHeight, tableColumn, headerGroups } = reactData;
-    const { elemStore } = internalData;
+    const { scrollbarWidth, scrollbarHeight, headerGroups, tableColumn } = reactData;
+    const { elemStore, visibleColumn } = internalData;
     const $xeTable = internalData.xeTable;
     const el = $xeGanttView.$refs.refElem;
     if (!el || !el.clientHeight) {
@@ -469,82 +488,194 @@ function updateStyle($xeGanttView) {
         yBottomCornerEl.style.display = tFooterHeight ? 'block' : '';
     }
     const colInfoElem = $xeGanttView.$refs.refColInfoElem;
+    let viewCellWidth = 40;
     if (colInfoElem) {
-        reactData.viewCellWidth = colInfoElem.clientWidth || 40;
+        viewCellWidth = colInfoElem.clientWidth || 40;
     }
-    let viewTableWidth = reactData.viewCellWidth * tableColumn.length;
+    let viewTableWidth = viewCellWidth * visibleColumn.length;
     if (bodyScrollElem) {
         const viewWidth = bodyScrollElem.clientWidth;
         const remainWidth = viewWidth - viewTableWidth;
         if (remainWidth > 0) {
-            reactData.viewCellWidth += Math.floor(remainWidth / tableColumn.length);
+            viewCellWidth += Math.floor(remainWidth / visibleColumn.length);
             viewTableWidth = viewWidth;
         }
     }
+    reactData.viewCellWidth = viewCellWidth;
     const headerTableElem = getRefElem(elemStore['main-header-table']);
     const bodyTableElem = getRefElem(elemStore['main-body-table']);
+    const vmTableWidth = viewCellWidth * tableColumn.length;
     if (headerTableElem) {
         headerTableElem.style.width = `${viewTableWidth}px`;
     }
     if (bodyTableElem) {
-        bodyTableElem.style.width = `${viewTableWidth}px`;
+        bodyTableElem.style.width = `${vmTableWidth}px`;
     }
     reactData.scrollXWidth = viewTableWidth;
     return updateChart($xeGanttView);
 }
-function handleLazyRecalculate($xeGanttView) {
+function handleRecalculateStyle($xeGanttView) {
+    const internalData = $xeGanttView.internalData;
+    const 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) {
+    const internalData = $xeGanttView.internalData;
+    return new Promise(resolve => {
+        const { rceTimeout, rceRunTime } = internalData;
+        const $xeTable = internalData.xeTable;
+        let refreshDelay = 50;
+        if ($xeTable) {
+            const resizeOpts = $xeTable.computeResizeOpts;
+            refreshDelay = resizeOpts.refreshDelay || 50;
+        }
+        if (rceTimeout) {
+            clearTimeout(rceTimeout);
+            if (rceRunTime && rceRunTime + (refreshDelay - 5) < Date.now()) {
+                resolve(handleRecalculateStyle($xeGanttView));
+            }
+            else {
+                $xeGanttView.$nextTick(() => {
+                    resolve();
+                });
+            }
+        }
+        else {
+            resolve(handleRecalculateStyle($xeGanttView));
+        }
+        internalData.rceTimeout = setTimeout(() => {
+            internalData.rceTimeout = undefined;
+            handleRecalculateStyle($xeGanttView);
+        }, refreshDelay);
+    });
+}
+function computeScrollLoad($xeGanttView) {
+    const reactData = $xeGanttView.reactData;
+    const internalData = $xeGanttView.internalData;
+    return $xeGanttView.$nextTick().then(() => {
+        const { scrollXLoad } = reactData;
+        const { scrollXStore } = internalData;
+        // 计算 X 逻辑
+        if (scrollXLoad) {
+            const { toVisibleIndex: toXVisibleIndex, visibleSize: visibleXSize } = handleVirtualXVisible($xeGanttView);
+            const 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(() => {
+                loadScrollXData($xeGanttView);
+            });
+        }
+        else {
+            updateScrollXSpace($xeGanttView);
+        }
+    });
+}
+function handleVirtualXVisible($xeGanttView) {
+    const reactData = $xeGanttView.reactData;
+    const internalData = $xeGanttView.internalData;
+    const { viewCellWidth } = reactData;
+    const { elemStore } = internalData;
+    const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
+    if (bodyScrollElem) {
+        const clientWidth = bodyScrollElem.clientWidth;
+        const scrollLeft = bodyScrollElem.scrollLeft;
+        const toVisibleIndex = Math.floor(scrollLeft / viewCellWidth) - 1;
+        const 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) {
+    const reactData = $xeGanttView.reactData;
+    const internalData = $xeGanttView.internalData;
+    const { isScrollXBig } = reactData;
+    const { scrollXStore } = internalData;
+    const { preloadSize, startIndex, endIndex, offsetSize } = scrollXStore;
+    const { toVisibleIndex, visibleSize } = handleVirtualXVisible($xeGanttView);
+    const 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;
+    const { startIndex: offsetStartIndex, endIndex: offsetEndIndex } = offsetItem;
+    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 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 updateScrollXStatus($xeGanttView) {
+    const reactData = $xeGanttView.reactData;
+    const scrollXLoad = true;
+    reactData.scrollXLoad = scrollXLoad;
+    return scrollXLoad;
+}
+function handleTableColumn($xeGanttView) {
+    const reactData = $xeGanttView.reactData;
+    const internalData = $xeGanttView.internalData;
+    const { scrollXLoad } = reactData;
+    const { visibleColumn, scrollXStore } = internalData;
+    const tableColumn = scrollXLoad ? visibleColumn.slice(scrollXStore.startIndex, scrollXStore.endIndex) : visibleColumn.slice(0);
+    reactData.tableColumn = tableColumn;
+}
+function updateScrollXSpace($xeGanttView) {
+    const reactData = $xeGanttView.reactData;
+    const internalData = $xeGanttView.internalData;
+    const { scrollXLoad, scrollXWidth, viewCellWidth } = reactData;
+    const { elemStore, scrollXStore } = internalData;
+    const bodyTableElem = getRefElem(elemStore['main-body-table']);
+    // const headerTableElem = getRefElem(elemStore['main-header-table'])
+    // const footerTableElem = getRefElem(elemStore['main-footer-table'])
+    const { startIndex } = scrollXStore;
+    let 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(${xSpaceLeft}px, ${reactData.scrollYTop || 0}px)`;
+    }
+    // if (footerTableElem) {
+    //   footerTableElem.style.transform = `translate(${xSpaceLeft}px, 0px)`
+    // }
+    const layoutList = ['header', 'body', 'footer'];
+    layoutList.forEach(layout => {
+        const xSpaceElem = getRefElem(elemStore[`main-${layout}-xSpace`]);
+        if (xSpaceElem) {
+            xSpaceElem.style.width = scrollXLoad ? `${scrollXWidth}px` : '';
+        }
+    });
+    const scrollXSpaceEl = $xeGanttView.$refs.refScrollXSpaceElem;
+    if (scrollXSpaceEl) {
+        scrollXSpaceEl.style.width = `${scrollXWidth}px`;
+    }
+    calcScrollbar($xeGanttView);
+    return $xeGanttView.$nextTick();
+}
+function triggerScrollXEvent($xeGanttView) {
+    loadScrollXData($xeGanttView);
+}
 function updateScrollYSpace($xeGanttView) {
     const reactData = $xeGanttView.reactData;
     const internalData = $xeGanttView.internalData;
@@ -673,6 +804,8 @@ export default defineVxeComponent({
             scrollbarWidth: 0,
             // 横向滚动条的高度
             scrollbarHeight: 0,
+            // 最后滚动时间戳
+            lastScrollTime: 0,
             lazScrollLoading: false,
             scrollVMLoading: false,
             scrollYHeight: 0,
@@ -791,8 +924,10 @@ export default defineVxeComponent({
         },
         triggerBodyScrollEvent(evnt) {
             const $xeGanttView = this;
+            const reactData = $xeGanttView.reactData;
             const internalData = $xeGanttView.internalData;
-            const { elemStore, inVirtualScroll, inHeaderScroll, inFooterScroll } = internalData;
+            const { scrollXLoad } = reactData;
+            const { elemStore, inVirtualScroll, inHeaderScroll, inFooterScroll, lastScrollLeft, lastScrollTop } = internalData;
             if (inVirtualScroll) {
                 return;
             }
@@ -803,40 +938,49 @@ export default defineVxeComponent({
             const headerScrollElem = getRefElem(elemStore['main-header-scroll']);
             const xHandleEl = $xeGanttView.$refs.refScrollXHandleElem;
             const yHandleEl = $xeGanttView.$refs.refScrollYHandleElem;
-            if (headerScrollElem && wrapperEl) {
-                const isRollX = true;
-                const isRollY = true;
-                const currLeftNum = wrapperEl.scrollLeft;
-                const currTopNum = wrapperEl.scrollTop;
-                internalData.inBodyScroll = true;
-                setScrollLeft(xHandleEl, currLeftNum);
-                setScrollLeft(headerScrollElem, currLeftNum);
-                setScrollTop(yHandleEl, currTopNum);
-                syncTableScrollTop($xeGanttView, currTopNum);
-                handleScrollEvent($xeGanttView, evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum);
+            const scrollLeft = wrapperEl.scrollLeft;
+            const scrollTop = wrapperEl.scrollTop;
+            const isRollX = scrollLeft !== lastScrollLeft;
+            const isRollY = scrollTop !== lastScrollTop;
+            internalData.inBodyScroll = true;
+            internalData.scrollRenderType = '';
+            if (isRollY) {
+                setScrollTop(yHandleEl, scrollTop);
+                syncTableScrollTop($xeGanttView, scrollTop);
             }
-        },
-        triggerFooterScrollEvent(evnt) {
-            const $xeGanttView = this;
-            const internalData = $xeGanttView.internalData;
-            const { inVirtualScroll, inHeaderScroll, inBodyScroll } = internalData;
-            if (inVirtualScroll) {
-                return;
-            }
-            if (inHeaderScroll || inBodyScroll) {
-                return;
-            }
-            const wrapperEl = evnt.currentTarget;
-            if (wrapperEl) {
-                const isRollX = true;
-                const isRollY = false;
-                const currLeftNum = wrapperEl.scrollLeft;
-                handleScrollEvent($xeGanttView, evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum);
+            if (isRollX) {
+                internalData.inBodyScroll = true;
+                setScrollLeft(xHandleEl, scrollLeft);
+                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(evnt) {
             const $xeGanttView = this;
+            const reactData = $xeGanttView.reactData;
             const internalData = $xeGanttView.internalData;
+            const { scrollXLoad } = reactData;
             const { elemStore, inHeaderScroll, inBodyScroll } = internalData;
             if (inHeaderScroll || inBodyScroll) {
                 return;
@@ -851,6 +995,9 @@ export default defineVxeComponent({
                 internalData.inVirtualScroll = true;
                 setScrollLeft(headerScrollElem, currLeftNum);
                 setScrollLeft(bodyScrollElem, currLeftNum);
+                if (scrollXLoad) {
+                    triggerScrollXEvent($xeGanttView);
+                }
                 handleScrollEvent($xeGanttView, evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum);
             }
         },
@@ -875,23 +1022,7 @@ export default defineVxeComponent({
         },
         handleUpdateSXSpace() {
             const $xeGanttView = this;
-            const reactData = $xeGanttView.reactData;
-            const internalData = $xeGanttView.internalData;
-            const { scrollXLoad, scrollXWidth } = reactData;
-            const { elemStore } = internalData;
-            const layoutList = ['header', 'body', 'footer'];
-            layoutList.forEach(layout => {
-                const xSpaceElem = getRefElem(elemStore[`main-${layout}-xSpace`]);
-                if (xSpaceElem) {
-                    xSpaceElem.style.width = scrollXLoad ? `${scrollXWidth}px` : '';
-                }
-            });
-            const scrollXSpaceEl = $xeGanttView.$refs.refScrollXSpaceElem;
-            if (scrollXSpaceEl) {
-                scrollXSpaceEl.style.width = `${scrollXWidth}px`;
-            }
-            calcScrollbar($xeGanttView);
-            return $xeGanttView.$nextTick();
+            return updateScrollXSpace($xeGanttView);
         },
         handleUpdateSYSpace() {
             const $xeGanttView = this;