vxe-gantt 0.0.3 → 3.0.0-beta.1

package/packages/gantt/src/gantt-view.ts

@@ -1,13 +1,14 @@
-import { h, ref, reactive, nextTick, inject, watch, provide, onMounted, onUnmounted } from 'vue'
+import { VNode, CreateElement } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
+import { VxeUI } from '@vxe-ui/core'
 import { setScrollTop, setScrollLeft } from '../../ui/src/dom'
-import { VxeUI } from '../../ui'
 import { getRefElem } from './util'
 import XEUtils from 'xe-utils'
 import GanttViewHeaderComponent from './gantt-header'
 import GanttViewBodyComponent from './gantt-body'
 
-import type { VxeGanttViewConstructor, GanttViewReactData, GanttViewPrivateRef, VxeGanttPropTypes, VxeGanttDefines, VxeGanttViewPrivateMethods, GanttViewInternalData, VxeGanttViewMethods, GanttViewPrivateComputed, VxeGanttConstructor, VxeGanttPrivateMethods } from '../../../types'
+import type { TableReactData, TableInternalData, VxeTableConstructor, VxeTableMethods, VxeTablePrivateMethods } from 'vxe-table'
+import type { VxeGanttViewConstructor, GanttViewReactData, VxeGanttPropTypes, VxeGanttDefines, VxeGanttViewPrivateMethods, GanttViewInternalData, VxeGanttConstructor, VxeGanttPrivateMethods } from '../../../types'
 
 const { globalEvents } = VxeUI
 
