vxe-table 4.15.4 → 4.15.6

package/es/table/module/custom/hook.js

@@ -315,5 +315,8 @@ VxeUI.hooks.add('tableCustomModule', {
     },
     setupGrid($xeGrid) {
         return $xeGrid.extendTableMethods(tableCustomMethodKeys);
+    },
+    setupGantt($xeGantt) {
+        return $xeGantt.extendTableMethods(tableCustomMethodKeys);
     }
 });

package/es/table/module/edit/hook.js

@@ -973,5 +973,8 @@ hooks.add('tableEditModule', {
     },
     setupGrid($xeGrid) {
         return $xeGrid.extendTableMethods(tableEditMethodKeys);
+    },
+    setupGantt($xeGantt) {
+        return $xeGantt.extendTableMethods(tableEditMethodKeys);
     }
 });

package/es/table/module/export/hook.js

@@ -256,6 +256,7 @@ hooks.add('tableExportModule', {
         const { props, reactData, internalData } = $xeTable;
         const { computeTreeOpts, computePrintOpts, computeExportOpts, computeImportOpts, computeCustomOpts, computeSeqOpts, computeRadioOpts, computeCheckboxOpts, computeColumnOpts } = $xeTable.getComputeMaps();
         const $xeGrid = inject('$xeGrid', null);
+        const $xeGantt = inject('$xeGantt', null);
         const hasTreeChildren = (row) => {
             const treeOpts = computeTreeOpts.value;
             const childrenField = treeOpts.children || treeOpts.childrenField;
@@ -1297,6 +1298,7 @@ hooks.add('tableExportModule', {
                                 const params = {
                                     $table: $xeTable,
                                     $grid: $xeGrid,
+                                    $gantt: $xeGantt,
                                     sort: sortData.length ? sortData[0] : {},
                                     sorts: sortData,
                                     filters: gridReactData.filterData,
@@ -1306,7 +1308,7 @@ hooks.add('tableExportModule', {
                                 return Promise.resolve((beforeQueryAll || ajaxMethods)(params))
                                     .then(rest => {
                                     const listProp = resConfigs.list;
-                                    handleOptions.data = (listProp ? (XEUtils.isFunction(listProp) ? listProp({ data: rest, $grid: $xeGrid }) : XEUtils.get(rest, listProp)) : rest) || [];
+                                    handleOptions.data = (listProp ? (XEUtils.isFunction(listProp) ? listProp({ data: rest, $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt }) : XEUtils.get(rest, listProp)) : rest) || [];
                                     if (afterQueryAll) {
                                         afterQueryAll(params);
                                     }
@@ -1550,5 +1552,8 @@ hooks.add('tableExportModule', {
     },
     setupGrid($xeGrid) {
         return $xeGrid.extendTableMethods(tableExportMethodKeys);
+    },
+    setupGantt($xeGantt) {
+        return $xeGantt.extendTableMethods(tableExportMethodKeys);
     }
 });

package/es/table/module/filter/hook.js

@@ -344,5 +344,8 @@ hooks.add('tableFilterModule', {
     },
     setupGrid($xeGrid) {
         return $xeGrid.extendTableMethods(tableFilterMethodKeys);
+    },
+    setupGantt($xeGantt) {
+        return $xeGantt.extendTableMethods(tableFilterMethodKeys);
     }
 });

package/es/table/module/menu/hook.js

@@ -298,5 +298,8 @@ hooks.add('tableMenuModule', {
     },
     setupGrid($xeGrid) {
         return $xeGrid.extendTableMethods(tableMenuMethodKeys);
+    },
+    setupGantt($xeGantt) {
+        return $xeGantt.extendTableMethods(tableMenuMethodKeys);
     }
 });

package/es/table/module/validator/hook.js

@@ -595,5 +595,8 @@ hooks.add('tableValidatorModule', {
     },
     setupGrid($xeGrid) {
         return $xeGrid.extendTableMethods(tableValidatorMethodKeys);
+    },
+    setupGantt($xeGantt) {
+        return $xeGantt.extendTableMethods(tableValidatorMethodKeys);
     }
 });

package/es/table/src/emits.js

@@ -1,4 +1,4 @@
-export default [
+export const tableEmits = [
     'update:data',
     'keydown-start',
     'keydown',

package/es/table/src/header.js

@@ -294,8 +294,8 @@ export default defineVxeComponent({
                             });
                         })),
                         /**
-                       * 头部
-                       */
+                         * 头部
+                         */
                         h('thead', {
                             ref: refHeaderTHead
                         }, renderHeads(isGroup, isOptimizeMode, renderHeaderList))

package/es/table/src/props.js

@@ -1,6 +1,6 @@
 import { VxeUI } from '../../ui';
 const { getConfig } = VxeUI;
-export default {
+export const tableProps = {
     /** 基本属性 */
     id: [String, Function],
     // 数据

package/es/table/src/table.js

@@ -12,13 +12,21 @@ import Cell from './cell';
 import TableBodyComponent from './body';
 import TableHeaderComponent from './header';
 import TableFooterComponent from './footer';
-import tableProps from './props';
-import tableEmits from './emits';
+import { tableProps } from './props';
+import { tableEmits } from './emits';
 import TableCustomPanelComponent from '../module/custom/panel';
 import TableFilterPanelComponent from '../module/filter/panel';
 import TableImportPanelComponent from '../module/export/import-panel';
 import TableExportPanelComponent from '../module/export/export-panel';
 import TableMenuPanelComponent from '../module/menu/panel';
+import '../module/filter/hook';
+import '../module/menu/hook';
+import '../module/edit/hook';
+import '../module/export/hook';
+import '../module/keyboard/hook';
+import '../module/validator/hook';
+import '../module/custom/hook';
+import '../render';
 const { getConfig, getIcon, getI18n, renderer, formats, createEvent, globalResize, interceptor, hooks, globalEvents, GLOBAL_EVENT_KEYS, useFns, renderEmptyElement } = VxeUI;
 const supportMaxRow = 5e6;
 const customStorageKey = 'VXE_CUSTOM_STORE';
@@ -62,6 +70,12 @@ export default defineVxeComponent({
             lastScrollTime: 0,
             // 行高
             rowHeight: 0,
+            // 表头高度
+            tHeaderHeight: 0,
+            // 表体高度
+            tBodyHeight: 0,
+            // 表尾高度
+            tFooterHeight: 0,
             // 表格父容器的高度
             parentHeight: 0,
             // 是否使用分组表头
@@ -319,6 +333,7 @@ export default defineVxeComponent({
         const refScrollXSpaceElem = ref();
         const refScrollYSpaceElem = ref();
         const $xeGrid = inject('$xeGrid', null);
+        const $xeGantt = inject('$xeGantt', null);
         let $xeToolbar;
         const computeTableId = computed(() => {
             const { id } = props;
@@ -797,6 +812,8 @@ export default defineVxeComponent({
             getRefMaps: () => refMaps,
             getComputeMaps: () => computeMaps,
             xeGrid: $xeGrid,
+            xeGantt: $xeGantt,
+            // 已废弃
             xegrid: $xeGrid
         };
         const eqCellValue = (row1, row2, field) => {
@@ -1750,12 +1767,17 @@ export default defineVxeComponent({
         const calcCellAutoHeight = (rowRest, wrapperEl) => {
             const cellElemList = wrapperEl.querySelectorAll(`.vxe-cell--wrapper[rowid="${rowRest.rowid}"]`);
             let colHeight = rowRest.height;
+            let firstCellStyle = null;
+            let topBottomPadding = 0;
             for (let i = 0; i < cellElemList.length; i++) {
-                const cellElem = cellElemList[i];
-                const tdEl = cellElem.parentElement;
-                const topBottomPadding = Math.ceil(XEUtils.toNumber(tdEl.style.paddingTop) + XEUtils.toNumber(tdEl.style.paddingBottom));
-                const cellHeight = cellElem ? cellElem.clientHeight : 0;
-                colHeight = Math.max(colHeight - topBottomPadding, Math.ceil(cellHeight));
+                const wrapperElem = cellElemList[i];
+                const cellElem = wrapperElem.parentElement;
+                if (!firstCellStyle) {
+                    firstCellStyle = getComputedStyle(cellElem);
+                    topBottomPadding = firstCellStyle ? Math.ceil(XEUtils.toNumber(firstCellStyle.paddingTop) + XEUtils.toNumber(firstCellStyle.paddingBottom)) : 0;
+                }
+                const cellHeight = wrapperElem ? wrapperElem.clientHeight : 0;
+                colHeight = Math.max(colHeight, Math.ceil(cellHeight + topBottomPadding));
             }
             return colHeight;
         };
@@ -2135,14 +2157,15 @@ export default defineVxeComponent({
         };
         const updateStyle = () => {
             const { showHeaderOverflow: allColumnHeaderOverflow, showFooterOverflow: allColumnFooterOverflow, mouseConfig, spanMethod, footerSpanMethod } = props;
-            const { isGroup, currentRow, tableColumn, scrollXLoad, scrollYLoad, overflowX, scrollbarWidth, overflowY, scrollbarHeight, scrollXWidth, columnStore, editStore, isAllOverflow, expandColumn, isColLoading } = reactData;
-            const { visibleColumn, tableHeight, headerHeight, footerHeight, elemStore, customHeight, customMinHeight, customMaxHeight } = internalData;
+            const { isGroup, currentRow, tableColumn, scrollXLoad, scrollYLoad, overflowX, scrollbarWidth, overflowY, scrollbarHeight, scrollXWidth, columnStore, editStore, isAllOverflow, expandColumn, isColLoading, tHeaderHeight, tFooterHeight } = reactData;
+            const { visibleColumn, tableHeight, elemStore, customHeight, customMinHeight, customMaxHeight } = internalData;
+            const $xeGanttView = internalData.xeGanttView;
             const el = refElem.value;
-            if (!el) {
+            if (!el || !el.clientHeight) {
                 return;
             }
             const containerList = ['main', 'left', 'right'];
-            const osbWidth = overflowY ? scrollbarWidth : 0;
+            let osbWidth = overflowY ? scrollbarWidth : 0;
             const osbHeight = overflowX ? scrollbarHeight : 0;
             const emptyPlaceholderElem = refEmptyPlaceholder.value;
             const mouseOpts = computeMouseOpts.value;
@@ -2150,36 +2173,45 @@ export default defineVxeComponent({
             const bodyWrapperElem = getRefElem(elemStore['main-body-wrapper']);
             const bodyTableElem = getRefElem(elemStore['main-body-table']);
             if (emptyPlaceholderElem) {
-                emptyPlaceholderElem.style.top = `${headerHeight}px`;
+                emptyPlaceholderElem.style.top = `${tHeaderHeight}px`;
                 emptyPlaceholderElem.style.height = bodyWrapperElem ? `${bodyWrapperElem.offsetHeight - osbHeight}px` : '';
             }
-            let bodyHeight = 0;
+            const scrollbarXToTop = computeScrollbarXToTop.value;
+            const scrollbarYToLeft = computeScrollbarYToLeft.value;
+            const xScrollbarVisible = overflowX ? 'visible' : 'hidden';
+            let yScrollbarVisible = overflowY ? 'visible' : 'hidden';
+            if ($xeGanttView) {
+                if (!scrollbarYToLeft) {
+                    osbWidth = 0;
+                    yScrollbarVisible = 'hidden';
+                }
+            }
+            let tbHeight = 0;
             let bodyMaxHeight = 0;
-            const bodyMinHeight = customMinHeight - headerHeight - footerHeight - osbHeight;
+            const bodyMinHeight = customMinHeight - tHeaderHeight - tFooterHeight - osbHeight;
             if (customMaxHeight) {
-                bodyMaxHeight = Math.max(bodyMinHeight, customMaxHeight - headerHeight - footerHeight - osbHeight);
+                bodyMaxHeight = Math.max(bodyMinHeight, customMaxHeight - tHeaderHeight - tFooterHeight - osbHeight);
             }
             if (customHeight) {
-                bodyHeight = customHeight - headerHeight - footerHeight - osbHeight;
+                tbHeight = customHeight - tHeaderHeight - tFooterHeight - osbHeight;
             }
-            if (!bodyHeight) {
+            if (!tbHeight) {
                 if (bodyTableElem) {
-                    bodyHeight = bodyTableElem.clientHeight;
+                    tbHeight = bodyTableElem.clientHeight;
                 }
             }
-            if (bodyHeight) {
+            if (tbHeight) {
                 if (bodyMaxHeight) {
-                    bodyHeight = Math.min(bodyMaxHeight, bodyHeight);
+                    tbHeight = Math.min(bodyMaxHeight, tbHeight);
                 }
-                bodyHeight = Math.max(bodyMinHeight, bodyHeight);
+                tbHeight = Math.max(bodyMinHeight, tbHeight);
             }
-            const scrollbarXToTop = computeScrollbarXToTop.value;
             const xLeftCornerEl = refScrollXLeftCornerElem.value;
             const xRightCornerEl = refScrollXRightCornerElem.value;
             const scrollXVirtualEl = refScrollXVirtualElem.value;
             if (scrollXVirtualEl) {
                 scrollXVirtualEl.style.height = `${osbHeight}px`;
-                scrollXVirtualEl.style.visibility = overflowX ? 'visible' : 'hidden';
+                scrollXVirtualEl.style.visibility = xScrollbarVisible;
             }
             const xWrapperEl = refScrollXWrapperElem.value;
             if (xWrapperEl) {
@@ -2197,30 +2229,31 @@ export default defineVxeComponent({
             const scrollYVirtualEl = refScrollYVirtualElem.value;
             if (scrollYVirtualEl) {
                 scrollYVirtualEl.style.width = `${osbWidth}px`;
-                scrollYVirtualEl.style.height = `${bodyHeight + headerHeight + footerHeight}px`;
-                scrollYVirtualEl.style.visibility = overflowY ? 'visible' : 'hidden';
+                scrollYVirtualEl.style.height = `${tbHeight + tHeaderHeight + tFooterHeight}px`;
+                scrollYVirtualEl.style.visibility = yScrollbarVisible;
             }
             const yTopCornerEl = refScrollYTopCornerElem.value;
             if (yTopCornerEl) {
-                yTopCornerEl.style.height = `${headerHeight}px`;
-                yTopCornerEl.style.display = overflowY && headerHeight ? 'block' : '';
+                yTopCornerEl.style.height = `${tHeaderHeight}px`;
+                yTopCornerEl.style.display = overflowY && tHeaderHeight ? 'block' : '';
             }
             const yWrapperEl = refScrollYWrapperElem.value;
             if (yWrapperEl) {
-                yWrapperEl.style.height = `${bodyHeight}px`;
-                yWrapperEl.style.top = `${headerHeight}px`;
+                yWrapperEl.style.height = `${tbHeight}px`;
+                yWrapperEl.style.top = `${tHeaderHeight}px`;
             }
             const yBottomCornerEl = refScrollYBottomCornerElem.value;
             if (yBottomCornerEl) {
-                yBottomCornerEl.style.height = `${footerHeight}px`;
-                yBottomCornerEl.style.top = `${headerHeight + bodyHeight}px`;
-                yBottomCornerEl.style.display = overflowY && footerHeight ? 'block' : '';
+                yBottomCornerEl.style.height = `${tFooterHeight}px`;
+                yBottomCornerEl.style.top = `${tHeaderHeight + tbHeight}px`;
+                yBottomCornerEl.style.display = overflowY && tFooterHeight ? 'block' : '';
             }
             const rowExpandEl = refRowExpandElem.value;
             if (rowExpandEl) {
-                rowExpandEl.style.height = `${bodyHeight}px`;
-                rowExpandEl.style.top = `${headerHeight}px`;
+                rowExpandEl.style.height = `${tbHeight}px`;
+                rowExpandEl.style.top = `${tHeaderHeight}px`;
             }
+            reactData.tBodyHeight = tbHeight;
             containerList.forEach((name, index) => {
                 const fixedType = index > 0 ? name : '';
                 const layoutList = ['header', 'body', 'footer'];
@@ -2284,7 +2317,7 @@ export default defineVxeComponent({
                             }
                         }
                         if (currScrollElem) {
-                            currScrollElem.style.height = `${headerHeight}px`;
+                            currScrollElem.style.height = `${tHeaderHeight}px`;
                         }
                         if (tableElem) {
                             tableElem.style.width = tWidth ? `${tWidth}px` : '';
@@ -2293,15 +2326,15 @@ export default defineVxeComponent({
                     else if (layout === 'body') {
                         if (currScrollElem) {
                             currScrollElem.style.maxHeight = customMaxHeight ? `${bodyMaxHeight}px` : '';
-                            currScrollElem.style.height = customHeight ? `${bodyHeight}px` : '';
+                            currScrollElem.style.height = customHeight ? `${tbHeight}px` : '';
                             currScrollElem.style.minHeight = `${bodyMinHeight}px`;
                         }
                         // 如果是固定列
                         if (fixedWrapperElem) {
                             if (wrapperElem) {
-                                wrapperElem.style.top = `${headerHeight}px`;
+                                wrapperElem.style.top = `${tHeaderHeight}px`;
                             }
-                            fixedWrapperElem.style.height = `${customHeight > 0 ? customHeight : (tableHeight + headerHeight + footerHeight + osbHeight)}px`;
+                            fixedWrapperElem.style.height = `${customHeight > 0 ? customHeight : (tableHeight + tHeaderHeight + tFooterHeight + osbHeight)}px`;
                             fixedWrapperElem.style.width = `${fixedColumn.reduce((previous, column) => previous + column.renderWidth, 0)}px`;
                         }
                         let renderColumnList = tableColumn;
@@ -2378,11 +2411,11 @@ export default defineVxeComponent({
                             }
                         }
                         if (currScrollElem) {
-                            currScrollElem.style.height = `${footerHeight}px`;
+                            currScrollElem.style.height = `${tFooterHeight}px`;
                             // 如果是固定列
                             if (fixedWrapperElem) {
                                 if (wrapperElem) {
-                                    wrapperElem.style.top = `${customHeight > 0 ? customHeight - footerHeight - osbHeight : tableHeight + headerHeight}px`;
+                                    wrapperElem.style.top = `${customHeight > 0 ? customHeight - tFooterHeight - osbHeight : tableHeight + tHeaderHeight}px`;
                                 }
                             }
                         }
@@ -2398,6 +2431,9 @@ export default defineVxeComponent({
             if (mouseConfig && mouseOpts.selected && editStore.selected.row && editStore.selected.column) {
                 $xeTable.addCellSelectedClass();
             }
+            if ($xeGanttView) {
+                $xeGanttView.handleUpdateStyle();
+            }
             return nextTick();
         };
         const checkValidate = (type) => {
@@ -2973,13 +3009,13 @@ export default defineVxeComponent({
                 if (xHandleEl) {
                     reactData.scrollbarHeight = scrollbarOpts.height || (xHandleEl.offsetHeight - xHandleEl.clientHeight) || 14;
                 }
-                const headerHeight = headerTableElem ? headerTableElem.clientHeight : 0;
-                const footerHeight = footerTableElem ? footerTableElem.clientHeight : 0;
+                const hHeight = headerTableElem ? headerTableElem.clientHeight : 0;
+                const fHeight = footerTableElem ? footerTableElem.clientHeight : 0;
                 internalData.tableHeight = bodyWrapperElem.offsetHeight;
-                internalData.headerHeight = headerHeight;
-                internalData.footerHeight = footerHeight;
+                reactData.tHeaderHeight = hHeight;
+                reactData.tFooterHeight = fHeight;
                 reactData.overflowX = overflowX;
-                reactData.parentHeight = Math.max(internalData.headerHeight + footerHeight + 20, $xeTable.getParentHeight());
+                reactData.parentHeight = Math.max(hHeight + fHeight + 20, $xeTable.getParentHeight());
             }
             if (overflowX) {
                 $xeTable.checkScrolling();
@@ -3032,6 +3068,7 @@ export default defineVxeComponent({
         };
         const handleLazyRecalculate = (reFull, reWidth, reHeight) => {
             return new Promise(resolve => {
+                const $xeGanttView = internalData.xeGanttView;
                 const { rceTimeout, rceRunTime } = internalData;
                 const resizeOpts = computeResizeOpts.value;
                 const refreshDelay = resizeOpts.refreshDelay || 20;
@@ -3054,6 +3091,9 @@ export default defineVxeComponent({
                 else {
                     resolve(handleRecalculateStyle(reFull, reWidth, reHeight));
                 }
+                if ($xeGanttView) {
+                    $xeGanttView.handleLazyRecalculate();
+                }
                 internalData.rceTimeout = setTimeout(() => {
                     internalData.rceTimeout = undefined;
                     handleRecalculateStyle(reFull, reWidth, reHeight);
@@ -4010,6 +4050,17 @@ export default defineVxeComponent({
             };
             requestAnimationFrame(step);
         };
+        const syncGanttScrollTop = (scrollTop) => {
+            const $xeGanttView = internalData.xeGanttView;
+            if ($xeGanttView) {
+                const ganttInternalData = $xeGanttView.internalData;
+                const { elemStore: ganttElemStore } = ganttInternalData;
+                const ganttBodyScrollElem = getRefElem(ganttElemStore['main-body-scroll']);
+                if (ganttBodyScrollElem) {
+                    ganttBodyScrollElem.scrollTop = scrollTop;
+                }
+            }
+        };
         const dispatchEvent = (type, params, evnt) => {
             emit(type, createEvent(evnt, { $table: $xeTable, $grid: $xeGrid }, params));
         };
@@ -5190,6 +5241,25 @@ export default defineVxeComponent({
                 });
                 return rest;
             },
+            recalcRowHeight(rowOrId) {
+                const { fullAllDataRowIdData } = internalData;
+                const rows = XEUtils.isArray(rowOrId) ? rowOrId : [rowOrId];
+                const el = refElem.value;
+                if (el) {
+                    const { handleGetRowId } = createHandleGetRowId($xeTable);
+                    el.setAttribute('data-calc-row', 'Y');
+                    rows.forEach(row => {
+                        const rowid = XEUtils.isString(row) || XEUtils.isNumber(row) ? row : handleGetRowId(row);
+                        const rowRest = fullAllDataRowIdData[rowid];
+                        if (rowRest) {
+                            rowRest.resizeHeight = calcCellAutoHeight(rowRest, el);
+                        }
+                        el.removeAttribute('data-calc-row');
+                    });
+                    reactData.calcCellHeightFlag++;
+                }
+                return nextTick();
+            },
             setRowHeight(rowOrId, height) {
                 const { fullAllDataRowIdData } = internalData;
                 let status = false;
@@ -6883,11 +6953,18 @@ export default defineVxeComponent({
                 internalData.isActivated = false;
                 return nextTick();
             },
+            /**
+             * 已废弃，被 connectToolbar 替换
+             * @deprecated
+             */
+            connect($toolbar) {
+                return $xeTable.connectToolbar($toolbar);
+            },
             /**
              * 连接工具栏
              * @param $toolbar
              */
-            connect($toolbar) {
+            connectToolbar($toolbar) {
                 if ($toolbar) {
                     $xeToolbar = $toolbar;
                     $xeToolbar.syncUpdate({ collectColumn: internalData.collectColumn, $table: $xeTable });
@@ -7819,6 +7896,7 @@ export default defineVxeComponent({
             handleTableData(force) {
                 const { scrollYLoad } = reactData;
                 const { scrollYStore, fullDataRowIdData } = internalData;
+                const $xeGanttView = internalData.xeGanttView;
                 let fullList = internalData.afterFullData;
                 // 是否进行数据处理
                 if (force) {
@@ -7839,6 +7917,9 @@ export default defineVxeComponent({
                 });
                 reactData.tableData = tableData;
                 internalData.visibleDataRowIdData = visibleDataRowIdMaps;
+                if ($xeGanttView) {
+                    $xeGanttView.updateViewData();
+                }
                 return nextTick();
             },
             /**
@@ -8173,6 +8254,7 @@ export default defineVxeComponent({
                 evnt.stopPropagation();
                 evnt.preventDefault();
                 const { row } = params;
+                const { showOverflow } = props;
                 const { overflowX, scrollbarWidth, overflowY, scrollbarHeight } = reactData;
                 const { elemStore, fullAllDataRowIdData } = internalData;
                 const osbWidth = overflowY ? scrollbarWidth : 0;
@@ -8201,7 +8283,10 @@ export default defineVxeComponent({
                     return;
                 }
                 const defaultRowHeight = computeDefaultRowHeight.value;
-                const currCellHeight = rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight;
+                let currCellHeight = rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight;
+                if (!showOverflow) {
+                    currCellHeight = tdEl.clientHeight;
+                }
                 const tableRect = tableEl.getBoundingClientRect();
                 const trRect = trEl.getBoundingClientRect();
                 const targetOffsetY = dragClientY - trRect.y - trEl.clientHeight;
@@ -10351,6 +10436,7 @@ export default defineVxeComponent({
                     }
                     setScrollTop(yHandleEl, scrollTop);
                     setScrollTop(rowExpandEl, scrollTop);
+                    syncGanttScrollTop(scrollTop);
                     if (scrollYLoad) {
                         $xeTable.triggerScrollYEvent(evnt);
                     }
@@ -10539,6 +10625,7 @@ export default defineVxeComponent({
                         setScrollTop(leftScrollElem, currTopNum);
                         setScrollTop(rightScrollElem, currTopNum);
                         setScrollTop(rowExpandEl, currTopNum);
+                        syncGanttScrollTop(currTopNum);
                         if (scrollYLoad) {
                             $xeTable.triggerScrollYEvent(evnt);
                         }
@@ -10556,6 +10643,7 @@ export default defineVxeComponent({
                             setScrollTop(leftScrollElem, currTopNum);
                             setScrollTop(rightScrollElem, currTopNum);
                             setScrollTop(rowExpandEl, currTopNum);
+                            syncGanttScrollTop(currTopNum);
                             if (scrollYLoad) {
                                 $xeTable.triggerScrollYEvent(evnt);
                             }
@@ -10629,6 +10717,7 @@ export default defineVxeComponent({
                 setScrollTop(leftScrollElem, scrollTop);
                 setScrollTop(rightScrollElem, scrollTop);
                 setScrollTop(rowExpandEl, scrollTop);
+                syncGanttScrollTop(scrollTop);
                 if (scrollYLoad) {
                     $xeTable.triggerScrollYEvent(evnt);
                 }
@@ -10668,6 +10757,7 @@ export default defineVxeComponent({
             updateScrollXSpace() {
                 const { scrollXLoad, overflowX, scrollXWidth } = reactData;
                 const { visibleColumn, scrollXStore, elemStore, fullColumnIdData } = internalData;
+                const $xeGanttView = internalData.xeGanttView;
                 const mouseOpts = computeMouseOpts.value;
                 const tableBody = refTableBody.value;
                 const tableBodyElem = tableBody ? tableBody.$el : null;
@@ -10729,10 +10819,13 @@ export default defineVxeComponent({
                     if (scrollXSpaceEl) {
                         scrollXSpaceEl.style.width = `${ySpaceWidth}px`;
                     }
+                    calcScrollbar();
                     if (isScrollXBig && mouseOpts.area) {
                         errLog('vxe.error.notProp', ['mouse-config.area']);
                     }
-                    calcScrollbar();
+                    if ($xeGanttView) {
+                        $xeGanttView.updateScrollXSpace();
+                    }
                     return nextTick().then(() => {
                         updateStyle();
                     });
@@ -10742,6 +10835,7 @@ export default defineVxeComponent({
             updateScrollYSpace() {
                 const { isAllOverflow, overflowY, scrollYLoad, expandColumn } = reactData;
                 const { scrollYStore, elemStore, isResizeCellHeight, afterFullData, fullAllDataRowIdData, rowExpandedMaps } = internalData;
+                const $xeGanttView = internalData.xeGanttView;
                 const { startIndex } = scrollYStore;
                 const mouseOpts = computeMouseOpts.value;
                 const expandOpts = computeExpandOpts.value;
@@ -10837,10 +10931,13 @@ export default defineVxeComponent({
                 reactData.scrollYTop = scrollYTop;
                 reactData.scrollYHeight = scrollYHeight;
                 reactData.isScrollYBig = isScrollYBig;
+                calcScrollbar();
                 if (isScrollYBig && mouseOpts.area) {
                     errLog('vxe.error.notProp', ['mouse-config.area']);
                 }
-                calcScrollbar();
+                if ($xeGanttView) {
+                    $xeGanttView.updateScrollYSpace();
+                }
                 return nextTick().then(() => {
                     updateStyle();
                 });
@@ -10946,6 +11043,13 @@ export default defineVxeComponent({
                     return getRowid($xeTable, row1) === getRowid($xeTable, row2);
                 }
                 return false;
+            },
+            handleConnectGanttView($ganttView) {
+                if ($ganttView && $ganttView.connectUpdate) {
+                    $ganttView.connectUpdate({ $table: $xeTable });
+                    internalData.xeGanttView = $ganttView;
+                }
+                return nextTick();
             }
         };
         // 检测对应模块是否安装
@@ -11637,28 +11741,22 @@ export default defineVxeComponent({
                 tableMethods.refreshColumn();
             });
         });
-        const reScrollFlag = ref(0);
+        const reLayoutFlag = ref(0);
         watch(computeSize, () => {
-            reScrollFlag.value++;
+            reLayoutFlag.value++;
         });
         watch(() => props.showHeader, () => {
-            reScrollFlag.value++;
+            reLayoutFlag.value++;
         });
         watch(() => props.showFooter, () => {
-            reScrollFlag.value++;
+            reLayoutFlag.value++;
         });
         watch(() => reactData.overflowX, () => {
-            reScrollFlag.value++;
+            reLayoutFlag.value++;
         });
         watch(() => reactData.overflowY, () => {
-            reScrollFlag.value++;
-        });
-        watch(reScrollFlag, () => {
-            nextTick(() => {
-                tableMethods.recalculate(true).then(() => tableMethods.refreshScroll());
-            });
+            reLayoutFlag.value++;
         });
-        const reLayoutFlag = ref(0);
         watch(() => props.height, () => {
             reLayoutFlag.value++;
         });
@@ -11675,7 +11773,7 @@ export default defineVxeComponent({
             reLayoutFlag.value++;
         });
         watch(reLayoutFlag, () => {
-            nextTick(() => tableMethods.recalculate(true));
+            $xeTable.recalculate(true);
         });
         const footFlag = ref(0);
         watch(() => props.footerData ? props.footerData.length : -1, () => {
@@ -11685,7 +11783,7 @@ export default defineVxeComponent({
             footFlag.value++;
         });
         watch(footFlag, () => {
-            tableMethods.updateFooter();
+            $xeTable.updateFooter();
         });
         watch(() => props.syncResize, (value) => {
             if (value) {