vxe-gantt 4.0.6 → 4.0.8

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

@@ -13,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'
@@ -31,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: {

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,
@@ -136,37 +132,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: [],
@@ -314,9 +310,12 @@ export default defineVxeComponent({
                 if ($xeTable) {
                     const startField = computeStartField.value;
                     const endField = computeEndField.value;
-                    const { computeTreeOpts } = $xeTable.getComputeMaps();
+                    const { computeAggregateOpts, computeTreeOpts } = $xeTable.getComputeMaps();
+                    const tableReactData = $xeTable.reactData;
+                    const { isRowGroupStatus } = tableReactData;
                     const tableInternalData = $xeTable.internalData;
-                    const { afterFullData, afterTreeFullData } = tableInternalData;
+                    const { afterFullData, afterTreeFullData, afterGroupFullData } = tableInternalData;
+                    const aggregateOpts = computeAggregateOpts.value;
                     const treeOpts = computeTreeOpts.value;
                     const { transform } = treeOpts;
                     const childrenField = treeOpts.children || treeOpts.childrenField;
@@ -338,7 +337,15 @@ export default defineVxeComponent({
                             };
                         }
                     };
-                    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 {
@@ -347,12 +354,15 @@ export default defineVxeComponent({
                     internalData.chartMaps = ctMaps;
                 }
             }
-            reactData.tableColumn = fullCols;
+            internalData.visibleColumn = fullCols;
             reactData.headerGroups = groupCols;
+            updateScrollXStatus();
+            handleTableColumn();
         };
         const handleUpdateData = () => {
             const ganttProps = $xeGantt.props;
             const { treeConfig } = ganttProps;
+            const { scrollXStore } = internalData;
             const $xeTable = internalData.xeTable;
             const sdMaps = {};
             const edMaps = {};
@@ -361,9 +371,12 @@ export default defineVxeComponent({
             if ($xeTable) {
                 const startField = computeStartField.value;
                 const endField = computeEndField.value;
-                const { computeTreeOpts } = $xeTable.getComputeMaps();
+                const { computeAggregateOpts, computeTreeOpts } = $xeTable.getComputeMaps();
+                const tableReactData = $xeTable.reactData;
+                const { isRowGroupStatus } = tableReactData;
                 const tableInternalData = $xeTable.internalData;
-                const { afterFullData, afterTreeFullData } = tableInternalData;
+                const { afterFullData, afterTreeFullData, afterGroupFullData } = tableInternalData;
+                const aggregateOpts = computeAggregateOpts.value;
                 const treeOpts = computeTreeOpts.value;
                 const { transform } = treeOpts;
                 const childrenField = treeOpts.children || treeOpts.childrenField;
@@ -381,13 +394,23 @@ export default defineVxeComponent({
                         }
                     }
                 };
-                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;
@@ -428,17 +451,15 @@ export default defineVxeComponent({
                     }
                     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 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 +540,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 +790,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 +889,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 +901,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 +953,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 +977,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;
             }

package/es/gantt/src/gantt.js

@@ -689,23 +689,23 @@ export default defineVxeComponent({
                 let tipHeight = 0;
                 if (rsNumLeftEl) {
                     if (offsetLeft < 0) {
+                        rsNumLeftEl.style.display = 'none';
+                    }
+                    else {
                         rsNumLeftEl.textContent = `${targetTableWidth}px`;
                         rsNumLeftEl.style.display = 'block';
                         tipHeight = rsNumLeftEl.offsetHeight;
                     }
-                    else {
-                        rsNumLeftEl.style.display = 'none';
-                    }
                 }
                 if (rsNumRightEl) {
                     if (offsetLeft < 0) {
-                        rsNumRightEl.style.display = 'none';
-                    }
-                    else {
                         rsNumRightEl.textContent = `${Math.floor(containerRect.width - targetTableWidth)}px`;
                         rsNumRightEl.style.display = 'block';
                         tipHeight = rsNumRightEl.offsetHeight;
                     }
+                    else {
+                        rsNumRightEl.style.display = 'none';
+                    }
                 }
                 const tipTop = evnt.clientY - containerRect.top - tipHeight / 2;
                 rsSplitLineEl.style.left = `${targetTableWidth}px`;
@@ -1776,10 +1776,10 @@ export default defineVxeComponent({
                                 }, [
                                     h('div', {
                                         class: 'vxe-gantt--resizable-split-number-left'
-                                    }, '10px'),
+                                    }),
                                     h('div', {
                                         class: 'vxe-gantt--resizable-split-number-right'
-                                    }, '20px')
+                                    })
                                 ])
                             ]),
                             h('div', {
@@ -1916,9 +1916,6 @@ export default defineVxeComponent({
                 if (props.expandConfig) {
                     warnLog('vxe.error.notProp', ['expand-config']);
                 }
-                if (props.aggregateConfig) {
-                    warnLog('vxe.error.notProp', ['aggregate-config']);
-                }
                 if (columns && columns.length) {
                     $xeGantt.loadColumn(columns);
                 }

package/es/gantt/style.css

@@ -152,6 +152,9 @@
   width: var(--vxe-ui-gantt-view-split-bar-width);
   background-color: var(--vxe-ui-gantt-view-split-bar-background-color);
 }
+.vxe-gantt .vxe-gantt--view-split-bar:hover, .vxe-gantt .vxe-gantt--view-split-bar:active {
+  background-color: var(--vxe-ui-gantt-view-split-bar-hover-background-color);
+}
 .vxe-gantt .vxe-gantt--view-split-bar.is--resize {
   cursor: col-resize;
 }
@@ -356,7 +359,8 @@
 }
 .vxe-gantt--view-split-bar-left-btn:hover,
 .vxe-gantt--view-split-bar-right-btn:hover {
-  background-color: var(--vxe-ui-font-primary-lighten-color);
+  color: #ffffff;
+  background-color: var(--vxe-ui-font-primary-color);
 }
 .vxe-gantt--view-split-bar-left-btn:active,
 .vxe-gantt--view-split-bar-right-btn:active {