vxe-table 3.17.7 → 3.17.8

package/packages/grid/src/grid.ts

@@ -4,19 +4,19 @@ import XEUtils from 'xe-utils'
 import { getLastZIndex, nextZIndex, isEnableConf } from '../../ui/src/utils'
 import { getOffsetHeight, getPaddingTopBottomSize, getDomNode, toCssUnit } from '../../ui/src/dom'
 import { VxeUI } from '../../ui'
-import VxeTableComponent from '../../table/src/table'
-import VxeToolbarComponent from '../../toolbar/src/toolbar'
-import tableComponentProps from '../../table/src/props'
 import { getSlotVNs } from '../../ui/src/vn'
 import { warnLog, errLog } from '../../ui/src/log'
+import { tableProps } from '../../table/src/props'
+import VxeTableComponent from '../../table/src/table'
+import VxeToolbarComponent from '../../toolbar/src/toolbar'
 
 import type { VxeFormItemProps, VxeFormDefines, VxeComponentStyleType, VxeComponentSizeType, ValueOf, VxeFormInstance, VxeFormItemPropTypes, VxePagerInstance } from 'vxe-pc-ui'
-import type { GridReactData, VxeTablePropTypes, VxeGridConstructor, VxeToolbarPropTypes, VxeToolbarInstance, VxeGridPropTypes, VxeTableMethods, GridInternalData, VxeGridEmits, VxePagerDefines, VxeTableConstructor, VxeTableDefines, VxeTablePrivateMethods, TableInternalData } from '../../../types'
+import type { GridReactData, VxeTablePropTypes, VxeGridConstructor, VxeToolbarPropTypes, VxeToolbarInstance, VxeGridPropTypes, VxeTableMethods, GridInternalData, VxeGridEmits, VxePagerDefines, VxeTableConstructor, VxeTableDefines, VxeTablePrivateMethods, TableInternalData, VxeTableProps } from '../../../types'
 
 const { getConfig, getI18n, commands, globalEvents, globalMixins, createEvent, GLOBAL_EVENT_KEYS, renderEmptyElement } = VxeUI
 
 const tableMethods: VxeTableMethods = {} as VxeTableMethods
-const propKeys = Object.keys(tableComponentProps)
+const propKeys = Object.keys(tableProps) as (keyof VxeTableProps)[]
 
 const defaultLayouts: VxeGridPropTypes.Layouts = [['Form'], ['Toolbar', 'Top', 'Table', 'Bottom', 'Pager']]
 
