vxe-gantt 4.0.5 → 4.0.7

package/es/gantt/src/emits.js

@@ -4,5 +4,7 @@ export const ganttEmits = [
     'task-cell-click',
     'task-cell-dblclick',
     'task-bar-click',
-    'task-bar-dblclick'
+    'task-bar-dblclick',
+    'task-view-cell-click',
+    'task-view-cell-dblclick'
 ];

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

@@ -30,13 +30,28 @@ export default defineVxeComponent({
             const progressField = computeProgressField.value;
             const taskBarOpts = computeTaskBarOpts.value;
             const { showProgress, showContent, contentMethod, barStyle } = taskBarOpts;
-            const { round } = barStyle || {};
+            const isBarRowStyle = XEUtils.isFunction(barStyle);
+            const barStyObj = (barStyle ? (isBarRowStyle ? barStyle({ row, $gantt: $xeGantt }) : barStyle) : {}) || {};
+            const { round } = barStyObj;
             const rowRest = fullAllDataRowIdData[rowid] || {};
             const resizeHeight = resizeHeightFlag ? rowRest.resizeHeight : 0;
             const isRsHeight = resizeHeight > 0;
             const cellHeight = getCellRestHeight(rowRest, cellOpts, rowOpts, defaultRowHeight);
             let title = getStringValue(XEUtils.get(row, titleField));
             const progressValue = showProgress ? Math.min(100, Math.max(0, XEUtils.toNumber(XEUtils.get(row, progressField)))) : 0;
+            const vbStyle = {};
+            const vpStyle = {
+                width: `${progressValue || 0}%`
+            };
+            if (isBarRowStyle) {
+                const { bgColor, completedBgColor } = barStyObj;
+                if (bgColor) {
+                    vbStyle.backgroundColor = bgColor;
+                }
+                if (completedBgColor) {
+                    vpStyle.backgroundColor = completedBgColor;
+                }
+            }
             if (contentMethod) {
                 title = getStringValue(contentMethod({ row, title }));
             }
@@ -53,6 +68,7 @@ export default defineVxeComponent({
             }, [
                 h('div', {
                     class: taskBarSlot ? 'vxe-gantt-view--chart-custom-bar' : 'vxe-gantt-view--chart-bar',
+                    style: vbStyle,
                     rowid,
                     onClick(evnt) {
                         $xeGantt.handleTaskBarClickEvent(evnt, { row });
@@ -66,9 +82,7 @@ export default defineVxeComponent({
                         showProgress
                             ? h('div', {
                                 class: 'vxe-gantt-view--chart-progress',
-                                style: {
-                                    width: `${progressValue || 0}%`
-                                }
+                                style: vpStyle
                             })
                             : renderEmptyElement($xeGantt),
                         showContent

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

@@ -5,6 +5,7 @@ const { getI18n } = VxeUI;
 export default defineVxeComponent({
     name: 'VxeGanttViewHeader',
     setup() {
+        const $xeGantt = inject('$xeGantt', {});
         const $xeGanttView = inject('$xeGanttView', {});
         const { reactData, internalData } = $xeGanttView;
         const refElem = ref();
@@ -12,7 +13,8 @@ export default defineVxeComponent({
         const refHeaderTable = ref();
         const refHeaderXSpace = ref();
         const renderVN = () => {
-            const { tableColumn, headerGroups, viewCellWidth } = reactData;
+            const { headerGroups, viewCellWidth } = reactData;
+            const { visibleColumn } = internalData;
             return h('div', {
                 ref: refElem,
                 class: 'vxe-gantt-view--header-wrapper'
@@ -30,7 +32,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: {
@@ -39,11 +41,12 @@ export default defineVxeComponent({
                             });
                         })),
                         h('thead', {}, headerGroups.map(({ scaleItem, columns }, $rowIndex) => {
-                            const { type, titleMethod } = scaleItem;
+                            const { type, titleMethod, slots } = scaleItem;
+                            const titleSlot = slots ? slots.title : null;
                             return h('tr', {
                                 key: $rowIndex
                             }, columns.map((column, cIndex) => {
-                                const dateObj = column.params;
+                                const { childCount, dateObj } = column;
                                 let label = `${column.title}`;
                                 if ($rowIndex < headerGroups.length - 1) {
                                     if (scaleItem.type === 'day') {
@@ -53,15 +56,20 @@ export default defineVxeComponent({
                                         label = getI18n(`vxe.gantt.${!$rowIndex && headerGroups.length > 1 ? 'tFullFormat' : 'tSimpleFormat'}.${type}`, dateObj);
                                     }
                                 }
-                                if (titleMethod) {
-                                    label = `${titleMethod({ scaleObj: scaleItem, title: label, dateObj: dateObj, $rowIndex })}`;
+                                let cellVNs = label;
+                                const ctParams = { scaleObj: scaleItem, title: label, dateObj: dateObj, $rowIndex };
+                                if (titleSlot) {
+                                    cellVNs = $xeGantt.callSlot(titleSlot, ctParams);
+                                }
+                                else if (titleMethod) {
+                                    cellVNs = `${titleMethod(ctParams)}`;
                                 }
                                 return h('th', {
                                     key: cIndex,
                                     class: 'vxe-gantt-view--header-column',
-                                    colspan: column.childCount || null,
-                                    title: label
-                                }, label);
+                                    colspan: childCount || null,
+                                    title: titleSlot ? null : label
+                                }, cellVNs);
                             }));
                         }))
                     ])

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

@@ -11,6 +11,7 @@ const { globalEvents } = VxeUI;
 function createInternalData() {
     return {
         xeTable: null,
+        visibleColumn: [],
         startMaps: {},
         endMaps: {},
         chartMaps: {},
@@ -25,16 +26,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;
@@ -72,6 +66,8 @@ export default defineVxeComponent({
             scrollbarWidth: 0,
             // 横向滚动条的高度
             scrollbarHeight: 0,
+            // 最后滚动时间戳
+            lastScrollTime: 0,
             lazScrollLoading: false,
             scrollVMLoading: false,
             scrollYHeight: 0,
@@ -112,9 +108,12 @@ export default defineVxeComponent({
             const { treeConfig } = ganttProps;
             const { taskScaleList } = ganttReactData;
             const { minViewDate, maxViewDate } = reactData;
+            const { scrollXStore } = internalData;
             const minScale = XEUtils.last(taskScaleList);
             const fullCols = [];
             const groupCols = [];
+            scrollXStore.startIndex = 0;
+            scrollXStore.endIndex = 1;
             if (minScale && minViewDate && maxViewDate) {
                 const minSType = minScale.type;
                 const weekScale = taskScaleList.find(item => item.type === 'week');
@@ -136,37 +135,37 @@ export default defineVxeComponent({
                 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: [],
@@ -220,47 +219,47 @@ export default defineVxeComponent({
                         year: {
                             field: yyyy,
                             title: yyyy,
-                            params: dateObj
+                            dateObj
                         },
                         quarter: {
                             field: `${yyyy}_q${q}`,
-                            title: q,
-                            params: dateObj
+                            title: `${q}`,
+                            dateObj
                         },
                         month: {
                             field: `${yyyy}_${MM}`,
                             title: MM,
-                            params: dateObj
+                            dateObj
                         },
                         week: {
                             field: `${yyyy}_W${W}`,
-                            title: W,
-                            params: dateObj
+                            title: `${W}`,
+                            dateObj
                         },
                         day: {
                             field: `${yyyy}_${MM}_${dd}_E${E}`,
-                            title: E,
-                            params: dateObj
+                            title: `${E}`,
+                            dateObj
                         },
                         date: {
                             field: `${yyyy}_${MM}_${dd}`,
                             title: dd,
-                            params: dateObj
+                            dateObj
                         },
                         hour: {
                             field: `${yyyy}_${MM}_${dd}_${HH}`,
                             title: HH,
-                            params: dateObj
+                            dateObj
                         },
                         minute: {
                             field: `${yyyy}_${MM}_${dd}_${HH}_${mm}`,
                             title: mm,
-                            params: dateObj
+                            dateObj
                         },
                         second: {
                             field: `${yyyy}_${MM}_${dd}_${HH}_${mm}_${ss}`,
                             title: ss,
-                            params: dateObj
+                            dateObj
                         }
                     };
                     const minCol = colMaps[minSType];
@@ -347,8 +346,10 @@ export default defineVxeComponent({
                     internalData.chartMaps = ctMaps;
                 }
             }
-            reactData.tableColumn = fullCols;
+            internalData.visibleColumn = fullCols;
             reactData.headerGroups = groupCols;
+            updateScrollXStatus();
+            handleTableColumn();
         };
         const handleUpdateData = () => {
             const ganttProps = $xeGantt.props;
@@ -437,8 +438,8 @@ export default defineVxeComponent({
             return nextTick();
         };
         const updateStyle = () => {
-            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 = refElem.value;
             if (!el || !el.clientHeight) {
@@ -519,37 +520,182 @@ export default defineVxeComponent({
                 yBottomCornerEl.style.display = tFooterHeight ? 'block' : '';
             }
             const colInfoElem = refColInfoElem.value;
+            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();
         };
-        const handleLazyRecalculate = () => {
+        const handleRecalculateStyle = () => {
+            const el = refElem.value;
+            internalData.rceRunTime = Date.now();
+            if (!el || !el.clientWidth) {
+                return nextTick();
+            }
             calcScrollbar();
             updateStyle();
             updateChart();
+            return computeScrollLoad();
+        };
+        const handleLazyRecalculate = () => {
+            return new Promise(resolve => {
+                const { rceTimeout, rceRunTime } = internalData;
+                const $xeTable = internalData.xeTable;
+                let refreshDelay = 50;
+                if ($xeTable) {
+                    const { computeResizeOpts } = $xeTable.getComputeMaps();
+                    const resizeOpts = computeResizeOpts.value;
+                    refreshDelay = resizeOpts.refreshDelay || 50;
+                }
+                if (rceTimeout) {
+                    clearTimeout(rceTimeout);
+                    if (rceRunTime && rceRunTime + (refreshDelay - 5) < Date.now()) {
+                        resolve(handleRecalculateStyle());
+                    }
+                    else {
+                        nextTick(() => {
+                            resolve();
+                        });
+                    }
+                }
+                else {
+                    resolve(handleRecalculateStyle());
+                }
+                internalData.rceTimeout = setTimeout(() => {
+                    internalData.rceTimeout = undefined;
+                    handleRecalculateStyle();
+                }, refreshDelay);
+            });
+        };
+        const computeScrollLoad = () => {
+            return nextTick().then(() => {
+                const { scrollXLoad } = reactData;
+                const { scrollXStore } = internalData;
+                // 计算 X 逻辑
+                if (scrollXLoad) {
+                    const { toVisibleIndex: toXVisibleIndex, visibleSize: visibleXSize } = handleVirtualXVisible();
+                    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().then(() => {
+                        loadScrollXData();
+                    });
+                }
+                else {
+                    updateScrollXSpace();
+                }
+            });
+        };
+        const handleVirtualXVisible = () => {
+            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 };
+        };
+        const loadScrollXData = () => {
+            const { isScrollXBig } = reactData;
+            const { scrollXStore } = internalData;
+            const { preloadSize, startIndex, endIndex, offsetSize } = scrollXStore;
+            const { toVisibleIndex, visibleSize } = handleVirtualXVisible();
+            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();
+                }
+            }
+        };
+        const updateScrollXData = () => {
+            handleTableColumn();
+            updateScrollXSpace();
             return nextTick();
         };
-        // const updateScrollXSpace = () => {
-        // }
+        const updateScrollXStatus = () => {
+            const scrollXLoad = true;
+            reactData.scrollXLoad = scrollXLoad;
+            return scrollXLoad;
+        };
+        const handleTableColumn = () => {
+            const { scrollXLoad } = reactData;
+            const { visibleColumn, scrollXStore } = internalData;
+            const tableColumn = scrollXLoad ? visibleColumn.slice(scrollXStore.startIndex, scrollXStore.endIndex) : visibleColumn.slice(0);
+            reactData.tableColumn = tableColumn;
+        };
+        const updateScrollXSpace = () => {
+            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 = refScrollXSpaceElem.value;
+            if (scrollXSpaceEl) {
+                scrollXSpaceEl.style.width = `${scrollXWidth}px`;
+            }
+            calcScrollbar();
+            return nextTick();
+        };
+        const triggerScrollXEvent = () => {
+            loadScrollXData();
+        };
         const updateScrollYSpace = () => {
             const { elemStore } = internalData;
             const $xeTable = internalData.xeTable;
@@ -624,6 +770,13 @@ export default defineVxeComponent({
         };
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const handleScrollEvent = (evnt, isRollY, isRollX, scrollTop, scrollLeft) => {
+            if (isRollX) {
+                internalData.lastScrollLeft = scrollLeft;
+            }
+            if (isRollY) {
+                internalData.lastScrollTop = scrollTop;
+            }
+            reactData.lastScrollTime = Date.now();
             checkLastSyncScroll(isRollX, isRollY);
         };
         const ganttViewMethods = {
@@ -716,7 +869,8 @@ export default defineVxeComponent({
                 }
             },
             triggerBodyScrollEvent(evnt) {
-                const { elemStore, inVirtualScroll, inHeaderScroll, inFooterScroll } = internalData;
+                const { scrollXLoad } = reactData;
+                const { elemStore, inVirtualScroll, inHeaderScroll, inFooterScroll, lastScrollLeft, lastScrollTop } = internalData;
                 if (inVirtualScroll) {
                     return;
                 }
@@ -727,36 +881,44 @@ export default defineVxeComponent({
                 const headerScrollElem = getRefElem(elemStore['main-header-scroll']);
                 const xHandleEl = refScrollXHandleElem.value;
                 const yHandleEl = refScrollYHandleElem.value;
-                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(currTopNum);
-                    handleScrollEvent(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(scrollTop);
                 }
-            },
-            triggerFooterScrollEvent(evnt) {
-                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(evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum);
+                if (isRollX) {
+                    internalData.inBodyScroll = true;
+                    setScrollLeft(xHandleEl, scrollLeft);
+                    setScrollLeft(headerScrollElem, scrollLeft);
+                    if (scrollXLoad) {
+                        triggerScrollXEvent();
+                    }
                 }
+                handleScrollEvent(evnt, isRollY, isRollX, wrapperEl.scrollTop, scrollLeft);
             },
+            // triggerFooterScrollEvent (evnt) {
+            //   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(evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum)
+            //   }
+            // },
             triggerVirtualScrollXEvent(evnt) {
+                const { scrollXLoad } = reactData;
                 const { elemStore, inHeaderScroll, inBodyScroll } = internalData;
                 if (inHeaderScroll || inBodyScroll) {
                     return;
@@ -771,6 +933,9 @@ export default defineVxeComponent({
                     internalData.inVirtualScroll = true;
                     setScrollLeft(headerScrollElem, currLeftNum);
                     setScrollLeft(bodyScrollElem, currLeftNum);
+                    if (scrollXLoad) {
+                        triggerScrollXEvent();
+                    }
                     handleScrollEvent(evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum);
                 }
             },
@@ -792,23 +957,11 @@ export default defineVxeComponent({
                 }
             },
             handleUpdateSXSpace() {
-                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 = refScrollXSpaceElem.value;
-                if (scrollXSpaceEl) {
-                    scrollXSpaceEl.style.width = `${scrollXWidth}px`;
-                }
-                calcScrollbar();
-                return nextTick();
+                return updateScrollXSpace();
+            },
+            handleUpdateSYSpace() {
+                return updateScrollYSpace();
             },
-            handleUpdateSYSpace: updateScrollYSpace,
             handleUpdateSYStatus(sYLoad) {
                 reactData.scrollYLoad = sYLoad;
             }