@@ -43,33 +44,484 @@ function createInternalData (): GanttViewInternalData {
 const maxYHeight = 5e6
 const maxXWidth = 5e6
 
-export default defineVxeComponent({
-  name: 'VxeGanttView',
-  setup (props, context) {
-    const xID = XEUtils.uniqueId()
+function handleParseColumn ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPrivateMethods) {
+  const $xeGantt = $xeGanttView.$xeGantt
+  const reactData = $xeGanttView.reactData
+  const internalData = $xeGanttView.internalData
+
+  const { minViewDate, maxViewDate } = reactData
+  const taskViewOpts = $xeGantt.computeTaskViewOpts
+  const fullCols: VxeGanttPropTypes.Column[] = []
+  const groupCols: VxeGanttPropTypes.Column[][] = []
+  switch (taskViewOpts.mode) {
+    case 'year':
+      break
+    case 'quarter':
+      break
+    case 'month':
+      break
+    case 'week':
+      break
+    default: {
+      if (minViewDate && maxViewDate) {
+        const currTime = minViewDate.getTime()
+        const diffDayNum = maxViewDate.getTime() - minViewDate.getTime()
+        const countDayNum = Math.max(6, Math.floor(diffDayNum / 86400000) + 1)
+        const groupList: VxeGanttDefines.GroupHeaderColumn[] = []
+        const colList: VxeGanttPropTypes.Column[] = []
+        const groupMaps: Record<string, VxeGanttDefines.GroupHeaderColumn> = {}
+        for (let i = 0; i < countDayNum; i++) {
+          const itemDate = new Date(currTime + (i * 86400000))
+          const yyyyy = `${itemDate.getFullYear()}-${itemDate.getMonth() + 1}`
+          const mmDd = `${itemDate.getDate()}`
+          let groupCol = groupMaps[yyyyy]
+          const column = {
+            field: `${yyyyy}-${mmDd}`,
+            title: mmDd
+          }
+          if (groupCol) {
+            groupCol.children.push(column)
+            fullCols.push(groupCol)
+          } else {
+            groupCol = {
+              field: yyyyy,
+              title: yyyyy,
+              children: [column]
+            }
+            groupList.push(groupCol)
+            fullCols.push(groupCol)
+            groupMaps[yyyyy] = groupCol
+          }
+          colList.push(column)
+        }
+        groupCols.push(groupList, colList)
+
+        const $xeTable = internalData.xeTable
+        if ($xeTable) {
+          const startField = $xeGantt.computeStartField
+          const endField = $xeGantt.computeEndField
+          const tableInternalData = $xeTable as unknown as TableInternalData
+          const { afterFullData } = tableInternalData
+          const ctMaps: Record<string, VxeGanttDefines.RowCacheItem> = {}
+          afterFullData.forEach(row => {
+            const rowid = $xeTable.getRowid(row)
+            const startValue = XEUtils.get(row, startField)
+            const endValue = XEUtils.get(row, endField)
+            if (startValue && endValue) {
+              const startDate = XEUtils.toStringDate(startValue)
+              const endDate = XEUtils.toStringDate(endValue)
+              const oLeftSize = Math.floor((startDate.getTime() - minViewDate.getTime()) / 86400000)
+              const oWidthSize = Math.floor((endDate.getTime() - startDate.getTime()) / 86400000) + 1
+              ctMaps[rowid] = {
+                row,
+                rowid,
+                oLeftSize,
+                oWidthSize
+              }
+            }
+          })
+          internalData.chartMaps = ctMaps
+        }
+      }
+      break
+    }
+  }
+  reactData.tableColumn = fullCols
+  reactData.headerGroups = groupCols
+}
+
+function handleUpdateData ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPrivateMethods) {
+  const $xeGantt = $xeGanttView.$xeGantt
+  const reactData = $xeGanttView.reactData
+  const internalData = $xeGanttView.internalData
+
+  const $xeTable = internalData.xeTable
+  const sdMaps: Record<string, any> = {}
+  const edMaps: Record<string, any> = {}
+  let minDate: Date | null = null
+  let maxDate: Date | null = null
+  if ($xeTable) {
+    const startField = $xeGantt.computeStartField
+    const endField = $xeGantt.computeEndField
+    const tableInternalData = $xeTable as unknown as TableInternalData
+    const { afterFullData } = tableInternalData
+    afterFullData.forEach(row => {
+      const startValue = XEUtils.get(row, startField)
+      const endValue = XEUtils.get(row, endField)
+      if (startValue && endValue) {
+        const startDate = XEUtils.toStringDate(startValue)
+        if (!minDate || minDate.getTime() > startDate.getTime()) {
+          minDate = startDate
+        }
+        const endDate = XEUtils.toStringDate(endValue)
+        if (!maxDate || maxDate.getTime() < endDate.getTime()) {
+          maxDate = endDate
+        }
+      }
+    })
+  }
+  reactData.minViewDate = minDate
+  reactData.maxViewDate = maxDate
+  internalData.startMaps = sdMaps
+  internalData.endMaps = edMaps
+  handleParseColumn($xeGanttView)
+}
+
+function calcScrollbar ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPrivateMethods) {
+  const $xeGantt = $xeGanttView.$xeGantt
+  const reactData = $xeGanttView.reactData
+  const internalData = $xeGanttView.internalData
+
+  const { scrollXWidth, scrollYHeight } = reactData
+  const { elemStore } = internalData
+  const scrollbarOpts = $xeGantt.computeScrollbarOpts
+  const bodyWrapperElem = getRefElem(elemStore['main-body-wrapper'])
+  const xHandleEl = $xeGanttView.$refs.refScrollXHandleElem as HTMLDivElement
+  const yHandleEl = $xeGanttView.$refs.refScrollYHandleElem as HTMLDivElement
+  let overflowY = false
+  let overflowX = false
+  if (bodyWrapperElem) {
+    overflowY = scrollYHeight > bodyWrapperElem.clientHeight
+    if (yHandleEl) {
+      reactData.scrollbarWidth = scrollbarOpts.width || (yHandleEl.offsetWidth - yHandleEl.clientWidth) || 14
+    }
+    reactData.overflowY = overflowY
+
+    overflowX = scrollXWidth > bodyWrapperElem.clientWidth
+    if (xHandleEl) {
+      reactData.scrollbarHeight = scrollbarOpts.height || (xHandleEl.offsetHeight - xHandleEl.clientHeight) || 14
+    }
+
+    reactData.overflowX = overflowX
+  }
+}
+
+function updateChart ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPrivateMethods) {
+  const reactData = $xeGanttView.reactData
+  const internalData = $xeGanttView.internalData
+
+  const { viewCellWidth } = reactData
+  const { elemStore, chartMaps } = internalData
+  const chartWrapper = getRefElem(elemStore['main-chart-wrapper'])
+  if (chartWrapper) {
+    XEUtils.arrayEach(chartWrapper.children, (rowEl) => {
+      const barEl = rowEl.children[0] as HTMLDivElement
+      if (!barEl) {
+        return
+      }
+      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`
+      }
+    })
+  }
+  return $xeGanttView.$nextTick()
+}
+
+function updateStyle ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPrivateMethods) {
+  const $xeGantt = $xeGanttView.$xeGantt
+  const reactData = $xeGanttView.reactData
+  const internalData = $xeGanttView.internalData
+
+  const { scrollbarWidth, scrollbarHeight, tableColumn } = reactData
+  const { elemStore } = internalData
+  const $xeTable = internalData.xeTable
+
+  const el = $xeGanttView.$refs.refElem as HTMLDivElement
+  if (!el || !el.clientHeight) {
+    return
+  }
+
+  const scrollbarXToTop = $xeGantt.computeScrollbarXToTop
+
+  const xLeftCornerEl = $xeGanttView.$refs.refScrollXLeftCornerElem as HTMLDivElement
+  const xRightCornerEl = $xeGanttView.$refs.refScrollXRightCornerElem as HTMLDivElement
+  const scrollXVirtualEl = $xeGanttView.$refs.refScrollXVirtualElem as HTMLDivElement
+
+  const osbWidth = scrollbarWidth
+  const osbHeight = scrollbarHeight
+
+  let tbHeight = 0
+  let tHeaderHeight = 0
+  let tFooterHeight = 0
+  if ($xeTable) {
+    const tableInternalData = $xeTable as unknown as TableInternalData
+    tbHeight = tableInternalData.tBodyHeight
+    tHeaderHeight = tableInternalData.tHeaderHeight
+    tFooterHeight = tableInternalData.tFooterHeight
+  }
+
+  const headerScrollElem = getRefElem(elemStore['main-header-scroll'])
+  if (headerScrollElem) {
+    headerScrollElem.style.height = `${tHeaderHeight}px`
+  }
+  const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
+  if (bodyScrollElem) {
+    bodyScrollElem.style.height = `${tbHeight}px`
+  }
+
+  if (scrollXVirtualEl) {
+    scrollXVirtualEl.style.height = `${osbHeight}px`
+    scrollXVirtualEl.style.visibility = 'visible'
+  }
+  const xWrapperEl = $xeGanttView.$refs.refScrollXWrapperElem as HTMLDivElement
+  if (xWrapperEl) {
+    xWrapperEl.style.left = scrollbarXToTop ? `${osbWidth}px` : ''
+    xWrapperEl.style.width = `${el.clientWidth - osbWidth}px`
+  }
+  if (xLeftCornerEl) {
+    xLeftCornerEl.style.width = scrollbarXToTop ? `${osbWidth}px` : ''
+    xLeftCornerEl.style.display = scrollbarXToTop ? (osbHeight ? 'block' : '') : ''
+  }
+  if (xRightCornerEl) {
+    xRightCornerEl.style.width = scrollbarXToTop ? '' : `${osbWidth}px`
+    xRightCornerEl.style.display = scrollbarXToTop ? '' : (osbHeight ? 'block' : '')
+  }
+
+  const scrollYVirtualEl = $xeGanttView.$refs.refScrollYVirtualElem as HTMLDivElement
+  if (scrollYVirtualEl) {
+    scrollYVirtualEl.style.width = `${osbWidth}px`
+    scrollYVirtualEl.style.height = `${tbHeight + tHeaderHeight + tFooterHeight}px`
+    scrollYVirtualEl.style.visibility = 'visible'
+  }
+  const yTopCornerEl = $xeGanttView.$refs.refScrollYTopCornerElem as HTMLDivElement
+  if (yTopCornerEl) {
+    yTopCornerEl.style.height = `${tHeaderHeight}px`
+    yTopCornerEl.style.display = tHeaderHeight ? 'block' : ''
+  }
+  const yWrapperEl = $xeGanttView.$refs.refScrollYWrapperElem as HTMLDivElement
+  if (yWrapperEl) {
+    yWrapperEl.style.height = `${tbHeight}px`
+    yWrapperEl.style.top = `${tHeaderHeight}px`
+  }
+  const yBottomCornerEl = $xeGanttView.$refs.refScrollYBottomCornerElem as HTMLDivElement
+  if (yBottomCornerEl) {
+    yBottomCornerEl.style.height = `${tFooterHeight}px`
+    yBottomCornerEl.style.top = `${tHeaderHeight + tbHeight}px`
+    yBottomCornerEl.style.display = tFooterHeight ? 'block' : ''
+  }
+
+  const colInfoElem = $xeGanttView.$refs.refColInfoElem as HTMLDivElement
+  if (colInfoElem) {
+    reactData.viewCellWidth = colInfoElem.clientWidth || 40
+  }
+  let viewTableWidth = reactData.viewCellWidth * tableColumn.length
+  if (bodyScrollElem) {
+    const viewWidth = bodyScrollElem.clientWidth
+    const remainWidth = viewWidth - viewTableWidth
+    if (remainWidth > 0) {
+      reactData.viewCellWidth += Math.floor(remainWidth / tableColumn.length)
+      viewTableWidth = viewWidth
+    }
+  }
+  const headerTableElem = getRefElem(elemStore['main-header-table'])
+  const bodyTableElem = getRefElem(elemStore['main-body-table'])
+  if (headerTableElem) {
+    headerTableElem.style.width = `${viewTableWidth}px`
+  }
+  if (bodyTableElem) {
+    bodyTableElem.style.width = `${viewTableWidth}px`
+  }
+
+  reactData.scrollXWidth = viewTableWidth
+
+  return updateChart($xeGanttView)
+}
+
+function handleLazyRecalculate ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPrivateMethods) {
+  calcScrollbar($xeGanttView)
+  updateStyle($xeGanttView)
+  return $xeGanttView.$nextTick()
+}
+
+function updateScrollXSpace ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPrivateMethods) {
+  const reactData = $xeGanttView.reactData
+  const internalData = $xeGanttView.internalData
+
+  const { scrollXLoad, scrollXWidth } = reactData
+  const { elemStore } = internalData
+  const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
+  const bodyTableElem = getRefElem(elemStore['main-body-table'])
+
+  let xSpaceLeft = 0
+
+  let clientWidth = 0
+  if (bodyScrollElem) {
+    clientWidth = bodyScrollElem.clientWidth
+  }
+  // 虚拟渲染
+  let isScrollXBig = false
+  let ySpaceWidth = scrollXWidth
+  if (scrollXWidth > maxXWidth) {
+    // 触右
+    if (bodyScrollElem && bodyTableElem && bodyScrollElem.scrollLeft + clientWidth >= maxXWidth) {
+      xSpaceLeft = maxXWidth - bodyTableElem.clientWidth
+    } else {
+      xSpaceLeft = (maxXWidth - clientWidth) * (xSpaceLeft / (scrollXWidth - clientWidth))
+    }
+    ySpaceWidth = maxXWidth
+    isScrollXBig = true
+  }
 
-    const $xeGantt = inject('$xeGantt', {} as (VxeGanttConstructor & VxeGanttPrivateMethods))
+  if (bodyTableElem) {
+    bodyTableElem.style.transform = `translate(${xSpaceLeft}px, ${reactData.scrollYTop || 0}px)`
+  }
 
-    const { computeTaskViewOpts, computeStartField, computeEndField, computeScrollbarOpts, computeScrollbarXToTop, computeScrollbarYToLeft } = $xeGantt.getComputeMaps()
+  const layoutList = ['header', 'body', 'footer']
+  layoutList.forEach(layout => {
+    const xSpaceElem = getRefElem(elemStore[`main-${layout}-xSpace`])
+    if (xSpaceElem) {
+      xSpaceElem.style.width = scrollXLoad ? `${ySpaceWidth}px` : ''
+    }
+  })
 
-    const refElem = ref<HTMLDivElement>()
+  reactData.scrollXLeft = xSpaceLeft
+  reactData.scrollXWidth = ySpaceWidth
+  reactData.isScrollXBig = isScrollXBig
+
+  const scrollXSpaceEl = $xeGanttView.$refs.refScrollXSpaceElem as HTMLDivElement
+  if (scrollXSpaceEl) {
+    scrollXSpaceEl.style.width = `${ySpaceWidth}px`
+  }
+
+  calcScrollbar($xeGanttView)
+  return $xeGanttView.$nextTick().then(() => {
+    updateStyle($xeGanttView)
+  })
+}
+
+function updateScrollYSpace ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPrivateMethods) {
+  const reactData = $xeGanttView.reactData
+  const internalData = $xeGanttView.internalData
+
+  const { scrollYLoad, overflowY } = reactData
+  const { elemStore } = internalData
+  const $xeTable = internalData.xeTable
+  const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
+  const bodyTableElem = getRefElem(elemStore['main-body-table'])
+
+  let ySpaceTop = 0
+  let scrollYHeight = 0
+  let isScrollYBig = false
+  if ($xeTable) {
+    const tableReactData = $xeTable as unknown as TableReactData
+    ySpaceTop = tableReactData.scrollYTop
+    scrollYHeight = tableReactData.scrollYHeight
+    isScrollYBig = tableReactData.isScrollYBig
+  }
 
-    const refScrollXVirtualElem = ref<HTMLDivElement>()
-    const refScrollYVirtualElem = ref<HTMLDivElement>()
-    const refScrollXHandleElem = ref<HTMLDivElement>()
-    const refScrollXLeftCornerElem = ref<HTMLDivElement>()
-    const refScrollXRightCornerElem = ref<HTMLDivElement>()
-    const refScrollYHandleElem = ref<HTMLDivElement>()
-    const refScrollYTopCornerElem = ref<HTMLDivElement>()
-    const refScrollXWrapperElem = ref<HTMLDivElement>()
-    const refScrollYWrapperElem = ref<HTMLDivElement>()
-    const refScrollYBottomCornerElem = ref<HTMLDivElement>()
-    const refScrollXSpaceElem = ref<HTMLDivElement>()
-    const refScrollYSpaceElem = ref<HTMLDivElement>()
+  let ySpaceHeight = scrollYHeight
+  let scrollYTop = ySpaceTop
 
-    const refColInfoElem = ref<HTMLDivElement>()
+  let clientHeight = 0
+  if (bodyScrollElem) {
+    clientHeight = bodyScrollElem.clientHeight
+  }
+  if (isScrollYBig) {
+    // 触底
+    if (bodyScrollElem && bodyTableElem && bodyScrollElem.scrollTop + clientHeight >= maxYHeight) {
+      scrollYTop = maxYHeight - bodyTableElem.clientHeight
+    } else {
+      scrollYTop = (maxYHeight - clientHeight) * (ySpaceTop / (scrollYHeight - clientHeight))
+    }
+    ySpaceHeight = maxYHeight
+  }
+  if (!(scrollYLoad && overflowY)) {
+    scrollYTop = 0
+  }
+
+  if (bodyTableElem) {
+    bodyTableElem.style.transform = `translate(${reactData.scrollXLeft || 0}px, ${scrollYTop}px)`
+  }
+
+  const layoutList = ['header', 'body', 'footer']
+  layoutList.forEach(layout => {
+    const ySpaceElem = getRefElem(elemStore[`main-${layout}-ySpace`])
+    if (ySpaceElem) {
+      ySpaceElem.style.height = ySpaceHeight ? `${ySpaceHeight}px` : ''
+    }
+  })
+
+  const scrollYSpaceEl = $xeGanttView.$refs.refScrollYSpaceElem as HTMLDivElement
+  if (scrollYSpaceEl) {
+    scrollYSpaceEl.style.height = ySpaceHeight ? `${ySpaceHeight}px` : ''
+  }
+  reactData.scrollYTop = scrollYTop
+  reactData.scrollYHeight = scrollYHeight
+  reactData.isScrollYBig = isScrollYBig
+
+  calcScrollbar($xeGanttView)
+  return $xeGanttView.$nextTick().then(() => {
+    updateStyle($xeGanttView)
+  })
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function checkLastSyncScroll ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPrivateMethods, isRollX: boolean, isRollY: boolean) {
+  const reactData = $xeGanttView.reactData
+  const internalData = $xeGanttView.internalData
+
+  const { lcsTimeout } = internalData
+  reactData.lazScrollLoading = true
+  if (lcsTimeout) {
+    clearTimeout(lcsTimeout)
+  }
+  internalData.lcsTimeout = setTimeout(() => {
+    internalData.lcsRunTime = Date.now()
+    internalData.lcsTimeout = undefined
+    internalData.intoRunScroll = false
+    internalData.inVirtualScroll = false
+    internalData.inWheelScroll = false
+    internalData.inHeaderScroll = false
+    internalData.inBodyScroll = false
+    internalData.inFooterScroll = false
+    reactData.lazScrollLoading = false
+  }, 200)
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function handleScrollEvent ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPrivateMethods, evnt: Event, isRollY: boolean, isRollX: boolean, scrollTop: number, scrollLeft: number) {
+  checkLastSyncScroll($xeGanttView, isRollX, isRollY)
+}
 
-    const reactData = reactive<GanttViewReactData>({
+/**
+ * 同步表格滚动
+ */
+function syncTableScrollTop ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPrivateMethods, scrollTop: number) {
+  const internalData = $xeGanttView.internalData
+
+  const $xeTable = internalData.xeTable
+  if ($xeTable) {
+    const tableInternalData = $xeTable as unknown as TableInternalData
+    const { elemStore: tableElemStore } = tableInternalData
+    const tableBodyScrollElem = getRefElem(tableElemStore['main-body-scroll'])
+    if (tableBodyScrollElem) {
+      tableBodyScrollElem.scrollTop = scrollTop
+    }
+  }
+}
+
+export default defineVxeComponent({
+  name: 'VxeGanttView',
+  inject: {
+    $xeGantt: {
+      default: null
+    }
+  },
+  provide () {
+    const $xeGanttView = this
+
+    return {
+      $xeGanttView
+    }
+  },
+  props: {},
+  data () {
+    const xID = XEUtils.uniqueId()
+
+    const reactData: GanttViewReactData = {
       // 是否启用了横向 X 可视渲染方式加载
       scrollXLoad: false,
       // 是否启用了纵向 Y 可视渲染方式加载
@@ -108,677 +560,300 @@ export default defineVxeComponent({
         small: 40,
         mini: 36
       }
-    })
-
-    const internalData = createInternalData()
-
-    const refMaps: GanttViewPrivateRef = {
-      refElem
     }
 
-    const computeMaps: GanttViewPrivateComputed = {
-    }
+    const internalData = createInternalData()
 
-    const $xeGanttView = {
+    return {
       xID,
-      props,
-      context,
       reactData,
-      internalData,
-
-      getRefMaps: () => refMaps,
-      getComputeMaps: () => computeMaps
-    } as unknown as VxeGanttViewConstructor & VxeGanttViewPrivateMethods
-
-    const handleParseColumn = () => {
-      const { minViewDate, maxViewDate } = reactData
-      const taskViewOpts = computeTaskViewOpts.value
-      const fullCols: VxeGanttPropTypes.Column[] = []
-      const groupCols: VxeGanttPropTypes.Column[][] = []
-      switch (taskViewOpts.mode) {
-        case 'year':
-          break
-        case 'quarter':
-          break
-        case 'month':
-          break
-        case 'week':
-          break
-        default: {
-          if (minViewDate && maxViewDate) {
-            const currTime = minViewDate.getTime()
-            const diffDayNum = maxViewDate.getTime() - minViewDate.getTime()
-            const countDayNum = Math.max(6, Math.floor(diffDayNum / 86400000) + 1)
-            const groupList: VxeGanttDefines.GroupHeaderColumn[] = []
-            const colList: VxeGanttPropTypes.Column[] = []
-            const groupMaps: Record<string, VxeGanttDefines.GroupHeaderColumn> = {}
-            for (let i = 0; i < countDayNum; i++) {
-              const itemDate = new Date(currTime + (i * 86400000))
-              const yyyyy = `${itemDate.getFullYear()}-${itemDate.getMonth() + 1}`
-              const mmDd = `${itemDate.getDate()}`
-              let groupCol = groupMaps[yyyyy]
-              const column = {
-                field: `${yyyyy}-${mmDd}`,
-                title: mmDd
-              }
-              if (groupCol) {
-                groupCol.children.push(column)
-                fullCols.push(groupCol)
-              } else {
-                groupCol = {
-                  field: yyyyy,
-                  title: yyyyy,
-                  children: [column]
-                }
-                groupList.push(groupCol)
-                fullCols.push(groupCol)
-                groupMaps[yyyyy] = groupCol
-              }
-              colList.push(column)
-            }
-            groupCols.push(groupList, colList)
-
-            const $xeTable = internalData.xeTable
-            if ($xeTable) {
-              const startField = computeStartField.value
-              const endField = computeEndField.value
-              const tableInternalData = $xeTable.internalData
-              const { afterFullData } = tableInternalData
-              const ctMaps: Record<string, VxeGanttDefines.RowCacheItem> = {}
-              afterFullData.forEach(row => {
-                const rowid = $xeTable.getRowid(row)
-                const startValue = XEUtils.get(row, startField)
-                const endValue = XEUtils.get(row, endField)
-                if (startValue && endValue) {
-                  const startDate = XEUtils.toStringDate(startValue)
-                  const endDate = XEUtils.toStringDate(endValue)
-                  const oLeftSize = Math.floor((startDate.getTime() - minViewDate.getTime()) / 86400000)
-                  const oWidthSize = Math.floor((endDate.getTime() - startDate.getTime()) / 86400000) + 1
-                  ctMaps[rowid] = {
-                    row,
-                    rowid,
-                    oLeftSize,
-                    oWidthSize
-                  }
-                }
-              })
-              internalData.chartMaps = ctMaps
-            }
-          }
-          break
-        }
-      }
-      reactData.tableColumn = fullCols
-      reactData.headerGroups = groupCols
+      internalData
     }
+  },
+  computed: {
+    ...({} as {
+      $xeGantt(): (VxeGanttConstructor & VxeGanttPrivateMethods)
+    })
+  },
+  methods: {
+    //
+    // Method
+    //
+    refreshData (): Promise<void> {
+      const $xeGanttView = this
+
+      handleUpdateData($xeGanttView)
+      return handleLazyRecalculate($xeGanttView)
+    },
+    updateViewData (): Promise<void> {
+      const $xeGanttView = this
+      const reactData = $xeGanttView.reactData
+      const internalData = $xeGanttView.internalData
 
-    const handleUpdateData = () => {
       const $xeTable = internalData.xeTable
-      const sdMaps: Record<string, any> = {}
-      const edMaps: Record<string, any> = {}
-      let minDate: Date | null = null
-      let maxDate: Date | null = null
       if ($xeTable) {
-        const startField = computeStartField.value
-        const endField = computeEndField.value
-        const tableInternalData = $xeTable.internalData
-        const { afterFullData } = tableInternalData
-        afterFullData.forEach(row => {
-          const startValue = XEUtils.get(row, startField)
-          const endValue = XEUtils.get(row, endField)
-          if (startValue && endValue) {
-            const startDate = XEUtils.toStringDate(startValue)
-            if (!minDate || minDate.getTime() > startDate.getTime()) {
-              minDate = startDate
-            }
-            const endDate = XEUtils.toStringDate(endValue)
-            if (!maxDate || maxDate.getTime() < endDate.getTime()) {
-              maxDate = endDate
-            }
-          }
-        })
+        const tableReactData = $xeTable as unknown as TableReactData
+        const { tableData } = tableReactData
+        reactData.tableData = tableData
       }
-      reactData.minViewDate = minDate
-      reactData.maxViewDate = maxDate
-      internalData.startMaps = sdMaps
-      internalData.endMaps = edMaps
-      handleParseColumn()
-    }
-
-    const calcScrollbar = () => {
-      const { scrollXWidth, scrollYHeight } = reactData
-      const { elemStore } = internalData
-      const scrollbarOpts = computeScrollbarOpts.value
-      const bodyWrapperElem = getRefElem(elemStore['main-body-wrapper'])
-      const xHandleEl = refScrollXHandleElem.value
-      const yHandleEl = refScrollYHandleElem.value
-      let overflowY = false
-      let overflowX = false
-      if (bodyWrapperElem) {
-        overflowY = scrollYHeight > bodyWrapperElem.clientHeight
-        if (yHandleEl) {
-          reactData.scrollbarWidth = scrollbarOpts.width || (yHandleEl.offsetWidth - yHandleEl.clientWidth) || 14
-        }
-        reactData.overflowY = overflowY
-
-        overflowX = scrollXWidth > bodyWrapperElem.clientWidth
-        if (xHandleEl) {
-          reactData.scrollbarHeight = scrollbarOpts.height || (xHandleEl.offsetHeight - xHandleEl.clientHeight) || 14
-        }
-
-        reactData.overflowX = overflowX
-      }
-    }
-
-    const updateChart = () => {
-      const { viewCellWidth } = reactData
-      const { elemStore, chartMaps } = internalData
-      const chartWrapper = getRefElem(elemStore['main-chart-wrapper'])
-      if (chartWrapper) {
-        XEUtils.arrayEach(chartWrapper.children, (rowEl) => {
-          const barEl = rowEl.children[0] as HTMLDivElement
-          if (!barEl) {
-            return
-          }
-          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`
-          }
-        })
-      }
-      return nextTick()
-    }
+      return $xeGanttView.$nextTick()
+    },
+    connectUpdate ({ $table }: {
+      $table: VxeTableConstructor & VxeTableMethods & VxeTablePrivateMethods
+    }) {
+      const $xeGanttView = this
+      const internalData = $xeGanttView.internalData
 
-    const updateStyle = () => {
-      const { scrollbarWidth, scrollbarHeight, tableColumn } = reactData
-      const { elemStore } = internalData
-      const $xeTable = internalData.xeTable
-      const el = refElem.value
-      if (!el || !el.clientHeight) {
-        return
+      if ($table) {
+        internalData.xeTable = $table
       }
+      return $xeGanttView.$nextTick()
+    },
+    handleUpdateStyle () {
+      const $xeGanttView = this
 
-      const scrollbarXToTop = computeScrollbarXToTop.value
-
-      const xLeftCornerEl = refScrollXLeftCornerElem.value
-      const xRightCornerEl = refScrollXRightCornerElem.value
-      const scrollXVirtualEl = refScrollXVirtualElem.value
+      return updateStyle($xeGanttView)
+    },
+    handleLazyRecalculate () {
+      const $xeGanttView = this
 
-      const osbWidth = scrollbarWidth
-      const osbHeight = scrollbarHeight
+      return handleLazyRecalculate($xeGanttView)
+    },
+    triggerHeaderScrollEvent (evnt: Event) {
+      const $xeGanttView = this
+      const internalData = $xeGanttView.internalData
 
-      let tbHeight = 0
-      let tHeaderHeight = 0
-      let tFooterHeight = 0
-      if ($xeTable) {
-        const tableInternalData = $xeTable.internalData
-        tbHeight = tableInternalData.tBodyHeight
-        tHeaderHeight = tableInternalData.tHeaderHeight
-        tFooterHeight = tableInternalData.tFooterHeight
+      const { elemStore, inVirtualScroll, inBodyScroll, inFooterScroll } = internalData
+      if (inVirtualScroll) {
+        return
       }
-
-      const headerScrollElem = getRefElem(elemStore['main-header-scroll'])
-      if (headerScrollElem) {
-        headerScrollElem.style.height = `${tHeaderHeight}px`
+      if (inBodyScroll || inFooterScroll) {
+        return
       }
+      const wrapperEl = evnt.currentTarget as HTMLDivElement
       const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
-      if (bodyScrollElem) {
-        bodyScrollElem.style.height = `${tbHeight}px`
+      const xHandleEl = $xeGanttView.$refs.refScrollXHandleElem as HTMLDivElement
+      if (bodyScrollElem && wrapperEl) {
+        const isRollX = true
+        const isRollY = false
+        const currLeftNum = wrapperEl.scrollLeft
+        internalData.inHeaderScroll = true
+        setScrollLeft(xHandleEl, currLeftNum)
+        setScrollLeft(bodyScrollElem, currLeftNum)
+        handleScrollEvent($xeGanttView, evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum)
       }
+    },
+    triggerBodyScrollEvent (evnt: Event) {
+      const $xeGanttView = this
+      const internalData = $xeGanttView.internalData
 
-      if (scrollXVirtualEl) {
-        scrollXVirtualEl.style.height = `${osbHeight}px`
-        scrollXVirtualEl.style.visibility = 'visible'
-      }
-      const xWrapperEl = refScrollXWrapperElem.value
-      if (xWrapperEl) {
-        xWrapperEl.style.left = scrollbarXToTop ? `${osbWidth}px` : ''
-        xWrapperEl.style.width = `${el.clientWidth - osbWidth}px`
+      const { elemStore, inVirtualScroll, inHeaderScroll, inFooterScroll } = internalData
+      if (inVirtualScroll) {
+        return
       }
-      if (xLeftCornerEl) {
-        xLeftCornerEl.style.width = scrollbarXToTop ? `${osbWidth}px` : ''
-        xLeftCornerEl.style.display = scrollbarXToTop ? (osbHeight ? 'block' : '') : ''
+      if (inHeaderScroll || inFooterScroll) {
+        return
       }
-      if (xRightCornerEl) {
-        xRightCornerEl.style.width = scrollbarXToTop ? '' : `${osbWidth}px`
-        xRightCornerEl.style.display = scrollbarXToTop ? '' : (osbHeight ? 'block' : '')
+      const wrapperEl = evnt.currentTarget as HTMLDivElement
+      const headerScrollElem = getRefElem(elemStore['main-header-scroll'])
+      const xHandleEl = $xeGanttView.$refs.refScrollXHandleElem as HTMLDivElement
+      const yHandleEl = $xeGanttView.$refs.refScrollYHandleElem as HTMLDivElement
+      if (headerScrollElem && wrapperEl) {
+        const isRollX = true
+        const isRollY = true
+        const currLeftNum = wrapperEl.scrollLeft
+        const currTopNum = wrapperEl.scrollTop
+        internalData.inBodyScroll = true
+        setScrollLeft(xHandleEl, currLeftNum)
+        setScrollLeft(headerScrollElem, currLeftNum)
+        setScrollTop(yHandleEl, currTopNum)
+        syncTableScrollTop($xeGanttView, currTopNum)
+        handleScrollEvent($xeGanttView, evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum)
       }
+    },
+    triggerFooterScrollEvent (evnt: Event) {
+      const $xeGanttView = this
+      const internalData = $xeGanttView.internalData
 
-      const scrollYVirtualEl = refScrollYVirtualElem.value
-      if (scrollYVirtualEl) {
-        scrollYVirtualEl.style.width = `${osbWidth}px`
-        scrollYVirtualEl.style.height = `${tbHeight + tHeaderHeight + tFooterHeight}px`
-        scrollYVirtualEl.style.visibility = 'visible'
-      }
-      const yTopCornerEl = refScrollYTopCornerElem.value
-      if (yTopCornerEl) {
-        yTopCornerEl.style.height = `${tHeaderHeight}px`
-        yTopCornerEl.style.display = tHeaderHeight ? 'block' : ''
+      const { inVirtualScroll, inHeaderScroll, inBodyScroll } = internalData
+      if (inVirtualScroll) {
+        return
       }
-      const yWrapperEl = refScrollYWrapperElem.value
-      if (yWrapperEl) {
-        yWrapperEl.style.height = `${tbHeight}px`
-        yWrapperEl.style.top = `${tHeaderHeight}px`
+      if (inHeaderScroll || inBodyScroll) {
+        return
       }
-      const yBottomCornerEl = refScrollYBottomCornerElem.value
-      if (yBottomCornerEl) {
-        yBottomCornerEl.style.height = `${tFooterHeight}px`
-        yBottomCornerEl.style.top = `${tHeaderHeight + tbHeight}px`
-        yBottomCornerEl.style.display = tFooterHeight ? 'block' : ''
+      const wrapperEl = evnt.currentTarget as HTMLDivElement
+      if (wrapperEl) {
+        const isRollX = true
+        const isRollY = false
+        const currLeftNum = wrapperEl.scrollLeft
+        handleScrollEvent($xeGanttView, evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum)
       }
+    },
+    triggerVirtualScrollXEvent (evnt: Event) {
+      const $xeGanttView = this
+      const internalData = $xeGanttView.internalData
 
-      const colInfoElem = refColInfoElem.value
-      if (colInfoElem) {
-        reactData.viewCellWidth = colInfoElem.clientWidth || 40
-      }
-      let viewTableWidth = reactData.viewCellWidth * tableColumn.length
-      if (bodyScrollElem) {
-        const viewWidth = bodyScrollElem.clientWidth
-        const remainWidth = viewWidth - viewTableWidth
-        if (remainWidth > 0) {
-          reactData.viewCellWidth += Math.floor(remainWidth / tableColumn.length)
-          viewTableWidth = viewWidth
-        }
-      }
-      const headerTableElem = getRefElem(elemStore['main-header-table'])
-      const bodyTableElem = getRefElem(elemStore['main-body-table'])
-      if (headerTableElem) {
-        headerTableElem.style.width = `${viewTableWidth}px`
-      }
-      if (bodyTableElem) {
-        bodyTableElem.style.width = `${viewTableWidth}px`
+      const { elemStore, inHeaderScroll, inBodyScroll } = internalData
+      if (inHeaderScroll || inBodyScroll) {
+        return
       }
-
-      reactData.scrollXWidth = viewTableWidth
-
-      return updateChart()
-    }
-
-    const handleLazyRecalculate = () => {
-      calcScrollbar()
-      updateStyle()
-      return nextTick()
-    }
-
-    const updateScrollXSpace = () => {
-      const { scrollXLoad, scrollXWidth } = reactData
-      const { elemStore } = internalData
+      const wrapperEl = evnt.currentTarget as HTMLDivElement
+      const headerScrollElem = getRefElem(elemStore['main-header-scroll'])
       const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
-      const bodyTableElem = getRefElem(elemStore['main-body-table'])
-
-      let xSpaceLeft = 0
-
-      let clientWidth = 0
-      if (bodyScrollElem) {
-        clientWidth = bodyScrollElem.clientWidth
-      }
-      // 虚拟渲染
-      let isScrollXBig = false
-      let ySpaceWidth = scrollXWidth
-      if (scrollXWidth > maxXWidth) {
-        // 触右
-        if (bodyScrollElem && bodyTableElem && bodyScrollElem.scrollLeft + clientWidth >= maxXWidth) {
-          xSpaceLeft = maxXWidth - bodyTableElem.clientWidth
-        } else {
-          xSpaceLeft = (maxXWidth - clientWidth) * (xSpaceLeft / (scrollXWidth - clientWidth))
-        }
-        ySpaceWidth = maxXWidth
-        isScrollXBig = true
+      if (wrapperEl) {
+        const isRollY = false
+        const isRollX = true
+        const currLeftNum = wrapperEl.scrollLeft
+        internalData.inVirtualScroll = true
+        setScrollLeft(headerScrollElem, currLeftNum)
+        setScrollLeft(bodyScrollElem, currLeftNum)
+        handleScrollEvent($xeGanttView, evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum)
       }
+    },
+    triggerVirtualScrollYEvent (evnt: Event) {
+      const $xeGanttView = this
+      const internalData = $xeGanttView.internalData
 
-      if (bodyTableElem) {
-        bodyTableElem.style.transform = `translate(${xSpaceLeft}px, ${reactData.scrollYTop || 0}px)`
-      }
-
-      const layoutList = ['header', 'body', 'footer']
-      layoutList.forEach(layout => {
-        const xSpaceElem = getRefElem(elemStore[`main-${layout}-xSpace`])
-        if (xSpaceElem) {
-          xSpaceElem.style.width = scrollXLoad ? `${ySpaceWidth}px` : ''
-        }
-      })
-
-      reactData.scrollXLeft = xSpaceLeft
-      reactData.scrollXWidth = ySpaceWidth
-      reactData.isScrollXBig = isScrollXBig
-
-      const scrollXSpaceEl = refScrollXSpaceElem.value
-      if (scrollXSpaceEl) {
-        scrollXSpaceEl.style.width = `${ySpaceWidth}px`
+      const { elemStore, inHeaderScroll, inBodyScroll } = internalData
+      if (inHeaderScroll || inBodyScroll) {
+        return
       }
-
-      calcScrollbar()
-      return nextTick().then(() => {
-        updateStyle()
-      })
-    }
-
-    const updateScrollYSpace = () => {
-      const { scrollYLoad, overflowY } = reactData
-      const { elemStore } = internalData
-      const $xeTable = internalData.xeTable
+      const wrapperEl = evnt.currentTarget as HTMLDivElement
       const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
-      const bodyTableElem = getRefElem(elemStore['main-body-table'])
-
-      let ySpaceTop = 0
-      let scrollYHeight = 0
-      let isScrollYBig = false
-      if ($xeTable) {
-        const tableReactData = $xeTable.reactData
-        ySpaceTop = tableReactData.scrollYTop
-        scrollYHeight = tableReactData.scrollYHeight
-        isScrollYBig = tableReactData.isScrollYBig
+      if (wrapperEl) {
+        const isRollY = true
+        const isRollX = false
+        const currTopNum = wrapperEl.scrollTop
+        internalData.inVirtualScroll = true
+        setScrollTop(bodyScrollElem, currTopNum)
+        syncTableScrollTop($xeGanttView, currTopNum)
+        handleScrollEvent($xeGanttView, evnt, isRollY, isRollX, currTopNum, wrapperEl.scrollLeft)
       }
+    },
+    updateScrollXSpace () {
+      const $xeGanttView = this
 
-      let ySpaceHeight = scrollYHeight
-      let scrollYTop = ySpaceTop
-
-      let clientHeight = 0
-      if (bodyScrollElem) {
-        clientHeight = bodyScrollElem.clientHeight
-      }
-      if (isScrollYBig) {
-        // 触底
-        if (bodyScrollElem && bodyTableElem && bodyScrollElem.scrollTop + clientHeight >= maxYHeight) {
-          scrollYTop = maxYHeight - bodyTableElem.clientHeight
-        } else {
-          scrollYTop = (maxYHeight - clientHeight) * (ySpaceTop / (scrollYHeight - clientHeight))
-        }
-        ySpaceHeight = maxYHeight
-      }
-      if (!(scrollYLoad && overflowY)) {
-        scrollYTop = 0
-      }
-
-      if (bodyTableElem) {
-        bodyTableElem.style.transform = `translate(${reactData.scrollXLeft || 0}px, ${scrollYTop}px)`
-      }
-
-      const layoutList = ['header', 'body', 'footer']
-      layoutList.forEach(layout => {
-        const ySpaceElem = getRefElem(elemStore[`main-${layout}-ySpace`])
-        if (ySpaceElem) {
-          ySpaceElem.style.height = ySpaceHeight ? `${ySpaceHeight}px` : ''
-        }
-      })
-
-      const scrollYSpaceEl = refScrollYSpaceElem.value
-      if (scrollYSpaceEl) {
-        scrollYSpaceEl.style.height = ySpaceHeight ? `${ySpaceHeight}px` : ''
-      }
-      reactData.scrollYTop = scrollYTop
-      reactData.scrollYHeight = scrollYHeight
-      reactData.isScrollYBig = isScrollYBig
-
-      calcScrollbar()
-      return nextTick().then(() => {
-        updateStyle()
-      })
-    }
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const checkLastSyncScroll = (isRollX: boolean, isRollY: boolean) => {
-      const { lcsTimeout } = internalData
-      reactData.lazScrollLoading = true
-      if (lcsTimeout) {
-        clearTimeout(lcsTimeout)
-      }
-      internalData.lcsTimeout = setTimeout(() => {
-        internalData.lcsRunTime = Date.now()
-        internalData.lcsTimeout = undefined
-        internalData.intoRunScroll = false
-        internalData.inVirtualScroll = false
-        internalData.inWheelScroll = false
-        internalData.inHeaderScroll = false
-        internalData.inBodyScroll = false
-        internalData.inFooterScroll = false
-        reactData.lazScrollLoading = false
-      }, 200)
-    }
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const handleScrollEvent = (evnt: Event, isRollY: boolean, isRollX: boolean, scrollTop: number, scrollLeft: number) => {
-      checkLastSyncScroll(isRollX, isRollY)
-    }
-
-    const ganttViewMethods: VxeGanttViewMethods = {
-      updateViewData () {
-        const $xeTable = internalData.xeTable
-        if ($xeTable) {
-          const tableReactData = $xeTable.reactData
-          const { tableData } = tableReactData
-          reactData.tableData = tableData
-        }
-        return nextTick()
-      },
-      connectUpdate ({ $table }) {
-        if ($table) {
-          internalData.xeTable = $table
-        }
-        return nextTick()
-      }
-    }
-
-    /**
-     * 同步表格滚动
-     */
-    const syncTableScrollTop = (scrollTop: number) => {
-      const $xeTable = internalData.xeTable
-      if ($xeTable) {
-        const tableInternalData = $xeTable.internalData
-        const { elemStore: tableElemStore } = tableInternalData
-        const tableBodyScrollElem = getRefElem(tableElemStore['main-body-scroll'])
-        if (tableBodyScrollElem) {
-          tableBodyScrollElem.scrollTop = scrollTop
-        }
-      }
-    }
+      return updateScrollXSpace($xeGanttView)
+    },
+    updateScrollYSpace () {
+      const $xeGanttView = this
 
-    const ganttViewPrivateMethods: VxeGanttViewPrivateMethods = {
-      handleUpdateStyle: updateStyle,
-      handleLazyRecalculate,
-      triggerHeaderScrollEvent (evnt) {
-        const { elemStore, inVirtualScroll, inBodyScroll, inFooterScroll } = internalData
-        if (inVirtualScroll) {
-          return
-        }
-        if (inBodyScroll || inFooterScroll) {
-          return
-        }
-        const wrapperEl = evnt.currentTarget as HTMLDivElement
-        const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
-        const xHandleEl = refScrollXHandleElem.value
-        if (bodyScrollElem && wrapperEl) {
-          const isRollX = true
-          const isRollY = false
-          const currLeftNum = wrapperEl.scrollLeft
-          internalData.inHeaderScroll = true
-          setScrollLeft(xHandleEl, currLeftNum)
-          setScrollLeft(bodyScrollElem, currLeftNum)
-          handleScrollEvent(evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum)
-        }
-      },
-      triggerBodyScrollEvent (evnt) {
-        const { elemStore, inVirtualScroll, inHeaderScroll, inFooterScroll } = internalData
-        if (inVirtualScroll) {
-          return
-        }
-        if (inHeaderScroll || inFooterScroll) {
-          return
-        }
-        const wrapperEl = evnt.currentTarget as HTMLDivElement
-        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)
-        }
-      },
-      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 { elemStore, inHeaderScroll, inBodyScroll } = internalData
-        if (inHeaderScroll || inBodyScroll) {
-          return
-        }
-        const wrapperEl = evnt.currentTarget as HTMLDivElement
-        const headerScrollElem = getRefElem(elemStore['main-header-scroll'])
-        const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
-        if (wrapperEl) {
-          const isRollY = false
-          const isRollX = true
-          const currLeftNum = wrapperEl.scrollLeft
-          internalData.inVirtualScroll = true
-          setScrollLeft(headerScrollElem, currLeftNum)
-          setScrollLeft(bodyScrollElem, currLeftNum)
-          handleScrollEvent(evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum)
-        }
-      },
-      triggerVirtualScrollYEvent (evnt) {
-        const { elemStore, inHeaderScroll, inBodyScroll } = internalData
-        if (inHeaderScroll || inBodyScroll) {
-          return
-        }
-        const wrapperEl = evnt.currentTarget as HTMLDivElement
-        const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
-        if (wrapperEl) {
-          const isRollY = true
-          const isRollX = false
-          const currTopNum = wrapperEl.scrollTop
-          internalData.inVirtualScroll = true
-          setScrollTop(bodyScrollElem, currTopNum)
-          syncTableScrollTop(currTopNum)
-          handleScrollEvent(evnt, isRollY, isRollX, currTopNum, wrapperEl.scrollLeft)
-        }
-      },
-      updateScrollXSpace,
-      updateScrollYSpace
-    }
+      return updateScrollYSpace($xeGanttView)
+    },
+    handleGlobalResizeEvent () {
+      const $xeGanttView = this
 
-    const handleGlobalResizeEvent = () => {
-      handleLazyRecalculate()
-    }
+      handleLazyRecalculate($xeGanttView)
+    },
 
-    Object.assign($xeGanttView, ganttViewMethods, ganttViewPrivateMethods)
+    //
+    // Render
+    //
+    renderScrollX (h: CreateElement) {
+      const $xeGanttView = this
 
-    const renderScrollX = () => {
       return h('div', {
         key: 'vsx',
-        ref: refScrollXVirtualElem,
+        ref: 'refScrollXVirtualElem',
         class: 'vxe-gantt-view--scroll-x-virtual'
       }, [
         h('div', {
-          ref: refScrollXLeftCornerElem,
+          ref: 'refScrollXLeftCornerElem',
           class: 'vxe-gantt-view--scroll-x-left-corner'
         }),
         h('div', {
-          ref: refScrollXWrapperElem,
+          ref: 'refScrollXWrapperElem',
           class: 'vxe-gantt-view--scroll-x-wrapper'
         }, [
           h('div', {
-            ref: refScrollXHandleElem,
+            ref: 'refScrollXHandleElem',
             class: 'vxe-gantt-view--scroll-x-handle',
-            onScroll: $xeGanttView.triggerVirtualScrollXEvent
+            on: {
+              scroll: $xeGanttView.triggerVirtualScrollXEvent
+            }
           }, [
             h('div', {
-              ref: refScrollXSpaceElem,
+              ref: 'refScrollXSpaceElem',
               class: 'vxe-gantt-view--scroll-x-space'
             })
           ])
         ]),
         h('div', {
-          ref: refScrollXRightCornerElem,
+          ref: 'refScrollXRightCornerElem',
           class: 'vxe-gantt-view--scroll-x-right-corner'
         })
       ])
-    }
+    },
+    renderScrollY (h: CreateElement) {
+      const $xeGanttView = this
 
-    const renderScrollY = () => {
       return h('div', {
-        ref: refScrollYVirtualElem,
+        ref: 'refScrollYVirtualElem',
         class: 'vxe-gantt-view--scroll-y-virtual'
       }, [
         h('div', {
-          ref: refScrollYTopCornerElem,
+          ref: 'refScrollYTopCornerElem',
           class: 'vxe-gantt-view--scroll-y-top-corner'
         }),
         h('div', {
-          ref: refScrollYWrapperElem,
+          ref: 'refScrollYWrapperElem',
           class: 'vxe-gantt-view--scroll-y-wrapper'
         }, [
           h('div', {
-            ref: refScrollYHandleElem,
+            ref: 'refScrollYHandleElem',
             class: 'vxe-gantt-view--scroll-y-handle',
-            onScroll: $xeGanttView.triggerVirtualScrollYEvent
+            on: {
+              scroll: $xeGanttView.triggerVirtualScrollYEvent
+            }
           }, [
             h('div', {
-              ref: refScrollYSpaceElem,
+              ref: 'refScrollYSpaceElem',
               class: 'vxe-gantt-view--scroll-y-space'
             })
           ])
         ]),
         h('div', {
-          ref: refScrollYBottomCornerElem,
+          ref: 'refScrollYBottomCornerElem',
           class: 'vxe-gantt-view--scroll-y-bottom-corner'
         })
       ])
-    }
-
-    const renderViewport = () => {
+    },
+    renderViewport (h: CreateElement) {
       return h('div', {
         class: 'vxe-gantt-view--viewport-wrapper'
       }, [
         h(GanttViewHeaderComponent),
         h(GanttViewBodyComponent)
       ])
-    }
+    },
+    renderBody (h: CreateElement) {
+      const $xeGanttView = this
+      const $xeGantt = $xeGanttView.$xeGantt
 
-    const renderBody = () => {
-      const scrollbarYToLeft = computeScrollbarYToLeft.value
+      const scrollbarYToLeft = $xeGantt.computeScrollbarYToLeft
       return h('div', {
         class: 'vxe-gantt-view--layout-wrapper'
       }, scrollbarYToLeft
         ? [
-            renderScrollY(),
-            renderViewport()
+            $xeGanttView.renderScrollY(h),
+            $xeGanttView.renderViewport(h)
           ]
         : [
-            renderViewport(),
-            renderScrollY()
+            $xeGanttView.renderViewport(h),
+            $xeGanttView.renderScrollY(h)
           ])
-    }
+    },
+    renderVN (h: CreateElement): VNode {
+      const $xeGanttView = this
+      const $xeGantt = $xeGanttView.$xeGantt
+      const reactData = $xeGanttView.reactData
 
-    const renderVN = () => {
       const { overflowX, overflowY, scrollXLoad, scrollYLoad } = reactData
-      const taskViewOpts = computeTaskViewOpts.value
-      const scrollbarXToTop = computeScrollbarXToTop.value
+      const taskViewOpts = $xeGantt.computeTaskViewOpts
+      const scrollbarXToTop = $xeGantt.computeScrollbarXToTop
       return h('div', {
-        ref: refElem,
+        ref: 'refElem',
         class: ['vxe-gantt-view', `mode--${taskViewOpts.mode || 'day'}`, {
           'is--scroll-y': overflowY,
           'is--scroll-x': overflowX,
@@ -790,51 +865,44 @@ export default defineVxeComponent({
           class: 'vxe-gantt-view--render-wrapper'
         }, scrollbarXToTop
           ? [
-              renderScrollX(),
-              renderBody()
+              $xeGanttView.renderScrollX(h),
+              $xeGanttView.renderBody(h)
             ]
           : [
-              renderBody(),
-              renderScrollX()
+              $xeGanttView.renderBody(h),
+              $xeGanttView.renderScrollX(h)
             ]),
         h('div', {
           class: 'vxe-gantt-view--render-vars'
         }, [
           h('div', {
-            ref: refColInfoElem,
+            ref: 'refColInfoElem',
             class: 'vxe-gantt-view--column-info'
           })
         ])
       ])
     }
+  },
+  watch: {
+    'reactData.tableData' () {
+      const $xeGanttView = this
 
-    const tdFlag = ref(0)
-    watch(() => reactData.tableData, () => {
-      tdFlag.value++
-    })
-    watch(() => reactData.tableData.length, () => {
-      tdFlag.value++
-    })
-    watch(tdFlag, () => {
-      handleUpdateData()
-    })
-
-    onMounted(() => {
-      globalEvents.on($xeGanttView, 'resize', handleGlobalResizeEvent)
-    })
-
-    onUnmounted(() => {
-      globalEvents.off($xeGanttView, 'keydown')
-      XEUtils.assign(internalData, createInternalData())
-    })
-
-    $xeGanttView.renderVN = renderVN
+      handleUpdateData($xeGanttView)
+    }
+  },
+  mounted () {
+    const $xeGanttView = this
 
-    provide('$xeGanttView', $xeGanttView)
+    globalEvents.on($xeGanttView, 'resize', $xeGanttView.handleGlobalResizeEvent)
+  },
+  beforeDestroy () {
+    const $xeGanttView = this
+    const internalData = $xeGanttView.internalData
 
-    return $xeGanttView
+    globalEvents.off($xeGanttView, 'keydown')
+    XEUtils.assign(internalData, createInternalData())
   },
-  render () {
-    return this.renderVN()
+  render (this: any, h) {
+    return this.renderVN(h)
   }
 })