@@ -42,7 +42,7 @@ function getTableOns (_vm: any) {
 }
 
 XEUtils.each(VxeTableComponent.methods, (fn, name) => {
-  (tableMethods as any)[name] = function (...args: any[]) {
+  tableMethods[name as keyof VxeTableMethods] = function (this: any, ...args: any[]) {
     const $xeGrid = this
     const $xeTable = $xeGrid.$refs.refTable
 
@@ -52,7 +52,6 @@ XEUtils.each(VxeTableComponent.methods, (fn, name) => {
 
 function createInternalData (): GridInternalData {
   return {
-    connectTable: null
   }
 }
 
@@ -75,11 +74,10 @@ export default /* define-vxe-component start */ defineVxeComponent({
     validConfig: Object as PropType<VxeTablePropTypes.ValidConfig>,
     editRules: Object as PropType<VxeTablePropTypes.EditRules>,
     animat: { type: Boolean, default: () => getConfig().table.animat },
-
-    // eslint-disable-next-line @typescript-eslint/ban-types
-    ...(tableComponentProps as {}),
     // 以上仅用于类型
 
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    ...(tableProps as {}),
     layouts: Array as PropType<VxeGridPropTypes.Layouts>,
     columns: Array as PropType<VxeGridPropTypes.Columns<any>>,
     pagerConfig: Object as PropType<VxeGridPropTypes.PagerConfig>,
@@ -385,7 +383,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
     ...tableMethods,
     dispatchEvent (type: ValueOf<VxeGridEmits>, params: Record<string, any>, evnt: Event | null) {
       const $xeGrid = this
-      $xeGrid.$emit(type, createEvent(evnt, { $grid: $xeGrid }, params))
+      $xeGrid.$emit(type, createEvent(evnt, { $grid: $xeGrid, $gantt: null }, params))
     },
     initPages (propKey?: 'currentPage' | 'pageSize' | 'total') {
       const $xeGrid = this
@@ -472,7 +470,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
         const $xeTable = $xeGrid.$refs.refTable as VxeTableConstructor & VxeTablePrivateMethods
         const $xeToolbar = $xeGrid.$refs.refToolbar as VxeToolbarInstance
         if ($xeTable && $xeToolbar) {
-          $xeTable.connect($xeToolbar)
+          $xeTable.connectToolbar($xeToolbar)
         }
       })
     },
@@ -538,9 +536,10 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const proxyOpts = $xeGrid.computeProxyOpts
       const resConfigs = proxyOpts.response || proxyOpts.props || {}
       const messageProp = resConfigs.message
+      const $xeTable = $xeGrid.$refs.refTable as VxeTableConstructor & VxeTablePrivateMethods
       let msg
       if (rest && messageProp) {
-        msg = XEUtils.isFunction(messageProp) ? messageProp({ data: rest, $grid: $xeGrid as unknown as VxeGridConstructor }) : XEUtils.get(rest, messageProp)
+        msg = XEUtils.isFunction(messageProp) ? messageProp({ data: rest, $table: $xeTable, $grid: $xeGrid as VxeGridConstructor, $gantt: null }) : XEUtils.get(rest, messageProp)
       }
       return msg || getI18n(defaultMsg)
     },
@@ -727,11 +726,13 @@ export default /* define-vxe-component start */ defineVxeComponent({
               }
             }
             const commitParams = {
+              $table: $xeTable,
+              $grid: $xeGrid as VxeGridConstructor,
+              $gantt: null,
               code,
               button,
               isInited,
               isReload,
-              $grid: $xeGrid as unknown as VxeGridConstructor,
               page: pageParams,
               sort: sortList.length ? sortList[0] : {},
               sorts: sortList,
@@ -750,10 +751,10 @@ export default /* define-vxe-component start */ defineVxeComponent({
                 if (rest) {
                   if (pagerConfig && isEnableConf(pagerOpts)) {
                     const totalProp = resConfigs.total
-                    const total = (XEUtils.isFunction(totalProp) ? totalProp({ data: rest, $grid: $xeGrid as unknown as VxeGridConstructor }) : XEUtils.get(rest, totalProp || 'page.total')) || 0
+                    const total = (XEUtils.isFunction(totalProp) ? totalProp({ data: rest, $table: $xeTable, $grid: $xeGrid as VxeGridConstructor, $gantt: null }) : XEUtils.get(rest, totalProp || 'page.total')) || 0
                     tablePage.total = XEUtils.toNumber(total)
                     const resultProp = resConfigs.result
-                    tableData = (XEUtils.isFunction(resultProp) ? resultProp({ data: rest, $grid: $xeGrid as unknown as VxeGridConstructor }) : XEUtils.get(rest, resultProp || 'result')) || []
+                    tableData = (XEUtils.isFunction(resultProp) ? resultProp({ data: rest, $table: $xeTable, $grid: $xeGrid as VxeGridConstructor, $gantt: null }) : XEUtils.get(rest, resultProp || 'result')) || []
                     // 检验当前页码，不能超出当前最大页数
                     const pageCount = Math.max(Math.ceil(total / tablePage.pageSize), 1)
                     if (tablePage.currentPage > pageCount) {
@@ -761,7 +762,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
                     }
                   } else {
                     const listProp = resConfigs.list
-                    tableData = (listProp ? (XEUtils.isFunction(listProp) ? listProp({ data: rest, $grid: $xeGrid as unknown as VxeGridConstructor }) : XEUtils.get(rest, listProp)) : rest) || []
+                    tableData = (listProp ? (XEUtils.isFunction(listProp) ? listProp({ data: rest, $table: $xeTable, $grid: $xeGrid as VxeGridConstructor, $gantt: null }) : XEUtils.get(rest, listProp)) : rest) || []
                   }
                 }
                 if ($xeTable as any) {
@@ -800,7 +801,16 @@ export default /* define-vxe-component start */ defineVxeComponent({
             const selectRecords = $xeTable.getCheckboxRecords()
             const removeRecords = selectRecords.filter((row) => !$xeTable.isInsertByRow(row))
             const body = { removeRecords }
-            const commitParams = { $grid: $xeGrid, code, button, body, form: formData, options: ajaxMethods }
+            const commitParams = {
+              $table: $xeTable,
+              $grid: $xeGrid as VxeGridConstructor,
+              $gantt: null,
+              code,
+              button,
+              body,
+              form: formData,
+              options: ajaxMethods
+            }
             const applyArgs = [commitParams].concat(args)
             if (selectRecords.length) {
               return $xeGrid.handleDeleteRow(code, 'vxe.grid.deleteSelectRecord', () => {
@@ -865,7 +875,16 @@ export default /* define-vxe-component start */ defineVxeComponent({
           if (ajaxMethods) {
             const body = $xeGrid.getRecordset()
             const { insertRecords, removeRecords, updateRecords, pendingRecords } = body
-            const commitParams = { $grid: $xeGrid, code, button, body, form: formData, options: ajaxMethods }
+            const commitParams = {
+              $table: $xeTable,
+              $grid: $xeGrid as VxeGridConstructor,
+              $gantt: null,
+              code,
+              button,
+              body,
+              form: formData,
+              options: ajaxMethods
+            }
             const applyArgs = [commitParams].concat(args)
             // 排除掉新增且标记为删除的数据
             if (insertRecords.length) {
@@ -940,8 +959,9 @@ export default /* define-vxe-component start */ defineVxeComponent({
         default: {
           const gCommandOpts = commands.get(code)
           if (gCommandOpts) {
-            if (gCommandOpts.commandMethod) {
-              gCommandOpts.commandMethod({ code, button, $grid: $xeGrid as unknown as VxeGridConstructor, $table: $xeTable }, ...args)
+            const tCommandMethod = gCommandOpts.tableCommandMethod || gCommandOpts.commandMethod
+            if (tCommandMethod) {
+              tCommandMethod({ code, button, $grid: $xeGrid as VxeGridConstructor, $table: $xeTable, $gantt: null }, ...args)
             } else {
               errLog('vxe.error.notCommands', [code])
             }
@@ -1431,7 +1451,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
           const beforeItem = proxyOpts.beforeItem
           if (proxyOpts && beforeItem) {
             formOpts.items.forEach((item: any) => {
-              beforeItem.call($xeGrid, { $grid: $xeGrid, item })
+              beforeItem.call($xeGrid, { $grid: $xeGrid, $gantt: null, item })
             })
           }
         }
@@ -1478,7 +1498,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
           key: 'form',
           ref: 'refFormWrapper',
           class: 'vxe-grid--form-wrapper'
-        }, formSlot ? formSlot.call($xeGrid, { $grid: $xeGrid }) : $xeGrid.renderDefaultForm(h))
+        }, formSlot ? formSlot.call($xeGrid, { $grid: $xeGrid, $gantt: null }) : $xeGrid.renderDefaultForm(h))
       }
       return renderEmptyElement($xeGrid)
     },
@@ -1498,7 +1518,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
           ref: 'refToolbarWrapper',
           class: 'vxe-grid--toolbar-wrapper'
         }, toolbarSlot
-          ? toolbarSlot.call($xeGrid, { $grid: $xeGrid })
+          ? toolbarSlot.call($xeGrid, { $grid: $xeGrid, $gantt: null })
           : [
               h(VxeToolbarComponent, {
                 props: Object.assign({}, toolbarOpts, { slots: undefined }),
@@ -1520,7 +1540,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
           key: 'top',
           ref: 'refTopWrapper',
           class: 'vxe-grid--top-wrapper'
-        }, topSlot.call($xeGrid, { $grid: $xeGrid }))
+        }, topSlot.call($xeGrid, { $grid: $xeGrid, $gantt: null }))
         : renderEmptyElement($xeGrid)
     },
     renderTableLeft (h: CreateElement) {
@@ -1531,7 +1551,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       if (leftSlot) {
         return h('div', {
           class: 'vxe-grid--left-wrapper'
-        }, leftSlot({ $grid: $xeGrid }))
+        }, leftSlot({ $grid: $xeGrid, $gantt: null }))
       }
       return renderEmptyElement($xeGrid)
     },
@@ -1543,7 +1563,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       if (rightSlot) {
         return h('div', {
           class: 'vxe-grid--right-wrapper'
-        }, rightSlot({ $grid: $xeGrid }))
+        }, rightSlot({ $grid: $xeGrid, $gantt: null }))
       }
       return renderEmptyElement($xeGrid)
     },
@@ -1570,13 +1590,12 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const slots = $xeGrid.$scopedSlots
 
       const bottomSlot = slots.bottom
-
       return bottomSlot
         ? h('div', {
           key: 'bottom',
           ref: 'refBottomWrapper',
           class: 'vxe-grid--bottom-wrapper'
-        }, bottomSlot.call($xeGrid, { $grid: $xeGrid }))
+        }, bottomSlot.call($xeGrid, { $grid: $xeGrid, $gantt: null }))
         : renderEmptyElement($xeGrid)
     },
     renderPager (h: CreateElement) {
@@ -1597,7 +1616,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
           key: 'pager',
           class: 'vxe-grid--pager-wrapper'
         }, pagerSlot
-          ? pagerSlot.call($xeGrid, { $grid: $xeGrid })
+          ? pagerSlot.call($xeGrid, { $grid: $xeGrid, $gantt: null })
           : [
               VxeUIPagerComponent
                 ? h(VxeUIPagerComponent, {

package/packages/table/module/export/mixin.ts

@@ -6,7 +6,7 @@ import { hasClass } from '../../../ui/src/dom'
 import { createHtmlPage, getExportBlobByContent } from './util'
 import { warnLog, errLog } from '../../../ui/src/log'
 
-import type { VxeTablePropTypes, VxeGridConstructor, VxeTableDefines, TableReactData, VxeTablePrivateMethods, TableInternalData, GridReactData, VxeColumnPropTypes, VxeTableConstructor } from '../../../../types'
+import type { VxeTablePropTypes, VxeTableDefines, TableReactData, VxeTablePrivateMethods, TableInternalData, GridReactData, VxeColumnPropTypes, VxeTableConstructor } from '../../../../types'
 
 const { getI18n, renderer } = VxeUI
 
@@ -1176,7 +1176,8 @@ export default {
       const props = $xeTable
       const reactData = $xeTable as unknown as TableReactData
       const internalData = $xeTable as unknown as TableInternalData
-      const $xeGrid = $xeTable.$xeGrid as VxeGridConstructor
+      const $xeGrid = $xeTable.$xeGrid
+      const $xeGantt = $xeTable.$xeGantt
 
       const { treeConfig, showHeader, showFooter } = props
       const { isGroup } = reactData
@@ -1382,6 +1383,7 @@ export default {
               const params = {
                 $table: $xeTable,
                 $grid: $xeGrid,
+                $gantt: $xeGantt,
                 sort: sortData.length ? sortData[0] : {} as any,
                 sorts: sortData as any[],
                 filters: gridReactData.filterData,
@@ -1391,7 +1393,7 @@ export default {
               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)
                   }

package/packages/table/src/methods.ts

@@ -8,7 +8,7 @@ import { getSlotVNs } from '../../ui/src/vn'
 import { moveRowAnimateToTb, clearRowAnimate, moveColAnimateToLr, clearColAnimate } from './anime'
 import { warnLog, errLog } from '../../ui/src/log'
 
-import type { VxeTableDefines, VxeColumnPropTypes, VxeTableEmits, ValueOf, TableReactData, VxeTableConstructor, VxeToolbarConstructor, TableInternalData, VxeGridConstructor, GridPrivateMethods, VxeTablePrivateMethods, VxeTooltipInstance, VxeTablePropTypes } from '../../../types'
+import type { VxeTableDefines, VxeColumnPropTypes, VxeTableEmits, ValueOf, TableReactData, VxeTableConstructor, VxeToolbarConstructor, VxeToolbarInstance, TableInternalData, VxeGridConstructor, GridPrivateMethods, VxeTablePrivateMethods, VxeTooltipInstance, VxeTablePropTypes } from '../../../types'
 
 const { getConfig, getI18n, renderer, formats, interceptor, createEvent } = VxeUI
 
@@ -971,14 +971,15 @@ function updateStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
   const internalData = $xeTable as unknown as TableInternalData
 
   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 = $xeTable.$refs.refElem as HTMLDivElement
-  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 = $xeTable.$refs.refEmptyPlaceholder as HTMLDivElement
   const mouseOpts = $xeTable.computeMouseOpts
@@ -986,39 +987,49 @@ function updateStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
   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 = $xeTable.computeScrollbarXToTop
+  const scrollbarYToLeft = $xeTable.computeScrollbarYToLeft
+
+  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 = $xeTable.$refs.computeScrollbarXToTop
-
   const xLeftCornerEl = $xeTable.$refs.refScrollXLeftCornerElem as HTMLDivElement
   const xRightCornerEl = $xeTable.$refs.refScrollXRightCornerElem as HTMLDivElement
   const scrollXVirtualEl = $xeTable.$refs.refScrollXVirtualElem as HTMLDivElement
   if (scrollXVirtualEl) {
     scrollXVirtualEl.style.height = `${osbHeight}px`
-    scrollXVirtualEl.style.visibility = overflowX ? 'visible' : 'hidden'
+    scrollXVirtualEl.style.visibility = xScrollbarVisible
   }
   const xWrapperEl = $xeTable.$refs.refScrollXWrapperElem as HTMLDivElement
   if (xWrapperEl) {
@@ -1037,32 +1048,34 @@ function updateStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
   const scrollYVirtualEl = $xeTable.$refs.refScrollYVirtualElem as HTMLDivElement
   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 = $xeTable.$refs.refScrollYTopCornerElem as HTMLDivElement
   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 = $xeTable.$refs.refScrollYWrapperElem as HTMLDivElement
   if (yWrapperEl) {
-    yWrapperEl.style.height = `${bodyHeight}px`
-    yWrapperEl.style.top = `${headerHeight}px`
+    yWrapperEl.style.height = `${tbHeight}px`
+    yWrapperEl.style.top = `${tHeaderHeight}px`
   }
   const yBottomCornerEl = $xeTable.$refs.refScrollYBottomCornerElem as HTMLDivElement
   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 = $xeTable.$refs.refRowExpandElem as HTMLDivElement
   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']
@@ -1128,7 +1141,7 @@ function updateStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
         }
 
         if (currScrollElem) {
-          currScrollElem.style.height = `${headerHeight}px`
+          currScrollElem.style.height = `${tHeaderHeight}px`
         }
 
         if (tableElem) {
@@ -1137,16 +1150,16 @@ function updateStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
       } 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`
         }
 
@@ -1229,11 +1242,11 @@ function updateStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
         }
 
         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`
             }
           }
         }
@@ -1249,6 +1262,9 @@ function updateStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
   if (mouseConfig && mouseOpts.selected && editStore.selected.row && editStore.selected.column) {
     $xeTable.addCellSelectedClass()
   }
+  if ($xeGanttView) {
+    $xeGanttView.handleUpdateStyle()
+  }
   return $xeTable.$nextTick()
 }
 
@@ -2762,13 +2778,13 @@ function calcScrollbar ($xeTable: VxeTableConstructor & VxeTablePrivateMethods)
     }
     reactData.overflowX = overflowX
 
-    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.parentHeight = Math.max(internalData.headerHeight + footerHeight + 20, $xeTable.getParentHeight())
+    reactData.tHeaderHeight = hHeight
+    reactData.tFooterHeight = fHeight
+    reactData.overflowX = overflowX
+    reactData.parentHeight = Math.max(hHeight + fHeight + 20, $xeTable.getParentHeight())
   }
   if (overflowX) {
     $xeTable.checkScrolling()
@@ -2828,6 +2844,7 @@ function handleLazyRecalculate ($xeTable: VxeTableConstructor & VxeTablePrivateM
 
   return new Promise<void>(resolve => {
     const { rceTimeout, rceRunTime } = internalData
+    const $xeGanttView = internalData.xeGanttView
     const resizeOpts = $xeTable.computeResizeOpts
     const refreshDelay = resizeOpts.refreshDelay || 20
     const el = $xeTable.$refs.refElem as HTMLElement
@@ -2851,6 +2868,9 @@ function handleLazyRecalculate ($xeTable: VxeTableConstructor & VxeTablePrivateM
         handleRecalculateStyle($xeTable, reFull, reWidth, reHeight)
       )
     }
+    if ($xeGanttView) {
+      $xeGanttView.handleLazyRecalculate()
+    }
     internalData.rceTimeout = setTimeout(() => {
       internalData.rceTimeout = undefined
       handleRecalculateStyle($xeTable, reFull, reWidth, reHeight)
@@ -3658,6 +3678,20 @@ const wheelScrollTopTo = (diffNum: number, cb: (progress: number) => void) => {
   requestAnimationFrame(step)
 }
 
+const syncGanttScrollTop = ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, scrollTop: number) => {
+  const internalData = $xeTable as unknown as TableInternalData
+
+  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
+    }
+  }
+}
+
 function updateHeight ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
   const reactData = $xeTable as unknown as TableReactData
   const internalData = $xeTable as unknown as TableInternalData
@@ -3988,6 +4022,7 @@ const Methods = {
 
     const { scrollYLoad } = reactData
     const { scrollYStore, fullDataRowIdData } = internalData
+    const $xeGanttView = internalData.xeGanttView
     let fullList: any[] = internalData.afterFullData
     // 是否进行数据处理
     if (force) {
@@ -4008,6 +4043,9 @@ const Methods = {
     })
     reactData.tableData = tableData
     internalData.visibleDataRowIdData = visibleDataRowIdMaps
+    if ($xeGanttView) {
+      $xeGanttView.updateViewData()
+    }
     return $xeTable.$nextTick()
   },
   /**
@@ -10289,6 +10327,7 @@ const Methods = {
       }
       setScrollTop(yHandleEl, scrollTop)
       setScrollTop(rowExpandEl, scrollTop)
+      syncGanttScrollTop($xeTable, scrollTop)
       if (scrollYLoad) {
         $xeTable.triggerScrollYEvent(evnt)
       }
@@ -10493,6 +10532,7 @@ const Methods = {
         setScrollTop(leftScrollElem, currTopNum)
         setScrollTop(rightScrollElem, currTopNum)
         setScrollTop(rowExpandEl, currTopNum)
+        syncGanttScrollTop($xeTable, currTopNum)
         if (scrollYLoad) {
           $xeTable.triggerScrollYEvent(evnt)
         }
@@ -10509,6 +10549,7 @@ const Methods = {
           setScrollTop(leftScrollElem, currTopNum)
           setScrollTop(rightScrollElem, currTopNum)
           setScrollTop(rowExpandEl, currTopNum)
+          syncGanttScrollTop($xeTable, currTopNum)
           if (scrollYLoad) {
             $xeTable.triggerScrollYEvent(evnt)
           }
@@ -10592,6 +10633,7 @@ const Methods = {
     setScrollTop(leftScrollElem, scrollTop)
     setScrollTop(rightScrollElem, scrollTop)
     setScrollTop(rowExpandEl, scrollTop)
+    syncGanttScrollTop($xeTable, scrollTop)
     if (scrollYLoad) {
       $xeTable.triggerScrollYEvent(evnt)
     }
@@ -10623,6 +10665,7 @@ const Methods = {
 
     const { scrollXLoad, overflowX, scrollXWidth } = reactData
     const { visibleColumn, scrollXStore, elemStore, fullColumnIdData } = internalData
+    const $xeGanttView = internalData.xeGanttView
     const mouseOpts = $xeTable.computeMouseOpts
     const tableBody = $xeTable.$refs.refTableBody
     const tableBodyElem = tableBody ? (tableBody as any).$el as HTMLDivElement : null
@@ -10690,10 +10733,13 @@ const Methods = {
         scrollXSpaceEl.style.width = `${ySpaceWidth}px`
       }
 
+      calcScrollbar($xeTable)
       if (isScrollXBig && mouseOpts.area) {
         errLog('vxe.error.notProp', ['mouse-config.area'])
       }
-      calcScrollbar($xeTable)
+      if ($xeGanttView) {
+        $xeGanttView.updateScrollXSpace()
+      }
       return $xeTable.$nextTick(() => {
         updateStyle($xeTable)
       })
@@ -10717,6 +10763,7 @@ const Methods = {
 
     const { isAllOverflow, scrollYLoad, expandColumn } = reactData
     const { scrollYStore, elemStore, isResizeCellHeight, afterFullData, fullAllDataRowIdData, rowExpandedMaps } = internalData
+    const $xeGanttView = internalData.xeGanttView
     const { startIndex } = scrollYStore
     const mouseOpts = $xeTable.computeMouseOpts
     const expandOpts = $xeTable.computeExpandOpts
@@ -10811,10 +10858,13 @@ const Methods = {
     reactData.scrollYHeight = scrollYHeight
     reactData.isScrollYBig = isScrollYBig
 
+    calcScrollbar($xeTable)
     if (isScrollYBig && mouseOpts.area) {
       errLog('vxe.error.notProp', ['mouse-config.area'])
     }
-    calcScrollbar($xeTable)
+    if ($xeGanttView) {
+      $xeGanttView.updateScrollYSpace()
+    }
     return $xeTable.$nextTick().then(() => {
       updateStyle($xeTable)
     })
@@ -11193,16 +11243,38 @@ const Methods = {
     this.isActivated = false
     return this.$nextTick()
   },
-  // 连接工具栏
-  connect ($toolbar: any) {
+  /**
+   * 已废弃，被 connectToolbar 替换
+   * @deprecated
+   */
+  connect ($toolbar: VxeToolbarConstructor | VxeToolbarInstance) {
+    return this.connectToolbar($toolbar)
+  },
+  /**
+   * 连接工具栏
+   * @param $toolbar
+   */
+  connectToolbar ($toolbar: VxeToolbarConstructor | VxeToolbarInstance) {
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+
     if ($toolbar && $toolbar.syncUpdate) {
-      $toolbar.syncUpdate({ collectColumn: this.collectColumn, $table: this })
+      $toolbar.syncUpdate({ collectColumn: this.collectColumn, $table: $xeTable })
       this.$toolbar = $toolbar
     } else {
       errLog('vxe.error.barUnableLink')
     }
     return this.$nextTick()
   },
+  handleConnectGanttView ($ganttView: any) {
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+    const internalData = $xeTable as unknown as TableInternalData
+
+    if ($ganttView && $ganttView.connectUpdate) {
+      $ganttView.connectUpdate({ $table: $xeTable })
+      internalData.xeGanttView = $ganttView
+    }
+    return $xeTable.$nextTick()
+  },
 
   /*************************
    * Publish methods