vxe-gantt 0.0.3 → 3.0.0-beta.0

package/packages/gantt/src/gantt.ts

@@ -1,24 +1,55 @@
-import { h, ref, computed, provide, reactive, onUnmounted, watch, nextTick, VNode, ComponentPublicInstance, onMounted } from 'vue'
+import { PropType, VNode, CreateElement, Component } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
+import { VxeUI } from '@vxe-ui/core'
 import XEUtils from 'xe-utils'
 import { getLastZIndex, nextZIndex, isEnableConf } from '../../ui/src/utils'
 import { getOffsetHeight, getPaddingTopBottomSize, getDomNode, toCssUnit, addClass, removeClass } from '../../ui/src/dom'
-import { VxeUI } from '../../ui'
-import { ganttProps } from './props'
-import { ganttEmits } from './emits'
-import { tableEmits } from './table-emits'
-import { tableProps } from './table-props'
 import { warnLog, errLog } from '../../ui/src/log'
 import GanttViewComponent from './gantt-view'
+import { VxeTable as VxeTableComponent } from 'vxe-table'
 
-import type { VxeGanttConstructor, VxeGanttEmits, GanttReactData, GanttInternalData, VxeGanttPropTypes, GanttMethods, GanttPrivateMethods, VxeGanttPrivateMethods, GanttPrivateRef, VxeGanttProps, VxeGanttPrivateComputed, VxeGanttViewInstance, VxeGanttDefines } from '../../../types'
-import type { ValueOf, VxeFormEvents, VxeFormInstance, VxePagerEvents, VxeFormItemProps, VxePagerInstance, VxeComponentStyleType } from 'vxe-pc-ui'
-import type { VxeTableMethods, VxeToolbarPropTypes, VxeTableProps, VxeTableConstructor, VxeTablePrivateMethods, VxeTableEvents, VxeTableDefines, VxeTableEventProps, VxeToolbarInstance } from 'vxe-table'
+import type { ValueOf, VxeFormInstance, VxeFormItemProps, VxePagerInstance, VxePagerDefines, VxeComponentStyleType, VxeComponentSizeType, VxeFormDefines, VxeFormItemPropTypes } from 'vxe-pc-ui'
+import type { VxeTableMethods, VxeToolbarPropTypes, VxeTableProps, VxeTableConstructor, VxeTablePrivateMethods, VxeTableDefines, VxeToolbarInstance, TableInternalData, VxeTablePropTypes, VxeGridPropTypes } from 'vxe-table'
+import type { VxeGanttEmits, GanttReactData, GanttInternalData, VxeGanttPropTypes, VxeGanttViewInstance, VxeGanttDefines } from '../../../types'
 
-const { getConfig, getIcon, getI18n, commands, hooks, useFns, createEvent, globalEvents, GLOBAL_EVENT_KEYS, renderEmptyElement, getSlotVNs } = VxeUI
+const { getConfig, getIcon, getI18n, commands, globalMixins, createEvent, globalEvents, GLOBAL_EVENT_KEYS, renderEmptyElement, getSlotVNs } = VxeUI
 
-const tableComponentPropKeys = Object.keys(tableProps) as (keyof VxeTableProps)[]
-const tableComponentMethodKeys: (keyof VxeTableMethods)[] = ['clearAll', 'syncData', 'updateData', 'loadData', 'reloadData', 'reloadRow', 'loadColumn', 'reloadColumn', 'getRowNode', 'getColumnNode', 'getRowIndex', 'getVTRowIndex', 'getVMRowIndex', 'getColumnIndex', 'getVTColumnIndex', 'getVMColumnIndex', 'setRow', 'createData', 'createRow', 'revertData', 'clearData', 'isRemoveByRow', 'isInsertByRow', 'isUpdateByRow', 'getColumns', 'getColumnById', 'getColumnByField', 'getTableColumn', 'getFullColumns', 'getData', 'getCheckboxRecords', 'getParentRow', 'getTreeRowChildren', 'getTreeParentRow', 'getRowSeq', 'getRowById', 'getRowid', 'getTableData', 'getFullData', 'setColumnFixed', 'clearColumnFixed', 'setColumnWidth', 'getColumnWidth', 'recalcRowHeight', 'setRowHeightConf', 'getRowHeightConf', 'setRowHeight', 'getRowHeight', 'hideColumn', 'showColumn', 'resetColumn', 'refreshColumn', 'refreshScroll', 'recalculate', 'closeTooltip', 'isAllCheckboxChecked', 'isAllCheckboxIndeterminate', 'getCheckboxIndeterminateRecords', 'setCheckboxRow', 'setCheckboxRowKey', 'isCheckedByCheckboxRow', 'isCheckedByCheckboxRowKey', 'isIndeterminateByCheckboxRow', 'isIndeterminateByCheckboxRowKey', 'toggleCheckboxRow', 'setAllCheckboxRow', 'getRadioReserveRecord', 'clearRadioReserve', 'getCheckboxReserveRecords', 'clearCheckboxReserve', 'toggleAllCheckboxRow', 'clearCheckboxRow', 'setCurrentRow', 'isCheckedByRadioRow', 'isCheckedByRadioRowKey', 'setRadioRow', 'setRadioRowKey', 'clearCurrentRow', 'clearRadioRow', 'getCurrentRecord', 'getRadioRecord', 'getCurrentColumn', 'setCurrentColumn', 'clearCurrentColumn', 'setPendingRow', 'togglePendingRow', 'hasPendingByRow', 'isPendingByRow', 'getPendingRecords', 'clearPendingRow', 'setFilterByEvent', 'sort', 'setSort', 'setSortByEvent', 'clearSort', 'clearSortByEvent', 'isSort', 'getSortColumns', 'closeFilter', 'isFilter', 'clearFilterByEvent', 'isActiveFilterByColumn', 'isRowExpandLoaded', 'clearRowExpandLoaded', 'reloadRowExpand', 'reloadRowExpand', 'toggleRowExpand', 'setAllRowExpand', 'setRowExpand', 'isExpandByRow', 'isRowExpandByRow', 'clearRowExpand', 'clearRowExpandReserve', 'getRowExpandRecords', 'getTreeExpandRecords', 'isTreeExpandLoaded', 'clearTreeExpandLoaded', 'reloadTreeExpand', 'reloadTreeChilds', 'toggleTreeExpand', 'setAllTreeExpand', 'setTreeExpand', 'isTreeExpandByRow', 'clearTreeExpand', 'clearTreeExpandReserve', 'getScroll', 'scrollTo', 'scrollToRow', 'scrollToColumn', 'clearScroll', 'updateFooter', 'updateStatus', 'setMergeCells', 'removeInsertRow', 'removeMergeCells', 'getMergeCells', 'clearMergeCells', 'setMergeFooterItems', 'removeMergeFooterItems', 'getMergeFooterItems', 'clearMergeFooterItems', 'getCustomStoreData', 'setRowGroupExpand', 'setAllRowGroupExpand', 'clearRowGroupExpand', 'isRowGroupExpandByRow', 'isRowGroupRecord', 'isAggregateRecord', 'isAggregateExpandByRow', 'getAggregateContentByRow', 'getAggregateRowChildren', 'setRowGroups', 'clearRowGroups', 'openTooltip', 'moveColumnTo', 'moveRowTo', 'getCellLabel', 'getCellElement', 'focus', 'blur', 'connect']
+const tableProps = (VxeTableComponent as any).props
+
+const tableMethods: VxeTableMethods = {} as VxeTableMethods
+const propKeys = Object.keys(tableProps) as (keyof VxeTableProps)[]
+
+const defaultLayouts: VxeGanttPropTypes.Layouts = [['Form'], ['Toolbar', 'Top', 'Gantt', 'Bottom', 'Pager']]
+
+function getTableOns (_vm: any) {
+  const { $listeners, proxyConfig, proxyOpts } = _vm
+  const ons: any = {}
+  XEUtils.each($listeners, (cb: any, type: any) => {
+    ons[type] = (...args: any[]) => {
+      _vm.$emit(type, ...args)
+    }
+  })
+  if (proxyConfig) {
+    if (proxyOpts.sort) {
+      ons['sort-change'] = _vm.sortChangeEvent
+      ons['clear-all-sort'] = _vm.clearAllSortEvent
+    }
+    if (proxyOpts.filter) {
+      ons['filter-change'] = _vm.filterChangeEvent
+      ons['clear-all-filter'] = _vm.clearAllFilterEvent
+    }
+  }
+  return ons
+}
+
+XEUtils.each((VxeTableComponent as any).methods, (fn, name) => {
+  tableMethods[name as keyof VxeTableMethods] = function (this: any, ...args: any[]) {
+    const $xeGantt = this
+    const $xeTable = $xeGantt.$refs.refTable
+
+    return $xeTable && $xeTable[name](...args)
+  }
+})
 
 function createInternalData (): GanttInternalData {
   return {
@@ -26,26 +57,58 @@ function createInternalData (): GanttInternalData {
   }
 }
 
-export default defineVxeComponent({
+export default /* define-vxe-component start */ defineVxeComponent({
   name: 'VxeGantt',
-  props: ganttProps,
-  emits: ganttEmits,
-  setup (props, context) {
-    const { slots, emit } = context
+  mixins: [
+    globalMixins.sizeMixin
+  ],
+  props: {
+    ...(tableProps as unknown as {
+      border: PropType<VxeTablePropTypes.Border>
+      round: PropType<VxeTablePropTypes.Round>
+      loading: PropType<VxeTablePropTypes.Loading>
+      height: PropType<VxeTablePropTypes.Height>
+      minHeight: PropType<VxeTablePropTypes.MinHeight>
+      maxHeight: PropType<VxeTablePropTypes.MaxHeight>
+      seqConfig: PropType<VxeTablePropTypes.SeqConfig>
+      editConfig: PropType<VxeTablePropTypes.EditConfig>
+      sortConfig: PropType<VxeTablePropTypes.SortConfig>
+      filterConfig: PropType<VxeTablePropTypes.FilterConfig>
+      validConfig: PropType<VxeTablePropTypes.ValidConfig>
+      editRules: PropType<VxeTablePropTypes.EditRules>
+      animat: PropType<VxeTablePropTypes.Animat>
+      scrollbarConfig: PropType<VxeTablePropTypes.ScrollbarConfig>
+      params: PropType<VxeTablePropTypes.Params>
+    }),
+
+    columns: Array as PropType<VxeGridPropTypes.Columns<any>>,
+    pagerConfig: Object as PropType<VxeGridPropTypes.PagerConfig>,
+    proxyConfig: Object as PropType<VxeGridPropTypes.ProxyConfig<any>>,
+    toolbarConfig: Object as PropType<VxeGridPropTypes.ToolbarConfig>,
+    formConfig: Object as PropType<VxeGridPropTypes.FormConfig>,
+    zoomConfig: Object as PropType<VxeGridPropTypes.ZoomConfig>,
+
+    layouts: Array as PropType<VxeGanttPropTypes.Layouts>,
+    taskConfig: Object as PropType<VxeGanttPropTypes.TaskConfig>,
+    taskViewConfig: Object as PropType<VxeGanttPropTypes.TaskViewConfig>,
+    taskBarConfig: Object as PropType<VxeGanttPropTypes.TaskBarConfig>,
+    taskSplitConfig: Object as PropType<VxeGanttPropTypes.TaskSplitConfig>,
+    size: {
+      type: String as PropType<VxeGridPropTypes.Size>,
+      default: () => getConfig().gantt.size || getConfig().size
+    }
+  },
+  provide () {
+    const $xeGantt = this
 
+    return {
+      $xeGantt
+    }
+  },
+  data () {
     const xID = XEUtils.uniqueId()
 
-    // 使用已安装的组件，如果未安装则不渲染
-    const VxeUIFormComponent = VxeUI.getComponent('VxeForm')
-    const VxeUIPagerComponent = VxeUI.getComponent('VxePager')
-    const VxeTableComponent = VxeUI.getComponent('VxeTable')
-    const VxeToolbarComponent = VxeUI.getComponent('VxeToolbar')
-
-    const defaultLayouts: VxeGanttPropTypes.Layouts = [['Form'], ['Toolbar', 'Top', 'Gantt', 'Bottom', 'Pager']]
-
-    const { computeSize } = useFns.useSize(props)
-
-    const reactData = reactive<GanttReactData>({
+    const reactData: GanttReactData = {
       tableLoading: false,
       proxyInited: false,
       isZMax: false,
@@ -61,131 +124,139 @@ export default defineVxeComponent({
       },
       showLeftView: true,
       showRightView: true
-    })
+    }
 
     const internalData = createInternalData()
 
-    const refElem = ref<HTMLDivElement>()
-    const refTable = ref<ComponentPublicInstance<VxeTableProps, VxeTableConstructor & VxeTableMethods & VxeTablePrivateMethods>>()
-    const refForm = ref<VxeFormInstance>()
-    const refToolbar = ref<VxeToolbarInstance>()
-    const refPager = ref<VxePagerInstance>()
-    const refGanttContainer = ref<HTMLDivElement>()
-    const refGanttView = ref<VxeGanttViewInstance>()
-
-    const refFormWrapper = ref<HTMLDivElement>()
-    const refToolbarWrapper = ref<HTMLDivElement>()
-    const refTopWrapper = ref<HTMLDivElement>()
-    const refBottomWrapper = ref<HTMLDivElement>()
-    const refPagerWrapper = ref<HTMLDivElement>()
-    const refTableWrapper = ref<HTMLDivElement>()
-    const refGanttWrapper = ref<HTMLDivElement>()
-
-    const refResizableSplitTip = ref<HTMLDivElement>()
-
-    const extendTableMethods = <T>(methodKeys: T[]) => {
-      const funcs: any = {}
-      methodKeys.forEach(name => {
-        funcs[name] = (...args: any[]) => {
-          const $xeTable: any = refTable.value
-          if ($xeTable && $xeTable[name]) {
-            return $xeTable[name](...args)
-          }
-        }
-      })
-      return funcs
+    return {
+      xID,
+      reactData,
+      internalData
     }
+  },
+  computed: {
+    ...({} as {
+      computeSize(): VxeComponentSizeType
+    }),
+    computeProxyOpts () {
+      const $xeGantt = this
+      const props = $xeGantt
 
-    const ganttExtendTableMethods = extendTableMethods(tableComponentMethodKeys) as VxeTableMethods
-
-    tableComponentMethodKeys.forEach(name => {
-      ganttExtendTableMethods[name] = (...args: any[]) => {
-        const $xeTable: any = refTable.value
-        if ($xeTable && $xeTable[name]) {
-          return $xeTable && $xeTable[name](...args)
-        }
-      }
-    })
-
-    const computeProxyOpts = computed(() => {
       return XEUtils.merge({}, XEUtils.clone(getConfig().gantt.proxyConfig, true), props.proxyConfig)
-    })
+    },
+    computeIsRespMsg () {
+      const $xeGantt = this
 
-    const computeIsRespMsg = computed(() => {
-      const proxyOpts = computeProxyOpts.value
+      const proxyOpts = $xeGantt.computeProxyOpts as VxeGanttPropTypes.ProxyConfig
       return !!(XEUtils.isBoolean(proxyOpts.message) ? proxyOpts.message : proxyOpts.showResponseMsg)
-    })
+    },
+    computeIsActiveMsg () {
+      const $xeGantt = this
 
-    const computeIsActiveMsg = computed(() => {
-      const proxyOpts = computeProxyOpts.value
+      const proxyOpts = $xeGantt.computeProxyOpts as VxeGanttPropTypes.ProxyConfig
       return XEUtils.isBoolean(proxyOpts.showActionMsg) ? proxyOpts.showActionMsg : !!proxyOpts.showActiveMsg
-    })
+    },
+    computePagerOpts () {
+      const $xeGantt = this
+      const props = $xeGantt
 
-    const computePagerOpts = computed(() => {
       return Object.assign({}, getConfig().gantt.pagerConfig, props.pagerConfig)
-    })
+    },
+    computeFormOpts () {
+      const $xeGantt = this
+      const props = $xeGantt
 
-    const computeFormOpts = computed(() => {
       return Object.assign({}, getConfig().gantt.formConfig, props.formConfig)
-    })
+    },
+    computeToolbarOpts () {
+      const $xeGantt = this
+      const props = $xeGantt
 
-    const computeToolbarOpts = computed(() => {
       return Object.assign({}, getConfig().gantt.toolbarConfig, props.toolbarConfig)
-    })
+    },
+    computeZoomOpts () {
+      const $xeGantt = this
+      const props = $xeGantt
 
-    const computeZoomOpts = computed(() => {
       return Object.assign({}, getConfig().gantt.zoomConfig, props.zoomConfig)
-    })
+    },
+    computeTaskOpts () {
+      const $xeGantt = this
+      const props = $xeGantt
 
-    const computeTaskOpts = computed(() => {
       return Object.assign({}, getConfig().gantt.taskConfig, props.taskConfig)
-    })
+    },
+    computeTaskViewOpts () {
+      const $xeGantt = this
+      const props = $xeGantt
 
-    const computeTaskViewOpts = computed(() => {
       return Object.assign({}, getConfig().gantt.taskViewConfig, props.taskViewConfig)
-    })
+    },
+    computeTaskBarOpts () {
+      const $xeGantt = this
+      const props = $xeGantt
 
-    const computeTaskBarOpts = computed(() => {
       return Object.assign({}, getConfig().gantt.taskBarConfig, props.taskBarConfig)
-    })
-
-    const computeTitleField = computed(() => {
-      const taskOpts = computeTaskOpts.value
-      return taskOpts.titleField || 'title'
-    })
+    },
+    computeTaskSplitOpts () {
+      const $xeGantt = this
+      const props = $xeGantt
 
-    const computeStartField = computed(() => {
-      const taskOpts = computeTaskOpts.value
-      return taskOpts.startField || 'startDate'
-    })
-
-    const computeEndField = computed(() => {
-      const taskOpts = computeTaskOpts.value
-      return taskOpts.endField || 'endDate'
-    })
+      return Object.assign({}, getConfig().gantt.taskSplitConfig, props.taskSplitConfig)
+    },
+    computeTitleField () {
+      const $xeGantt = this
 
-    const computeProgressField = computed(() => {
-      const taskOpts = computeTaskOpts.value
+      const taskOpts = $xeGantt.computeTaskOpts as VxeGanttPropTypes.TaskConfig
+      return taskOpts.titleField || 'title'
+    },
+    computeStartField () {
+      const $xeGantt = this
+
+      const taskOpts = $xeGantt.computeTaskOpts as VxeGanttPropTypes.TaskConfig
+      return taskOpts.startField || 'start'
+    },
+    computeEndField () {
+      const $xeGantt = this
+
+      const taskOpts = $xeGantt.computeTaskOpts as VxeGanttPropTypes.TaskConfig
+      return taskOpts.endField || 'end'
+    },
+    computeProgressField () {
+      const $xeGantt = this
+
+      const taskOpts = $xeGantt.computeTaskOpts as VxeGanttPropTypes.TaskConfig
       return taskOpts.progressField || 'progress'
-    })
+    },
+    computeScrollbarOpts () {
+      const $xeGantt = this
+      const props = $xeGantt
 
-    const computeScrollbarOpts = computed(() => {
       return Object.assign({}, getConfig().gantt.scrollbarConfig, props.scrollbarConfig)
-    })
+    },
+    computeScrollbarXToTop () {
+      const $xeGantt = this
 
-    const computeScrollbarXToTop = computed(() => {
-      const scrollbarOpts = computeScrollbarOpts.value
+      const scrollbarOpts = $xeGantt.computeScrollbarOpts as VxeTablePropTypes.ScrollbarConfig
       return !!(scrollbarOpts.x && scrollbarOpts.x.position === 'top')
-    })
+    },
+    computeScrollbarYToLeft () {
+      const $xeGantt = this
 
-    const computeScrollbarYToLeft = computed(() => {
-      const scrollbarOpts = computeScrollbarOpts.value
+      const scrollbarOpts = $xeGantt.computeScrollbarOpts as VxeTablePropTypes.ScrollbarConfig
       return !!(scrollbarOpts.y && scrollbarOpts.y.position === 'left')
-    })
+    },
+    computeStyles () {
+      const $xeGantt = this
+      const props = $xeGantt
+      const reactData = $xeGantt.reactData
 
-    const computeStyles = computed(() => {
       const { height, maxHeight } = props
       const { isZMax, tZindex } = reactData
+      const taskViewOpts = $xeGantt.computeTaskViewOpts as VxeGanttPropTypes.TaskViewConfig
+      const { tableStyle } = taskViewOpts
+      const taskBarOpts = $xeGantt.computeTaskBarOpts as VxeGanttPropTypes.TaskBarConfig
+      const { barStyle } = taskBarOpts
       const stys: VxeComponentStyleType = {}
       if (isZMax) {
         stys.zIndex = tZindex
@@ -197,30 +268,46 @@ export default defineVxeComponent({
           stys.maxHeight = maxHeight === 'auto' || maxHeight === '100%' ? '100%' : toCssUnit(maxHeight)
         }
       }
+      if (barStyle) {
+        const { bgColor, completedBgColor } = barStyle
+        if (bgColor) {
+          stys['--vxe-ui-gantt-view-task-bar-background-color'] = bgColor
+        }
+        if (completedBgColor) {
+          stys['--vxe-ui-gantt-view-task-bar-completed-background-color'] = completedBgColor
+        }
+      }
+      if (tableStyle) {
+        const { width: defTbWidth } = tableStyle
+        if (defTbWidth) {
+          stys['--vxe-ui-gantt-view-table-default-width'] = toCssUnit(defTbWidth)
+        }
+      }
       return stys
-    })
-
-    const computeTableExtendProps = computed(() => {
-      const rest: Record<string, any> = {}
-      tableComponentPropKeys.forEach((key) => {
-        rest[key] = props[key]
+    },
+    computeTableExtendProps () {
+      const $xeGantt = this
+      const props = $xeGantt
+
+      const rest: any = {}
+      const gridProps: any = props
+      propKeys.forEach(key => {
+        rest[key] = gridProps[key]
       })
       return rest
-    })
+    },
+    computeTableProps () {
+      const $xeGantt = this
+      const props = $xeGantt
+      const reactData = $xeGantt.reactData
 
-    const computeTableProps = computed(() => {
       const { seqConfig, pagerConfig, editConfig, proxyConfig } = props
       const { isZMax, tablePage } = reactData
-      const tableExtendProps = computeTableExtendProps.value
-      const proxyOpts = computeProxyOpts.value
-      const pagerOpts = computePagerOpts.value
-      const isLoading = computeIsLoading.value
-      const tProps = Object.assign({}, tableExtendProps, {
-        showOverflow: true,
-        showHeaderOverflow: true,
-        showFooterOverflow: true,
-        showFooter: false
-      })
+      const tableExtendProps = $xeGantt.computeTableExtendProps as any
+      const proxyOpts = $xeGantt.computeProxyOpts
+      const pagerOpts = $xeGantt.computePagerOpts
+      const isLoading = $xeGantt.computeIsLoading
+      const tProps = Object.assign({}, tableExtendProps)
       if (isZMax) {
         if (tableExtendProps.maxHeight) {
           tProps.maxHeight = '100%'
@@ -238,9 +325,16 @@ export default defineVxeComponent({
         tProps.editConfig = Object.assign({}, editConfig)
       }
       return tProps
-    })
+    },
+    tableProps () {
+      const $xeGantt = this
+
+      return $xeGantt.computeTableProps
+    },
+    computeCurrLayoutConf () {
+      const $xeGantt = this
+      const props = $xeGantt
 
-    const computeCurrLayoutConf = computed(() => {
       const { layouts } = props
       let confs: VxeGanttPropTypes.Layouts = []
       if (layouts && layouts.length) {
@@ -265,37 +359,47 @@ export default defineVxeComponent({
         bodyKeys,
         footKeys
       }
-    })
+    },
+    computeCustomCurrentPageFlag () {
+      const $xeGantt = this
 
-    const computeCustomCurrentPageFlag = computed(() => {
-      const pagerOpts = computePagerOpts.value
+      const pagerOpts = $xeGantt.computePagerOpts as VxeGanttPropTypes.PagerConfig
       return pagerOpts.currentPage
-    })
+    },
+    computeCustomPageSizeFlag () {
+      const $xeGantt = this
 
-    const computeCustomPageSizeFlag = computed(() => {
-      const pagerOpts = computePagerOpts.value
+      const pagerOpts = $xeGantt.computePagerOpts as VxeGanttPropTypes.PagerConfig
       return pagerOpts.pageSize
-    })
+    },
+    computeCustomTotalFlag () {
+      const $xeGantt = this
 
-    const computeCustomTotalFlag = computed(() => {
-      const pagerOpts = computePagerOpts.value
+      const pagerOpts = $xeGantt.computePagerOpts as VxeGanttPropTypes.PagerConfig
       return pagerOpts.total
-    })
+    },
+    computePageCount () {
+      const $xeGantt = this
+      const reactData = ($xeGantt as any).reactData
 
-    const computePageCount = computed(() => {
       const { tablePage } = reactData
       return Math.max(Math.ceil(tablePage.total / tablePage.pageSize), 1)
-    })
+    },
+    computeIsLoading () {
+      const $xeGantt = this
+      const props = $xeGantt
+      const reactData = ($xeGantt as any).reactData
 
-    const computeIsLoading = computed(() => {
       const { loading, proxyConfig } = props
       const { tableLoading } = reactData
-      const proxyOpts = computeProxyOpts.value
+      const proxyOpts = $xeGantt.computeProxyOpts as VxeGanttPropTypes.ProxyConfig
       const { showLoading } = proxyOpts
       return loading || (tableLoading && showLoading && proxyConfig && isEnableConf(proxyOpts))
-    })
+    },
+    computeTableBorder () {
+      const $xeGantt = this
+      const props = $xeGantt
 
-    const computeTableBorder = computed(() => {
       const { border } = props
       if (border === true) {
         return 'full'
@@ -304,77 +408,76 @@ export default defineVxeComponent({
         return border
       }
       return 'default'
-    })
-
-    const refMaps: GanttPrivateRef = {
-      refElem,
-      refTable,
-      refForm,
-      refToolbar,
-      refPager
-    }
-
-    const computeMaps: VxeGanttPrivateComputed = {
-      computeProxyOpts,
-      computePagerOpts,
-      computeFormOpts,
-      computeToolbarOpts,
-      computeZoomOpts,
-      computeTaskOpts,
-      computeTaskViewOpts,
-      computeTaskBarOpts,
-      computeTitleField,
-      computeStartField,
-      computeEndField,
-      computeProgressField,
-      computeScrollbarOpts,
-      computeScrollbarXToTop,
-      computeScrollbarYToLeft
     }
-
-    const $xeGantt = {
-      xID,
-      props: props as VxeGanttProps,
-      context,
-      reactData,
-      internalData,
-      getRefMaps: () => refMaps,
-      getComputeMaps: () => computeMaps
-    } as VxeGanttConstructor & VxeGanttPrivateMethods
-
-    const initToolbar = () => {
-      const toolbarOpts = computeToolbarOpts.value
-      if (props.toolbarConfig && isEnableConf(toolbarOpts)) {
-        nextTick(() => {
-          const $xeTable = refTable.value
-          const $xeToolbar = refToolbar.value
-          if ($xeTable && $xeToolbar) {
-            $xeTable.connectToolbar($xeToolbar)
-          }
-        })
-      }
+  },
+  watch: {
+    columns () {
+      const $xeGantt = this
+      const props = $xeGantt
+
+      $xeGantt.$nextTick(() => $xeGantt.loadColumn(props.columns || []))
+    },
+    toolbarConfig () {
+      const $xeGantt = this
+
+      $xeGantt.initToolbar()
+    },
+    computeCustomCurrentPageFlag () {
+      const $xeGantt = this
+
+      $xeGantt.initPages('currentPage')
+    },
+    computeCustomPageSizeFlag () {
+      const $xeGantt = this
+
+      $xeGantt.initPages('pageSize')
+    },
+    computeCustomTotalFlag () {
+      const $xeGantt = this
+
+      $xeGantt.initPages('total')
+    },
+    proxyConfig () {
+      const $xeGantt = this
+
+      $xeGantt.initProxy()
     }
+  },
+  methods: {
+    ...tableMethods,
+    dispatchEvent (type: ValueOf<VxeGanttEmits>, params: Record<string, any>, evnt: Event | null) {
+      const $xeGantt = this
+
+      $xeGantt.$emit(type, createEvent(evnt, { $grid: null, $gantt: $xeGantt }, params))
+    },
+    initToolbar () {
+      const $xeGantt = this
+
+      $xeGantt.$nextTick(() => {
+        const $xeTable = $xeGantt.$refs.refTable as VxeTableConstructor & VxeTablePrivateMethods
+        const $xeToolbar = $xeGantt.$refs.refToolbar as VxeToolbarInstance
+        if ($xeTable && $xeToolbar) {
+          $xeTable.connectToolbar($xeToolbar)
+        }
+      })
+    },
+    initGanttView () {
+      const $xeGantt = this
 
-    const initGanttView = () => {
-      const $xeTable = refTable.value
-      const $ganttView = refGanttView.value
+      const $xeTable = $xeGantt.$refs.refTable as VxeTableConstructor & VxeTablePrivateMethods
+      const $ganttView = $xeGantt.$refs.refGanttView as VxeGanttViewInstance
       if ($xeTable && $ganttView) {
         $xeTable.handleConnectGanttView($ganttView)
       }
-    }
+    },
+    initPages (propKey?: 'currentPage' | 'pageSize' | 'total') {
+      const $xeGantt = this
+      const props = $xeGantt
+      const reactData = $xeGantt.reactData
 
-    const getFormData = () => {
-      const { proxyConfig } = props
-      const { formData } = reactData
-      const proxyOpts = computeProxyOpts.value
-      const formOpts = computeFormOpts.value
-      return proxyConfig && isEnableConf(proxyOpts) && proxyOpts.form ? formData : formOpts.data
-    }
-
-    const initPages = (propKey?: 'currentPage' | 'pageSize' | 'total') => {
       const { tablePage } = reactData
       const { pagerConfig } = props
-      const pagerOpts = computePagerOpts.value
+      const pagerOpts = $xeGantt.computePagerOpts
       if (pagerConfig && isEnableConf(pagerOpts)) {
         if (propKey) {
           if (pagerOpts[propKey]) {
@@ -393,16 +496,15 @@ export default defineVxeComponent({
           }
         }
       }
-    }
+    },
+    triggerPendingEvent (code: string) {
+      const $xeGantt = this
 
-    const triggerPendingEvent = (code: string) => {
-      const isActiveMsg = computeIsActiveMsg.value
-      const $xeTable = refTable.value
-      const selectRecords = $xeTable ? $xeTable.getCheckboxRecords() : []
+      const isActiveMsg = $xeGantt.computeIsActiveMsg
+      const $xeTable = $xeGantt.$refs.refTable as VxeTableConstructor & VxeTablePrivateMethods
+      const selectRecords = $xeTable.getCheckboxRecords()
       if (selectRecords.length) {
-        if ($xeTable) {
-          $xeTable.togglePendingRow(selectRecords)
-        }
+        $xeTable.togglePendingRow(selectRecords)
         $xeGantt.clearCheckboxRow()
       } else {
         if (isActiveMsg) {
@@ -411,22 +513,24 @@ export default defineVxeComponent({
           }
         }
       }
-    }
+    },
+    getRespMsg (rest: any, defaultMsg: string) {
+      const $xeGantt = this
 
-    const getRespMsg = (rest: any, defaultMsg: string) => {
-      const proxyOpts = computeProxyOpts.value
+      const proxyOpts = $xeGantt.computeProxyOpts
       const resConfigs = proxyOpts.response || proxyOpts.props || {}
       const messageProp = resConfigs.message
-      const $xeTable = refTable.value
+      const $xeTable = $xeGantt.$refs.refTable as VxeTableConstructor & VxeTablePrivateMethods
       let msg
       if (rest && messageProp) {
-        msg = XEUtils.isFunction(messageProp) ? messageProp({ data: rest, $table: $xeTable as VxeTableConstructor, $grid: null, $gantt: $xeGantt }) : XEUtils.get(rest, messageProp)
+        msg = XEUtils.isFunction(messageProp) ? messageProp({ data: rest, $table: $xeTable, $grid: null, $gantt: $xeGantt }) : XEUtils.get(rest, messageProp)
       }
       return msg || getI18n(defaultMsg)
-    }
+    },
+    handleDeleteRow (code: string, alertKey: string, callback: () => void): Promise<void> {
+      const $xeGantt = this
 
-    const handleDeleteRow = (code: string, alertKey: string, callback: () => void): Promise<void> => {
-      const isActiveMsg = computeIsActiveMsg.value
+      const isActiveMsg = $xeGantt.computeIsActiveMsg
       const selectRecords = $xeGantt.getCheckboxRecords()
       if (isActiveMsg) {
         if (selectRecords.length) {
@@ -448,13 +552,16 @@ export default defineVxeComponent({
         }
       }
       return Promise.resolve()
-    }
+    },
+    pageChangeEvent (params: VxePagerDefines.PageChangeEventParams) {
+      const $xeGantt = this
+      const props = $xeGantt
+      const reactData = $xeGantt.reactData
 
-    const pageChangeEvent: VxePagerEvents.PageChange = (params) => {
       const { proxyConfig } = props
       const { tablePage } = reactData
       const { $event, currentPage, pageSize } = params
-      const proxyOpts = computeProxyOpts.value
+      const proxyOpts = $xeGantt.computeProxyOpts
       tablePage.currentPage = currentPage
       tablePage.pageSize = pageSize
       $xeGantt.dispatchEvent('page-change', params, $event)
@@ -463,17 +570,16 @@ export default defineVxeComponent({
           $xeGantt.dispatchEvent('proxy-query', rest, $event)
         })
       }
-    }
+    },
+    handleSortEvent (params: VxeTableDefines.SortChangeEventParams) {
+      const $xeGantt = this
+      const props = $xeGantt
+      const reactData = $xeGantt.reactData
+      const $xeTable = $xeGantt.$refs.refTable as VxeTableConstructor & VxeTablePrivateMethods
 
-    const handleSortEvent: VxeTableEvents.SortChange | VxeTableEvents.ClearAllSort = (params) => {
-      const $xeTable = refTable.value
       const { proxyConfig } = props
-      if (!$xeTable) {
-        return
-      }
-      const { computeSortOpts } = $xeTable.getComputeMaps()
-      const proxyOpts = computeProxyOpts.value
-      const sortOpts = computeSortOpts.value
+      const proxyOpts = $xeGantt.computeProxyOpts
+      const sortOpts = $xeTable.computeSortOpts
       // 如果是服务端排序
       if (sortOpts.remote) {
         reactData.sortData = params.sortList
@@ -484,27 +590,28 @@ export default defineVxeComponent({
           })
         }
       }
-    }
+    },
+    sortChangeEvent (params: VxeTableDefines.SortChangeEventParams) {
+      const $xeGantt = this
 
-    const sortChangeEvent: VxeTableEvents.SortChange = (params) => {
-      handleSortEvent(params)
+      $xeGantt.handleSortEvent(params)
       $xeGantt.dispatchEvent('sort-change', params, params.$event)
-    }
+    },
+    clearAllSortEvent (params: VxeTableDefines.SortChangeEventParams) {
+      const $xeGantt = this
 
-    const clearAllSortEvent: VxeTableEvents.ClearAllSort = (params) => {
-      handleSortEvent(params)
+      $xeGantt.handleSortEvent(params)
       $xeGantt.dispatchEvent('clear-all-sort', params, params.$event)
-    }
+    },
+    handleFilterEvent (params: VxeTableDefines.ClearAllFilterEventParams) {
+      const $xeGantt = this
+      const props = $xeGantt
+      const reactData = $xeGantt.reactData
+      const $xeTable = $xeGantt.$refs.refTable as VxeTableConstructor & VxeTablePrivateMethods
 
-    const handleFilterEvent: VxeTableEvents.FilterChange | VxeTableEvents.ClearAllFilter = (params) => {
-      const $xeTable = refTable.value
       const { proxyConfig } = props
-      if (!$xeTable) {
-        return
-      }
-      const { computeFilterOpts } = $xeTable.getComputeMaps()
-      const proxyOpts = computeProxyOpts.value
-      const filterOpts = computeFilterOpts.value
+      const proxyOpts = $xeGantt.computeProxyOpts
+      const filterOpts = $xeTable.computeFilterOpts
       // 如果是服务端过滤
       if (filterOpts.remote) {
         reactData.filterData = params.filterList
@@ -515,21 +622,26 @@ export default defineVxeComponent({
           })
         }
       }
-    }
+    },
+    filterChangeEvent (params: VxeTableDefines.ClearAllFilterEventParams) {
+      const $xeGantt = this
 
-    const filterChangeEvent: VxeTableEvents.FilterChange = (params) => {
-      handleFilterEvent(params)
+      $xeGantt.handleFilterEvent(params)
       $xeGantt.dispatchEvent('filter-change', params, params.$event)
-    }
+    },
+    clearAllFilterEvent (params: VxeTableDefines.ClearAllFilterEventParams) {
+      const $xeGantt = this
 
-    const clearAllFilterEvent: VxeTableEvents.ClearAllFilter = (params) => {
-      handleFilterEvent(params)
+      $xeGantt.handleFilterEvent(params)
       $xeGantt.dispatchEvent('clear-all-filter', params, params.$event)
-    }
+    },
+    submitFormEvent (params: VxeFormDefines.SubmitEventParams) {
+      const $xeGantt = this
+      const props = $xeGantt
+      const reactData = $xeGantt.reactData
 
-    const submitFormEvent: VxeFormEvents.Submit = (params) => {
       const { proxyConfig } = props
-      const proxyOpts = computeProxyOpts.value
+      const proxyOpts = $xeGantt.computeProxyOpts
       if (reactData.tableLoading) {
         return
       }
@@ -539,35 +651,39 @@ export default defineVxeComponent({
         })
       }
       $xeGantt.dispatchEvent('form-submit', params, params.$event)
-    }
+    },
+    resetFormEvent (params: VxeFormDefines.ResetEventParams) {
+      const $xeGantt = this
+      const props = $xeGantt
 
-    const resetFormEvent: VxeFormEvents.Reset = (params) => {
-      const $xeTable = refTable.value
+      const $xeTable = $xeGantt.$refs.refTable as VxeTableConstructor & VxeTablePrivateMethods
       const { proxyConfig } = props
       const { $event } = params
-      const proxyOpts = computeProxyOpts.value
+      const proxyOpts = $xeGantt.computeProxyOpts
       if (proxyConfig && isEnableConf(proxyOpts)) {
-        if ($xeTable) {
-          $xeTable.clearScroll()
-        }
+        $xeTable.clearScroll()
         $xeGantt.commitProxy('reload').then((rest) => {
           $xeGantt.dispatchEvent('proxy-query', { ...rest, isReload: true }, $event)
         })
       }
       $xeGantt.dispatchEvent('form-reset', params, $event)
-    }
+    },
+    submitInvalidEvent (params: VxeFormDefines.SubmitInvalidEventParams) {
+      const $xeGantt = this
 
-    const submitInvalidEvent: VxeFormEvents.SubmitInvalid = (params) => {
       $xeGantt.dispatchEvent('form-submit-invalid', params, params.$event)
-    }
+    },
+    collapseEvent (params: VxeFormDefines.CollapseEventParams) {
+      const $xeGantt = this
 
-    const collapseEvent: VxeFormEvents.Collapse = (params) => {
       const { $event } = params
       $xeGantt.dispatchEvent('form-toggle-collapse', params, $event)
       $xeGantt.dispatchEvent('form-collapse', params, $event)
-    }
+    },
+    handleZoom (isMax?: boolean) {
+      const $xeGantt = this
+      const reactData = $xeGantt.reactData
 
-    const handleZoom = (isMax?: boolean) => {
       const { isZMax } = reactData
       if (isMax ? !isZMax : isZMax) {
         reactData.isZMax = !isZMax
@@ -575,66 +691,33 @@ export default defineVxeComponent({
           reactData.tZindex = nextZIndex()
         }
       }
-      return nextTick()
+      return $xeGantt.$nextTick()
         .then(() => $xeGantt.recalculate(true))
         .then(() => {
           setTimeout(() => $xeGantt.recalculate(true), 15)
           return reactData.isZMax
         })
-    }
-
-    const getFuncSlot = (optSlots: any, slotKey: string) => {
-      const funcSlot = optSlots[slotKey]
-      if (funcSlot) {
-        if (XEUtils.isString(funcSlot)) {
-          if (slots[funcSlot]) {
-            return slots[funcSlot]
-          } else {
-            errLog('vxe.error.notSlot', [funcSlot])
-          }
-        } else {
-          return funcSlot
-        }
-      }
-      return null
-    }
-
-    const getConfigSlot = (slotConfigs?: Record<string, any>) => {
-      const slotConf: Record<string, any> = {}
-      XEUtils.objectMap(slotConfigs, (slotFunc, slotKey) => {
-        if (slotFunc) {
-          if (XEUtils.isString(slotFunc)) {
-            if (slots[slotFunc]) {
-              slotConf[slotKey] = slots[slotFunc]
-            } else {
-              errLog('vxe.error.notSlot', [slotFunc])
-            }
-          } else {
-            slotConf[slotKey] = slotFunc
-          }
-        }
-      })
-      return slotConf
-    }
+    },
+    dragSplitEvent (evnt: MouseEvent) {
+      const $xeGantt = this
 
-    const dragSplitEvent = (evnt: MouseEvent) => {
-      const el = refElem.value
+      const el = $xeGantt.$refs.refElem as HTMLDivElement
       if (!el) {
         return
       }
-      const ganttContainerEl = refGanttContainer.value
+      const ganttContainerEl = $xeGantt.$refs.refGanttContainer as HTMLDivElement
       if (!ganttContainerEl) {
         return
       }
-      const tableWrapperEl = refTableWrapper.value
+      const tableWrapperEl = $xeGantt.$refs.refTableWrapper as HTMLDivElement
       if (!tableWrapperEl) {
         return
       }
-      const rsSplitLineEl = refResizableSplitTip.value
+      const rsSplitLineEl = $xeGantt.$refs.refResizableSplitTip as HTMLDivElement
       if (!rsSplitLineEl) {
         return
       }
-      const taskViewOpts = computeTaskViewOpts.value
+      const taskViewOpts = $xeGantt.computeTaskViewOpts
       const containerRect = ganttContainerEl.getBoundingClientRect()
       const rsSplitTipEl = rsSplitLineEl.children[0] as HTMLDivElement
       const disX = evnt.clientX
@@ -684,31 +767,30 @@ export default defineVxeComponent({
         rsSplitLineEl.style.display = ''
         tableWrapperEl.style.width = `${targetTableWidth}px`
         removeClass(el, 'is--split-drag')
-        const $xeTable = refTable.value
+        const $xeTable = $xeGantt.$refs.refTable as VxeTableConstructor & VxeTablePrivateMethods
         if ($xeTable) {
           $xeTable.recalculate(true)
         }
       }
       rsSplitLineEl.style.display = 'block'
       handleReStyle(evnt)
-    }
+    },
+    handleSplitLeftViewEvent () {
+      const $xeGantt = this
+      const reactData = $xeGantt.reactData
 
-    const handleSplitLeftViewEvent = () => {
       reactData.showLeftView = !reactData.showLeftView
-    }
+    },
+    handleSplitRightViewEvent () {
+      const $xeGantt = this
+      const reactData = $xeGantt.reactData
 
-    const handleSplitRightViewEvent = () => {
       reactData.showRightView = !reactData.showRightView
-    }
+    },
+    getDefaultFormData () {
+      const $xeGantt = this
 
-    const tableCompEvents: VxeTableEventProps = {}
-    tableEmits.forEach(name => {
-      const type = XEUtils.camelCase(`on-${name}`) as keyof VxeTableEventProps
-      tableCompEvents[type] = (...args: any[]) => emit(name, ...args)
-    })
-
-    const getDefaultFormData = () => {
-      const formOpts = computeFormOpts.value
+      const formOpts = $xeGantt.computeFormOpts
       if (formOpts.items) {
         const fData: any = {}
         formOpts.items.forEach(item => {
@@ -729,772 +811,939 @@ export default defineVxeComponent({
         return fData
       }
       return {}
-    }
+    },
+    initProxy () {
+      const $xeGantt = this
+      const props = $xeGantt
+      const reactData = $xeGantt.reactData
 
-    const initProxy = () => {
       const { proxyConfig, formConfig } = props
       const { proxyInited } = reactData
-      const proxyOpts = computeProxyOpts.value
-      const formOpts = computeFormOpts.value
-      if (proxyConfig && isEnableConf(proxyOpts)) {
-        if (formConfig && isEnableConf(formOpts) && proxyOpts.form && formOpts.items) {
-          reactData.formData = getDefaultFormData()
+      const proxyOpts = $xeGantt.computeProxyOpts
+      const formOpts = $xeGantt.computeFormOpts
+      if (proxyConfig) {
+        if (isEnableConf(formConfig) && proxyOpts.form && formOpts.items) {
+          reactData.formData = $xeGantt.getDefaultFormData()
         }
-        if (!proxyInited) {
+        if (!proxyInited && proxyOpts.autoLoad !== false) {
           reactData.proxyInited = true
-          if (proxyOpts.autoLoad !== false) {
-            nextTick().then(() => $xeGantt.commitProxy('initial')).then((rest) => {
-              dispatchEvent('proxy-query', { ...rest, isInited: true }, new Event('initial'))
-            })
-          }
+          $xeGantt.$nextTick().then(() => $xeGantt.commitProxy('initial')).then((rest) => {
+            $xeGantt.dispatchEvent('proxy-query', { ...rest, isInited: true }, new Event('initial'))
+          })
         }
       }
-    }
+    },
+    handleGlobalKeydownEvent (evnt: KeyboardEvent) {
+      const $xeGantt = this
+      const reactData = $xeGantt.reactData
 
-    const handleGlobalKeydownEvent = (evnt: KeyboardEvent) => {
-      const zoomOpts = computeZoomOpts.value
+      const zoomOpts = $xeGantt.computeZoomOpts
       const isEsc = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE)
       if (isEsc && reactData.isZMax && zoomOpts.escRestore !== false) {
         $xeGantt.triggerZoomEvent(evnt)
       }
-    }
-
-    const dispatchEvent = (type: ValueOf<VxeGanttEmits>, params: Record<string, any>, evnt: Event | null) => {
-      emit(type, createEvent(evnt, { $grid: null, $gantt: $xeGantt }, params))
-    }
+    },
+    getEl () {
+      const $xeGantt = this
 
-    const ganttMethods: GanttMethods = {
-      dispatchEvent,
-      getEl () {
-        return refElem.value as HTMLDivElement
-      },
-      /**
+      return $xeGantt.$refs.refElem as HTMLDivElement
+    },
+    /**
        * 提交指令，支持 code 或 button
        * @param {String/Object} code 字符串或对象
        */
-      commitProxy (proxyTarget: string | VxeToolbarPropTypes.ButtonConfig, ...args: any[]) {
-        const { proxyConfig, toolbarConfig, pagerConfig, editRules, validConfig } = props
-        const { tablePage } = reactData
-        const isActiveMsg = computeIsActiveMsg.value
-        const isRespMsg = computeIsRespMsg.value
-        const proxyOpts = computeProxyOpts.value
-        const pagerOpts = computePagerOpts.value
-        const toolbarOpts = computeToolbarOpts.value
-        const { beforeQuery, afterQuery, beforeDelete, afterDelete, beforeSave, afterSave, ajax = {} } = proxyOpts
-        const resConfigs = proxyOpts.response || proxyOpts.props || {}
-        const $xeTable = refTable.value
-        if (!$xeTable) {
-          return nextTick()
-        }
-        let formData = getFormData()
-        let button: VxeToolbarPropTypes.ButtonConfig | null = null
-        let code: string | null = null
-        if (XEUtils.isString(proxyTarget)) {
-          const { buttons } = toolbarOpts
-          const matchObj = toolbarConfig && isEnableConf(toolbarOpts) && buttons ? XEUtils.findTree(buttons, (item) => item.code === proxyTarget, { children: 'dropdowns' }) : null
-          button = matchObj ? matchObj.item : null
-          code = proxyTarget
-        } else {
-          button = proxyTarget
-          code = button.code as string
-        }
-        const btnParams = button ? button.params : null
-        switch (code) {
-          case 'insert':
-            return $xeTable.insert({})
-          case 'insert_edit':
-            return $xeTable.insert({}).then(({ row }) => $xeTable.setEditRow(row, true))
-
-            // 已废弃
-          case 'insert_actived':
-            return $xeTable.insert({}).then(({ row }) => $xeTable.setEditRow(row, true))
-            // 已废弃
-
-          case 'mark_cancel':
-            triggerPendingEvent(code)
-            break
-          case 'remove':
-            return handleDeleteRow(code, 'vxe.grid.removeSelectRecord', () => $xeTable.removeCheckboxRow())
-          case 'import':
-            $xeTable.importData(btnParams)
-            break
-          case 'open_import':
-            $xeTable.openImport(btnParams)
-            break
-          case 'export':
-            $xeTable.exportData(btnParams)
-            break
-          case 'open_export':
-            $xeTable.openExport(btnParams)
-            break
-          case 'reset_custom':
-            return $xeTable.resetCustom(true)
-          case 'initial':
-          case 'reload':
-          case 'query': {
-            const ajaxMethods = ajax.query
-            const querySuccessMethods = ajax.querySuccess
-            const queryErrorMethods = ajax.queryError
-            if (ajaxMethods) {
-              const isInited = code === 'initial'
-              const isReload = code === 'reload'
-              if (!isInited && reactData.tableLoading) {
-                return nextTick()
+    commitProxy (proxyTarget: string | VxeToolbarPropTypes.ButtonConfig, ...args: any[]): Promise<any> {
+      const $xeGantt = this
+      const props = $xeGantt
+      const reactData = $xeGantt.reactData
+
+      /**
+       * 已废弃
+       * @deprecated
+       */
+      const toolbar = (props as any).toolbar
+
+      const { proxyConfig, toolbarConfig, pagerConfig, editRules, validConfig } = props
+      const { tablePage } = reactData
+      const isActiveMsg = $xeGantt.computeIsActiveMsg
+      const isRespMsg = $xeGantt.computeIsRespMsg
+      const proxyOpts = $xeGantt.computeProxyOpts
+      const pagerOpts = $xeGantt.computePagerOpts
+      const toolbarOpts = $xeGantt.computeToolbarOpts
+      const { beforeQuery, afterQuery, beforeDelete, afterDelete, beforeSave, afterSave, ajax = {} } = proxyOpts
+      const resConfigs = proxyOpts.response || proxyOpts.props || {}
+      const $xeTable = $xeGantt.$refs.refTable as VxeTableConstructor & VxeTablePrivateMethods
+      let formData = $xeGantt.getFormData()
+      let button: VxeToolbarPropTypes.ButtonConfig | null = null
+      let code: string | null = null
+      if (XEUtils.isString(proxyTarget)) {
+        const { buttons } = toolbarOpts
+        const matchObj = (toolbarConfig || toolbar) && isEnableConf(toolbarOpts) && buttons ? XEUtils.findTree(buttons, (item) => item.code === proxyTarget, { children: 'dropdowns' }) : null
+        button = matchObj ? matchObj.item as any : null
+        code = proxyTarget
+      } else {
+        button = proxyTarget
+        code = button.code as string
+      }
+      const btnParams = button ? button.params : null
+      switch (code) {
+        case 'insert':
+          return $xeTable.insert({})
+        case 'insert_edit':
+          return $xeTable.insert({}).then(({ row }) => $xeTable.setEditRow(row, true))
+
+          // 已废弃
+        case 'insert_actived':
+          return $xeTable.insert({}).then(({ row }) => $xeTable.setEditRow(row, true))
+          // 已废弃
+
+        case 'mark_cancel':
+          $xeGantt.triggerPendingEvent(code)
+          break
+        case 'remove':
+          return $xeGantt.handleDeleteRow(code, 'vxe.grid.removeSelectRecord', () => $xeTable.removeCheckboxRow())
+        case 'import':
+          $xeTable.importData(btnParams)
+          break
+        case 'open_import':
+          $xeTable.openImport(btnParams)
+          break
+        case 'export':
+          $xeTable.exportData(btnParams)
+          break
+        case 'open_export':
+          $xeTable.openExport(btnParams)
+          break
+        case 'reset_custom':
+          $xeTable.resetCustom(true)
+          break
+        case 'initial':
+        case 'reload':
+        case 'query': {
+          const ajaxMethods = ajax.query
+          const querySuccessMethods = ajax.querySuccess
+          const queryErrorMethods = ajax.queryError
+          if (ajaxMethods) {
+            const isInited = code === 'initial'
+            const isReload = code === 'reload'
+            if (!isInited && reactData.tableLoading) {
+              return $xeGantt.$nextTick()
+            }
+            let sortList: any[] = []
+            let filterList: VxeTableDefines.FilterCheckedParams[] = []
+            let pageParams: any = {}
+            if (pagerConfig) {
+              if (isInited || isReload) {
+                tablePage.currentPage = 1
               }
-              let sortList: any[] = []
-              let filterList: VxeTableDefines.FilterCheckedParams[] = []
-              let pageParams: any = {}
-              if (pagerConfig) {
-                if (isInited || isReload) {
-                  // 重置分页
-                  tablePage.currentPage = 1
-                }
-                if (isEnableConf(pagerOpts)) {
-                  pageParams = { ...tablePage }
-                }
+              if (isEnableConf(pagerConfig)) {
+                pageParams = { ...tablePage }
               }
-              if (isInited) {
-                // 重置代理表单数据
-                if (proxyConfig && isEnableConf(proxyOpts) && proxyOpts.form) {
-                  formData = getDefaultFormData()
-                  reactData.formData = formData
-                }
-                if ($xeTable) {
-                  const tableInternalData = $xeTable.internalData
-                  const { tableFullColumn, fullColumnFieldData } = tableInternalData
-                  const { computeSortOpts } = $xeTable.getComputeMaps()
-                  const sortOpts = computeSortOpts.value
-                  let defaultSort = sortOpts.defaultSort
-                  tableFullColumn.forEach((column) => {
-                    column.order = null
-                  })
-                  // 如果使用默认排序
-                  if (defaultSort) {
-                    if (!XEUtils.isArray(defaultSort)) {
-                      defaultSort = [defaultSort]
-                    }
-                    sortList = defaultSort.map((item) => {
-                      const { field, order } = item
-                      const colRest = fullColumnFieldData[field]
-                      if (colRest) {
-                        const column = colRest.column
-                        if (column) {
-                          column.order = order
-                        }
-                      }
-                      return {
-                        field,
-                        property: field,
-                        order
-                      }
-                    })
+            }
+            if (isInited) {
+              // 重置代理表单数据
+              if (proxyConfig && isEnableConf(proxyOpts) && proxyOpts.form) {
+                formData = $xeGantt.getDefaultFormData()
+                reactData.formData = formData
+              }
+              if ($xeTable) {
+                const tableInternalData = $xeTable as unknown as TableInternalData
+                const { tableFullColumn, fullColumnFieldData } = tableInternalData
+                const sortOpts = $xeTable.computeSortOpts
+                let defaultSort = sortOpts.defaultSort
+                tableFullColumn.forEach((column) => {
+                  column.order = null
+                })
+                // 如果使用默认排序
+                if (defaultSort) {
+                  if (!XEUtils.isArray(defaultSort)) {
+                    defaultSort = [defaultSort]
                   }
+                  sortList = defaultSort.map((item) => {
+                    const { field, order } = item
+                    const colRest = fullColumnFieldData[field]
+                    if (colRest) {
+                      const column = colRest.column
+                      if (column) {
+                        column.order = order
+                      }
+                    }
+                    return {
+                      field,
+                      property: field,
+                      order
+                    }
+                  })
+                }
+                filterList = $xeTable.getCheckedFilters()
+              }
+            } else {
+              if ($xeTable) {
+                if (isReload) {
+                  $xeTable.clearAll()
+                } else {
+                  sortList = $xeTable.getSortColumns()
                   filterList = $xeTable.getCheckedFilters()
                 }
-              } else {
-                if ($xeTable) {
-                  if (isReload) {
-                    $xeTable.clearAll()
+              }
+            }
+            const commitParams = {
+              $table: $xeTable,
+              $grid: null,
+              $gantt: $xeGantt,
+              code,
+              button,
+              isInited,
+              isReload,
+              page: pageParams,
+              sort: sortList.length ? sortList[0] : {},
+              sorts: sortList,
+              filters: filterList,
+              form: formData,
+              options: ajaxMethods
+            }
+            reactData.sortData = sortList
+            reactData.filterData = filterList
+            reactData.tableLoading = true
+            const applyArgs = [commitParams].concat(args)
+            return Promise.resolve((beforeQuery || ajaxMethods)(...applyArgs))
+              .then(rest => {
+                let tableData: any[] = []
+                reactData.tableLoading = false
+                if (rest) {
+                  if (pagerConfig && isEnableConf(pagerOpts)) {
+                    const totalProp = resConfigs.total
+                    const total = (XEUtils.isFunction(totalProp) ? totalProp({ data: rest, $table: $xeTable, $grid: null, $gantt: $xeGantt }) : XEUtils.get(rest, totalProp || 'page.total')) || 0
+                    tablePage.total = XEUtils.toNumber(total)
+                    const resultProp = resConfigs.result
+                    tableData = (XEUtils.isFunction(resultProp) ? resultProp({ data: rest, $table: $xeTable, $grid: null, $gantt: $xeGantt }) : XEUtils.get(rest, resultProp || 'result')) || []
+                    // 检验当前页码，不能超出当前最大页数
+                    const pageCount = Math.max(Math.ceil(total / tablePage.pageSize), 1)
+                    if (tablePage.currentPage > pageCount) {
+                      tablePage.currentPage = pageCount
+                    }
                   } else {
-                    sortList = $xeTable.getSortColumns()
-                    filterList = $xeTable.getCheckedFilters()
+                    const listProp = resConfigs.list
+                    tableData = (listProp ? (XEUtils.isFunction(listProp) ? listProp({ data: rest, $table: $xeTable, $grid: null, $gantt: $xeGantt }) : XEUtils.get(rest, listProp)) : rest) || []
                   }
                 }
-              }
-              const commitParams = {
-                $table: $xeTable,
-                $grid: null,
-                $gantt: $xeGantt,
-                code,
-                button,
-                isInited,
-                isReload,
-                page: pageParams,
-                sort: sortList.length ? sortList[0] : {},
-                sorts: sortList,
-                filters: filterList,
-                form: formData,
-                options: ajaxMethods
-              }
-              reactData.sortData = sortList
-              reactData.filterData = filterList
-              reactData.tableLoading = true
-              return Promise.resolve((beforeQuery || ajaxMethods)(commitParams, ...args))
-                .then(rest => {
-                  let tableData: any[] = []
-                  reactData.tableLoading = false
-                  if (rest) {
-                    if (pagerConfig && isEnableConf(pagerOpts)) {
-                      const totalProp = resConfigs.total
-                      const total = (XEUtils.isFunction(totalProp) ? totalProp({ data: rest, $table: $xeTable, $grid: null, $gantt: $xeGantt }) : XEUtils.get(rest, totalProp || 'page.total')) || 0
-                      tablePage.total = XEUtils.toNumber(total)
-                      const resultProp = resConfigs.result
-                      tableData = (XEUtils.isFunction(resultProp) ? resultProp({ data: rest, $table: $xeTable, $grid: null, $gantt: $xeGantt }) : XEUtils.get(rest, resultProp || 'result')) || []
-                      // 检验当前页码，不能超出当前最大页数
-                      const pageCount = Math.max(Math.ceil(total / tablePage.pageSize), 1)
-                      if (tablePage.currentPage > pageCount) {
-                        tablePage.currentPage = pageCount
+                if ($xeTable as any) {
+                  $xeTable.loadData(tableData)
+                } else {
+                  $xeTable.$nextTick(() => {
+                    if ($xeTable) {
+                      $xeTable.loadData(tableData)
+                    }
+                  })
+                }
+                if (afterQuery) {
+                  afterQuery(...applyArgs)
+                }
+                if (querySuccessMethods) {
+                  querySuccessMethods({ ...commitParams, response: rest })
+                }
+                return { status: true }
+              }).catch((rest) => {
+                reactData.tableLoading = false
+                if (queryErrorMethods) {
+                  queryErrorMethods({ ...commitParams, response: rest })
+                }
+                return { status: false }
+              })
+          } else {
+            errLog('vxe.error.notFunc', ['proxy-config.ajax.query'])
+          }
+          break
+        }
+        case 'delete': {
+          const ajaxMethods = ajax.delete
+          const deleteSuccessMethods = ajax.deleteSuccess
+          const deleteErrorMethods = ajax.deleteError
+          if (ajaxMethods) {
+            const selectRecords = $xeTable.getCheckboxRecords()
+            const removeRecords = selectRecords.filter((row) => !$xeTable.isInsertByRow(row))
+            const body = { removeRecords }
+            const commitParams = {
+              $table: $xeTable,
+              $grid: null,
+              $gantt: $xeGantt,
+              code,
+              button,
+              body,
+              form: formData,
+              options: ajaxMethods
+            }
+            const applyArgs = [commitParams].concat(args)
+            if (selectRecords.length) {
+              return $xeGantt.handleDeleteRow(code, 'vxe.grid.deleteSelectRecord', () => {
+                if (!removeRecords.length) {
+                  return $xeTable.remove(selectRecords)
+                }
+                reactData.tableLoading = true
+                return Promise.resolve((beforeDelete || ajaxMethods)(...applyArgs))
+                  .then(rest => {
+                    reactData.tableLoading = false
+                    $xeTable.setPendingRow(removeRecords, false)
+                    if (isRespMsg) {
+                      // 检测弹窗模块
+                      if (!VxeUI.modal) {
+                        errLog('vxe.error.reqModule', ['Modal'])
                       }
+                      VxeUI.modal.message({ content: $xeGantt.getRespMsg(rest, 'vxe.grid.delSuccess'), status: 'success' })
+                    }
+                    if (afterDelete) {
+                      afterDelete(...applyArgs)
                     } else {
-                      const listProp = resConfigs.list
-                      tableData = (listProp ? (XEUtils.isFunction(listProp) ? listProp({ data: rest, $table: $xeTable, $grid: null, $gantt: $xeGantt }) : XEUtils.get(rest, listProp)) : rest) || []
+                      $xeGantt.commitProxy('query')
                     }
-                  }
-                  if ($xeTable as any) {
-                    $xeTable.loadData(tableData)
-                  } else {
-                    nextTick(() => {
-                      if ($xeTable) {
-                        $xeTable.loadData(tableData)
+                    if (deleteSuccessMethods) {
+                      deleteSuccessMethods({ ...commitParams, response: rest })
+                    }
+                    return { status: true }
+                  })
+                  .catch(rest => {
+                    reactData.tableLoading = false
+                    if (isRespMsg) {
+                      // 检测弹窗模块
+                      if (!VxeUI.modal) {
+                        errLog('vxe.error.reqModule', ['Modal'])
                       }
-                    })
-                  }
-                  if (afterQuery) {
-                    afterQuery(commitParams, ...args)
-                  }
-                  if (querySuccessMethods) {
-                    querySuccessMethods({ ...commitParams, response: rest })
-                  }
-                  return { status: true }
-                }).catch((rest) => {
-                  reactData.tableLoading = false
-                  if (queryErrorMethods) {
-                    queryErrorMethods({ ...commitParams, response: rest })
-                  }
-                  return { status: false }
-                })
+                      VxeUI.modal.message({ id: code, content: $xeGantt.getRespMsg(rest, 'vxe.grid.operError'), status: 'error' })
+                    }
+                    if (deleteErrorMethods) {
+                      deleteErrorMethods({ ...commitParams, response: rest })
+                    }
+                    return { status: false }
+                  })
+              })
             } else {
-              errLog('vxe.error.notFunc', ['proxy-config.ajax.query'])
+              if (isActiveMsg) {
+                // 检测弹窗模块
+                if (!VxeUI.modal) {
+                  errLog('vxe.error.reqModule', ['Modal'])
+                }
+                VxeUI.modal.message({ id: code, content: getI18n('vxe.grid.selectOneRecord'), status: 'warning' })
+              }
             }
-            break
+          } else {
+            errLog('vxe.error.notFunc', ['proxy-config.ajax.delete'])
           }
-          case 'delete': {
-            const ajaxMethods = ajax.delete
-            const deleteSuccessMethods = ajax.deleteSuccess
-            const deleteErrorMethods = ajax.deleteError
-            if (ajaxMethods) {
-              const selectRecords = $xeGantt.getCheckboxRecords()
-              const removeRecords = selectRecords.filter(row => !$xeTable.isInsertByRow(row))
-              const body = { removeRecords }
-              const commitParams = {
-                $table: $xeTable,
-                $grid: null,
-                $gantt: $xeGantt,
-                code,
-                button,
-                body,
-                form: formData,
-                options: ajaxMethods
+          break
+        }
+        case 'save': {
+          const ajaxMethods = ajax.save
+          const saveSuccessMethods = ajax.saveSuccess
+          const saveErrorMethods = ajax.saveError
+          if (ajaxMethods) {
+            const body = $xeGantt.getRecordset()
+            const { insertRecords, removeRecords, updateRecords, pendingRecords } = body
+            const commitParams = {
+              $table: $xeTable,
+              $grid: null,
+              $gantt: $xeGantt,
+              code,
+              button,
+              body,
+              form: formData,
+              options: ajaxMethods
+            }
+            const applyArgs = [commitParams].concat(args)
+            // 排除掉新增且标记为删除的数据
+            if (insertRecords.length) {
+              body.pendingRecords = pendingRecords.filter((row) => insertRecords.indexOf(row) === -1)
+            }
+            // 排除已标记为删除的数据
+            if (pendingRecords.length) {
+              body.insertRecords = insertRecords.filter((row) => pendingRecords.indexOf(row) === -1)
+            }
+            let restPromise: Promise<any> = Promise.resolve()
+            if (editRules) {
+              // 只校验新增和修改的数据
+              restPromise = $xeGantt[validConfig && validConfig.msgMode === 'full' ? 'fullValidate' : 'validate'](body.insertRecords.concat(updateRecords))
+            }
+            return restPromise.then((errMap: any) => {
+              if (errMap) {
+                // 如果校验不通过
+                return
               }
-              if (selectRecords.length) {
-                return handleDeleteRow(code, 'vxe.grid.deleteSelectRecord', () => {
-                  if (!removeRecords.length) {
-                    return $xeTable.remove(selectRecords)
-                  }
-                  reactData.tableLoading = true
-                  return Promise.resolve((beforeDelete || ajaxMethods)(commitParams, ...args))
-                    .then(rest => {
-                      reactData.tableLoading = false
-                      $xeTable.setPendingRow(removeRecords, false)
-                      if (isRespMsg) {
-                        if (VxeUI.modal) {
-                          VxeUI.modal.message({ content: getRespMsg(rest, 'vxe.grid.delSuccess'), status: 'success' })
-                        }
-                      }
-                      if (afterDelete) {
-                        afterDelete(commitParams, ...args)
-                      } else {
-                        $xeGantt.commitProxy('query')
-                      }
-                      if (deleteSuccessMethods) {
-                        deleteSuccessMethods({ ...commitParams, response: rest })
-                      }
-                      return { status: true }
-                    })
-                    .catch(rest => {
-                      reactData.tableLoading = false
-                      if (isRespMsg) {
-                        if (VxeUI.modal) {
-                          VxeUI.modal.message({ id: code, content: getRespMsg(rest, 'vxe.grid.operError'), status: 'error' })
-                        }
+              if (body.insertRecords.length || removeRecords.length || updateRecords.length || body.pendingRecords.length) {
+                reactData.tableLoading = true
+                return Promise.resolve((beforeSave || ajaxMethods)(...applyArgs))
+                  .then(rest => {
+                    reactData.tableLoading = false
+                    $xeTable.clearPendingRow()
+                    if (isRespMsg) {
+                      // 检测弹窗模块
+                      if (!VxeUI.modal) {
+                        errLog('vxe.error.reqModule', ['Modal'])
                       }
-                      if (deleteErrorMethods) {
-                        deleteErrorMethods({ ...commitParams, response: rest })
+                      VxeUI.modal.message({ content: $xeGantt.getRespMsg(rest, 'vxe.grid.saveSuccess'), status: 'success' })
+                    }
+                    if (afterSave) {
+                      afterSave(...applyArgs)
+                    } else {
+                      $xeGantt.commitProxy('query')
+                    }
+                    if (saveSuccessMethods) {
+                      saveSuccessMethods({ ...commitParams, response: rest })
+                    }
+                    return { status: true }
+                  })
+                  .catch(rest => {
+                    reactData.tableLoading = false
+                    if (isRespMsg) {
+                      // 检测弹窗模块
+                      if (!VxeUI.modal) {
+                        errLog('vxe.error.reqModule', ['Modal'])
                       }
-                      return { status: false }
-                    })
-                })
-              } else {
-                if (isActiveMsg) {
-                  if (VxeUI.modal) {
-                    VxeUI.modal.message({ id: code, content: getI18n('vxe.grid.selectOneRecord'), status: 'warning' })
+                      VxeUI.modal.message({ id: code, content: $xeGantt.getRespMsg(rest, 'vxe.grid.operError'), status: 'error' })
+                    }
+                    if (saveErrorMethods) {
+                      saveErrorMethods({ ...commitParams, response: rest })
+                    }
+                    return { status: false }
+                  })
+              } else {
+                if (isActiveMsg) {
+                  // 检测弹窗模块
+                  if (!VxeUI.modal) {
+                    errLog('vxe.error.reqModule', ['Modal'])
                   }
+                  VxeUI.modal.message({ id: code, content: getI18n('vxe.grid.dataUnchanged'), status: 'info' })
                 }
               }
-            } else {
-              errLog('vxe.error.notFunc', ['proxy-config.ajax.delete'])
-            }
-            break
+            })
+          } else {
+            errLog('vxe.error.notFunc', ['proxy-config.ajax.save'])
           }
-          case 'save': {
-            const ajaxMethods = ajax.save
-            const saveSuccessMethods = ajax.saveSuccess
-            const saveErrorMethods = ajax.saveError
-            if (ajaxMethods) {
-              const body = $xeTable.getRecordset()
-              const { insertRecords, removeRecords, updateRecords, pendingRecords } = body
-              const commitParams = {
-                $table: $xeTable,
-                $grid: null,
-                $gantt: $xeGantt,
-                code,
-                button,
-                body,
-                form: formData,
-                options: ajaxMethods
-              }
-              // 排除掉新增且标记为删除的数据
-              if (insertRecords.length) {
-                body.pendingRecords = pendingRecords.filter((row) => $xeTable.findRowIndexOf(insertRecords, row) === -1)
-              }
-              // 排除已标记为删除的数据
-              if (pendingRecords.length) {
-                body.insertRecords = insertRecords.filter((row) => $xeTable.findRowIndexOf(pendingRecords, row) === -1)
-              }
-              let restPromise: Promise<any> = Promise.resolve()
-              if (editRules) {
-                // 只校验新增和修改的数据
-                restPromise = $xeTable[validConfig && validConfig.msgMode === 'full' ? 'fullValidate' : 'validate'](body.insertRecords.concat(updateRecords))
-              }
-              return restPromise.then((errMap) => {
-                if (errMap) {
-                  // 如果校验不通过
-                  return
-                }
-                if (body.insertRecords.length || removeRecords.length || updateRecords.length || body.pendingRecords.length) {
-                  reactData.tableLoading = true
-                  return Promise.resolve((beforeSave || ajaxMethods)(commitParams, ...args))
-                    .then(rest => {
-                      reactData.tableLoading = false
-                      $xeTable.clearPendingRow()
-                      if (isRespMsg) {
-                        if (VxeUI.modal) {
-                          VxeUI.modal.message({ content: getRespMsg(rest, 'vxe.grid.saveSuccess'), status: 'success' })
-                        }
-                      }
-                      if (afterSave) {
-                        afterSave(commitParams, ...args)
-                      } else {
-                        $xeGantt.commitProxy('query')
-                      }
-                      if (saveSuccessMethods) {
-                        saveSuccessMethods({ ...commitParams, response: rest })
-                      }
-                      return { status: true }
-                    })
-                    .catch(rest => {
-                      reactData.tableLoading = false
-                      if (isRespMsg) {
-                        if (VxeUI.modal) {
-                          VxeUI.modal.message({ id: code, content: getRespMsg(rest, 'vxe.grid.operError'), status: 'error' })
-                        }
-                      }
-                      if (saveErrorMethods) {
-                        saveErrorMethods({ ...commitParams, response: rest })
-                      }
-                      return { status: false }
-                    })
-                } else {
-                  if (isActiveMsg) {
-                    if (VxeUI.modal) {
-                      VxeUI.modal.message({ id: code, content: getI18n('vxe.grid.dataUnchanged'), status: 'info' })
-                    }
-                  }
-                }
-              })
+          break
+        }
+        default: {
+          const gCommandOpts = commands.get(code)
+          if (gCommandOpts) {
+            const tCommandMethod = gCommandOpts.tableCommandMethod || gCommandOpts.commandMethod
+            if (tCommandMethod) {
+              tCommandMethod({ code, button, $grid: null, $table: $xeTable, $gantt: $xeGantt }, ...args)
             } else {
-              errLog('vxe.error.notFunc', ['proxy-config.ajax.save'])
+              errLog('vxe.error.notCommands', [code])
             }
-            break
           }
-          default: {
-            const gCommandOpts = commands.get(code)
-            if (gCommandOpts) {
-              const tCommandMethod = gCommandOpts.tableCommandMethod || gCommandOpts.commandMethod
-              if (tCommandMethod) {
-                tCommandMethod({ code, button, $table: $xeTable, $grid: null, $gantt: $xeGantt }, ...args)
-              } else {
-                errLog('vxe.error.notCommands', [code])
-              }
-            }
-          }
-        }
-        return nextTick()
-      },
-      getParams () {
-        return props.params
-      },
-      zoom () {
-        if (reactData.isZMax) {
-          return $xeGantt.revert()
-        }
-        return $xeGantt.maximize()
-      },
-      isMaximized () {
-        return reactData.isZMax
-      },
-      maximize () {
-        return handleZoom(true)
-      },
-      revert () {
-        return handleZoom()
-      },
-      getFormData,
-      getFormItems (itemIndex?: number): any {
-        const formOpts = computeFormOpts.value
-        const { formConfig } = props
-        const { items } = formOpts
-        const itemList: VxeFormItemProps[] = []
-        XEUtils.eachTree(formConfig && isEnableConf(formOpts) && items ? items : [], item => {
-          itemList.push(item)
-        }, { children: 'children' })
-        return XEUtils.isUndefined(itemIndex) ? itemList : itemList[itemIndex]
-      },
-      resetForm () {
-        const $form = refForm.value
-        if ($form) {
-          return $form.reset()
-        }
-        return nextTick()
-      },
-      validateForm () {
-        const $form = refForm.value
-        if ($form) {
-          return $form.validate()
-        }
-        return nextTick()
-      },
-      validateFormField (field) {
-        const $form = refForm.value
-        if ($form) {
-          return $form.validateField(field)
         }
-        return nextTick()
-      },
-      clearFormValidate (field) {
-        const $form = refForm.value
-        if ($form) {
-          return $form.clearValidate(field)
-        }
-        return nextTick()
-      },
-      homePage () {
-        const { tablePage } = reactData
-        tablePage.currentPage = 1
-        return nextTick()
-      },
-      homePageByEvent (evnt) {
-        const $pager = refPager.value
-        if ($pager) {
-          $pager.homePageByEvent(evnt)
+      }
+      return $xeGantt.$nextTick()
+    },
+    getParams () {
+      const $xeGantt = this
+      const props = $xeGantt
+
+      return props.params
+    },
+    zoom () {
+      const $xeGantt = this
+      const reactData = $xeGantt.reactData
+
+      if (reactData.isZMax) {
+        return $xeGantt.revert()
+      }
+      return $xeGantt.maximize()
+    },
+    isMaximized () {
+      const $xeGantt = this
+      const reactData = $xeGantt.reactData
+
+      return reactData.isZMax
+    },
+    maximize () {
+      const $xeGantt = this
+
+      return $xeGantt.handleZoom(true)
+    },
+    revert () {
+      const $xeGantt = this
+
+      return $xeGantt.handleZoom()
+    },
+    getFormData () {
+      const $xeGantt = this
+      const props = $xeGantt
+      const reactData = $xeGantt.reactData
+
+      const { proxyConfig } = props
+      const { formData } = reactData
+      const proxyOpts = $xeGantt.computeProxyOpts
+      const formOpts = $xeGantt.computeFormOpts
+      return proxyConfig && isEnableConf(proxyOpts) && proxyOpts.form ? formData : formOpts.data
+    },
+    getFormItems (itemIndex?: number): any {
+      const $xeGantt = this
+      const props = $xeGantt
+
+      const formOpts = $xeGantt.computeFormOpts
+      const { formConfig } = props
+      const { items } = formOpts
+      const itemList: VxeFormItemProps[] = []
+      XEUtils.eachTree(formConfig && isEnableConf(formOpts) && items ? items : [], item => {
+        itemList.push(item)
+      }, { children: 'children' })
+      return XEUtils.isUndefined(itemIndex) ? itemList : itemList[itemIndex]
+    },
+    resetForm () {
+      const $xeGantt = this
+
+      const $form = $xeGantt.$refs.refForm as VxeFormInstance
+      if ($form) {
+        return $form.reset()
+      }
+      return $xeGantt.$nextTick()
+    },
+    validateForm () {
+      const $xeGantt = this
+
+      const $form = $xeGantt.$refs.refForm as VxeFormInstance
+      if ($form) {
+        return $form.validate()
+      }
+      return $xeGantt.$nextTick()
+    },
+    validateFormField (field: VxeFormItemPropTypes.Field | VxeFormItemPropTypes.Field[] | VxeFormDefines.ItemInfo | VxeFormDefines.ItemInfo[] | null) {
+      const $xeGantt = this
+
+      const $form = $xeGantt.$refs.refForm as VxeFormInstance
+      if ($form) {
+        return $form.validateField(field)
+      }
+      return $xeGantt.$nextTick()
+    },
+    clearFormValidate (field?: VxeFormItemPropTypes.Field | VxeFormItemPropTypes.Field[] | VxeFormDefines.ItemInfo | VxeFormDefines.ItemInfo[] | null) {
+      const $xeGantt = this
+
+      const $form = $xeGantt.$refs.refForm as VxeFormInstance
+      if ($form) {
+        return $form.clearValidate(field)
+      }
+      return $xeGantt.$nextTick()
+    },
+    homePage () {
+      const $xeGantt = this
+      const reactData = $xeGantt.reactData
+
+      const { tablePage } = reactData
+      tablePage.currentPage = 1
+      return $xeGantt.$nextTick()
+    },
+    homePageByEvent (evnt: Event) {
+      const $xeGantt = this
+
+      const $pager = $xeGantt.$refs.refPager as VxePagerInstance
+      if ($pager) {
+        $pager.homePageByEvent(evnt)
+      }
+    },
+    endPage () {
+      const $xeGantt = this
+      const reactData = $xeGantt.reactData
+
+      const { tablePage } = reactData
+      const pageCount = $xeGantt.computePageCount
+      tablePage.currentPage = pageCount
+      return $xeGantt.$nextTick()
+    },
+    endPageByEvent (evnt: Event) {
+      const $xeGantt = this
+
+      const $pager = $xeGantt.$refs.refPager as VxePagerInstance
+      if ($pager) {
+        $pager.endPageByEvent(evnt)
+      }
+    },
+    setCurrentPage (currentPage: number | string | null | undefined) {
+      const $xeGantt = this
+      const reactData = $xeGantt.reactData
+
+      const { tablePage } = reactData
+      const pageCount = $xeGantt.computePageCount
+      tablePage.currentPage = Math.min(pageCount, Math.max(1, XEUtils.toNumber(currentPage)))
+      return $xeGantt.$nextTick()
+    },
+    setCurrentPageByEvent (evnt: Event, currentPage: number | string | null | undefined) {
+      const $xeGantt = this
+
+      const $pager = $xeGantt.$refs.refPager as VxePagerInstance
+      if ($pager) {
+        $pager.setCurrentPageByEvent(evnt, currentPage)
+      }
+    },
+    setPageSize (pageSize: number | string | null | undefined) {
+      const $xeGantt = this
+      const reactData = $xeGantt.reactData
+
+      const { tablePage } = reactData
+      tablePage.pageSize = Math.max(1, XEUtils.toNumber(pageSize))
+      return $xeGantt.$nextTick()
+    },
+    setPageSizeByEvent (evnt: Event, pageSize: number | string | null | undefined) {
+      const $xeGantt = this
+
+      const $pager = $xeGantt.$refs.refPager as VxePagerInstance
+      if ($pager) {
+        $pager.setPageSizeByEvent(evnt, pageSize)
+      }
+    },
+    getProxyInfo () {
+      const $xeGantt = this
+      const props = $xeGantt
+      const $xeTable = $xeGantt.$refs.refTable as VxeTableConstructor & VxeTablePrivateMethods
+      const reactData = $xeGantt.reactData
+
+      if (props.proxyConfig) {
+        const { sortData } = reactData
+        return {
+          data: $xeTable ? $xeTable.getFullData() : [],
+          filter: reactData.filterData,
+          form: $xeGantt.getFormData(),
+          sort: sortData.length ? sortData[0] : {},
+          sorts: sortData,
+          pager: reactData.tablePage,
+          pendingRecords: $xeTable ? $xeTable.getPendingRecords() : []
         }
-      },
-      endPage () {
-        const { tablePage } = reactData
-        const pageCount = computePageCount.value
-        tablePage.currentPage = pageCount
-        return nextTick()
-      },
-      endPageByEvent (evnt) {
-        const $pager = refPager.value
-        if ($pager) {
-          $pager.endPageByEvent(evnt)
+      }
+      return null
+    },
+    refreshTaskView () {
+      const $xeGantt = this
+
+      const $ganttView = $xeGantt.$refs.refGanttView as VxeGanttViewInstance
+      if ($ganttView) {
+        return $ganttView.refreshData()
+      }
+      return $xeGantt.$nextTick()
+    },
+    callSlot (slotFunc: any, params: any, h: CreateElement, vNodes: any) {
+      const $xeGantt = this
+      const slots = $xeGantt.$scopedSlots
+
+      if (slotFunc) {
+        if (XEUtils.isString(slotFunc)) {
+          slotFunc = slots[slotFunc] || null
         }
-      },
-      setCurrentPage (currentPage) {
-        const { tablePage } = reactData
-        const pageCount = computePageCount.value
-        tablePage.currentPage = Math.min(pageCount, Math.max(1, XEUtils.toNumber(currentPage)))
-        return nextTick()
-      },
-      setCurrentPageByEvent (evnt, currentPage) {
-        const $pager = refPager.value
-        if ($pager) {
-          $pager.setCurrentPageByEvent(evnt, currentPage)
+        if (XEUtils.isFunction(slotFunc)) {
+          return getSlotVNs(slotFunc.call(this, params, h, vNodes))
         }
-      },
-      setPageSize (pageSize) {
-        const { tablePage } = reactData
-        tablePage.pageSize = Math.max(1, XEUtils.toNumber(pageSize))
-        return nextTick()
-      },
-      setPageSizeByEvent (evnt, pageSize) {
-        const $pager = refPager.value
-        if ($pager) {
-          $pager.setPageSizeByEvent(evnt, pageSize)
+      }
+      return []
+    },
+    /**
+     * 获取需要排除的高度
+     */
+    getExcludeHeight () {
+      const $xeGantt = this
+      const reactData = $xeGantt.reactData
+
+      const { isZMax } = reactData
+      const el = $xeGantt.$refs.refElem as HTMLDivElement
+      if (el) {
+        const formWrapper = $xeGantt.$refs.refFormWrapper as HTMLDivElement
+        const toolbarWrapper = $xeGantt.$refs.refToolbarWrapper as HTMLDivElement
+        const topWrapper = $xeGantt.$refs.refTopWrapper as HTMLDivElement
+        const bottomWrapper = $xeGantt.$refs.refBottomWrapper as HTMLDivElement
+        const pagerWrapper = $xeGantt.$refs.refPagerWrapper as HTMLDivElement
+        const parentEl = el.parentElement as HTMLElement
+        const parentPaddingSize = isZMax ? 0 : (parentEl ? getPaddingTopBottomSize(parentEl) : 0)
+        return parentPaddingSize + getPaddingTopBottomSize(el) + getOffsetHeight(formWrapper) + getOffsetHeight(toolbarWrapper) + getOffsetHeight(topWrapper) + getOffsetHeight(bottomWrapper) + getOffsetHeight(pagerWrapper)
+      }
+      return 0
+    },
+    getParentHeight () {
+      const $xeGantt = this
+      const reactData = $xeGantt.reactData
+
+      const el = $xeGantt.$refs.refElem as HTMLDivElement
+      if (el) {
+        const parentEl = el.parentElement as HTMLElement
+        return (reactData.isZMax ? getDomNode().visibleHeight : (parentEl ? XEUtils.toNumber(getComputedStyle(parentEl).height) : 0)) - $xeGantt.getExcludeHeight()
+      }
+      return 0
+    },
+    triggerToolbarCommitEvent (params: any, evnt: any) {
+      const $xeGantt = this
+
+      const { code } = params
+      return $xeGantt.commitProxy(params, evnt).then((rest) => {
+        if (code && rest && rest.status && ['query', 'reload', 'delete', 'save'].includes(code)) {
+          $xeGantt.dispatchEvent(code === 'delete' || code === 'save' ? `proxy-${code as 'delete' | 'save'}` : 'proxy-query', { ...rest, isReload: code === 'reload' }, evnt)
         }
-      },
-      getProxyInfo () {
-        const $xeTable = refTable.value
-        if (props.proxyConfig) {
-          const { sortData } = reactData
-          return {
-            data: $xeTable ? $xeTable.getFullData() : [],
-            filter: reactData.filterData,
-            form: getFormData(),
-            sort: sortData.length ? sortData[0] : {},
-            sorts: sortData,
-            pager: reactData.tablePage,
-            pendingRecords: $xeTable ? $xeTable.getPendingRecords() : []
-          }
+      })
+    },
+    triggerToolbarBtnEvent (button: any, evnt: any) {
+      const $xeGantt = this
+
+      $xeGantt.triggerToolbarCommitEvent(button, evnt)
+      $xeGantt.dispatchEvent('toolbar-button-click', { code: button.code, button }, evnt)
+    },
+    triggerToolbarTolEvent (tool: any, evnt: any) {
+      const $xeGantt = this
+
+      $xeGantt.triggerToolbarCommitEvent(tool, evnt)
+      $xeGantt.dispatchEvent('toolbar-tool-click', { code: tool.code, tool }, evnt)
+    },
+    triggerZoomEvent (evnt: Event) {
+      const $xeGantt = this
+      const reactData = $xeGantt.reactData
+
+      $xeGantt.zoom()
+      $xeGantt.dispatchEvent('zoom', { type: reactData.isZMax ? 'max' : 'revert' }, evnt)
+    },
+    handleTaskCellClickEvent (evnt: MouseEvent, params: VxeGanttDefines.TaskCellClickParams) {
+      const $xeGantt = this
+
+      $xeGantt.dispatchEvent('task-cell-click', params, evnt)
+    },
+    handleTaskCellDblclickEvent (evnt: MouseEvent, params: VxeGanttDefines.TaskCellClickParams) {
+      const $xeGantt = this
+
+      $xeGantt.dispatchEvent('task-cell-dblclick', params, evnt)
+    },
+    handleTaskBarClickEvent (evnt: MouseEvent, params: VxeGanttDefines.TaskCellClickParams) {
+      const $xeGantt = this
+
+      $xeGantt.dispatchEvent('task-bar-click', params, evnt)
+    },
+    handleTaskBarDblclickEvent (evnt: MouseEvent, params: VxeGanttDefines.TaskCellClickParams) {
+      const $xeGantt = this
+
+      $xeGantt.dispatchEvent('task-bar-dblclick', params, evnt)
+    },
+    loadColumn (columns: any[]) {
+      const $xeGantt = this
+      const slots = $xeGantt.$scopedSlots
+      const $xeTable = $xeGantt.$refs.refTable as VxeTableConstructor & VxeTablePrivateMethods
+
+      XEUtils.eachTree(columns, column => {
+        if (column.slots) {
+          XEUtils.each(column.slots, (func) => {
+            if (!XEUtils.isFunction(func)) {
+              if (!slots[func]) {
+                errLog('vxe.error.notSlot', [func])
+              }
+            }
+          })
         }
-        return null
-      }
-      // setProxyInfo (options) {
-      //   if (props.proxyConfig && options) {
-      //     const { pager, form } = options
-      //     const proxyOpts = computeProxyOpts.value
-      //     if (pager) {
-      //       if (pager.currentPage) {
-      //         reactData.tablePage.currentPage = Number(pager.currentPage)
-      //       }
-      //       if (pager.pageSize) {
-      //         reactData.tablePage.pageSize = Number(pager.pageSize)
-      //       }
-      //     }
-      //     if (proxyOpts.form && form) {
-      //       Object.assign(reactData.formData, form)
-      //     }
-      //   }
-      //   return nextTick()
-      // }
-    }
+      })
+      return $xeTable.loadColumn(columns)
+    },
+    reloadColumn (columns: any[]) {
+      const $xeGantt = this
+
+      $xeGantt.clearAll()
+      return $xeGantt.loadColumn(columns)
+    },
+    getConfigSlot (slotConfigs?: Record<string, any>) {
+      const $xeGantt = this
+      const slots = $xeGantt.$scopedSlots
 
-    const ganttPrivateMethods: GanttPrivateMethods = {
-      extendTableMethods,
-      callSlot (slotFunc, params) {
+      const slotConf: Record<string, any> = {}
+      XEUtils.objectMap(slotConfigs, (slotFunc, slotKey) => {
         if (slotFunc) {
           if (XEUtils.isString(slotFunc)) {
-            slotFunc = slots[slotFunc] || null
-          }
-          if (XEUtils.isFunction(slotFunc)) {
-            return getSlotVNs(slotFunc(params))
+            if (slots[slotFunc]) {
+              slotConf[slotKey] = slots[slotFunc]
+            } else {
+              errLog('vxe.error.notSlot', [slotFunc])
+            }
+          } else {
+            slotConf[slotKey] = slotFunc
           }
         }
-        return []
-      },
-      /**
-       * 获取需要排除的高度
-       */
-      getExcludeHeight () {
-        const { isZMax } = reactData
-        const el = refElem.value
-        if (el) {
-          const formWrapper = refFormWrapper.value
-          const toolbarWrapper = refToolbarWrapper.value
-          const topWrapper = refTopWrapper.value
-          const bottomWrapper = refBottomWrapper.value
-          const pagerWrapper = refPagerWrapper.value
-          const parentEl = el.parentElement as HTMLElement
-          const parentPaddingSize = isZMax ? 0 : (parentEl ? getPaddingTopBottomSize(parentEl) : 0)
-          return parentPaddingSize + getPaddingTopBottomSize(el) + getOffsetHeight(formWrapper) + getOffsetHeight(toolbarWrapper) + getOffsetHeight(topWrapper) + getOffsetHeight(bottomWrapper) + getOffsetHeight(pagerWrapper)
+      })
+      return slotConf
+    },
+    getToolbarSlots () {
+      const $xeGantt = this
+      const slots = $xeGantt.$scopedSlots
+
+      const toolbarOpts = $xeGantt.computeToolbarOpts
+      const toolbarOptSlots = toolbarOpts.slots
+      const toolbarSlots: {
+        buttons?(params: any): any
+        buttonPrefix?(params: any): any
+        buttonSuffix?(params: any): any
+        tools?(params: any): any
+        toolPrefix?(params: any): any
+        toolSuffix?(params: any): any
+      } = {}
+      if (slots.buttons && (!toolbarOptSlots || toolbarOptSlots.buttons !== 'buttons')) {
+        warnLog('vxe.error.reqProp', ['toolbar-config.slots.buttons'])
+      }
+      if (slots.tools && (!toolbarOptSlots || toolbarOptSlots.tools !== 'tools')) {
+        warnLog('vxe.error.reqProp', ['toolbar-config.slots.tools'])
+      }
+      if (toolbarOptSlots) {
+        const buttonsSlot = $xeGantt.getFuncSlot(toolbarOptSlots, 'buttons')
+        const buttonPrefixSlot = $xeGantt.getFuncSlot(toolbarOptSlots, 'buttonPrefix')
+        const buttonSuffixSlot = $xeGantt.getFuncSlot(toolbarOptSlots, 'buttonSuffix')
+        const toolsSlot = $xeGantt.getFuncSlot(toolbarOptSlots, 'tools')
+        const toolPrefixSlot = $xeGantt.getFuncSlot(toolbarOptSlots, 'toolPrefix')
+        const toolSuffixSlot = $xeGantt.getFuncSlot(toolbarOptSlots, 'toolSuffix')
+        if (buttonsSlot) {
+          toolbarSlots.buttons = buttonsSlot
         }
-        return 0
-      },
-      getParentHeight () {
-        const el = refElem.value
-        if (el) {
-          const parentEl = el.parentElement as HTMLElement
-          return (reactData.isZMax ? getDomNode().visibleHeight : (parentEl ? XEUtils.toNumber(getComputedStyle(parentEl).height) : 0)) - ganttPrivateMethods.getExcludeHeight()
+        if (buttonPrefixSlot) {
+          toolbarSlots.buttonPrefix = buttonPrefixSlot
+        }
+        if (buttonSuffixSlot) {
+          toolbarSlots.buttonSuffix = buttonSuffixSlot
+        }
+        if (toolsSlot) {
+          toolbarSlots.tools = toolsSlot
+        }
+        if (toolPrefixSlot) {
+          toolbarSlots.toolPrefix = toolPrefixSlot
+        }
+        if (toolSuffixSlot) {
+          toolbarSlots.toolSuffix = toolSuffixSlot
         }
-        return 0
-      },
-      triggerToolbarCommitEvent (params, evnt) {
-        const { code } = params
-        return $xeGantt.commitProxy(params, evnt).then((rest) => {
-          if (code && rest && rest.status && ['query', 'reload', 'delete', 'save'].includes(code)) {
-            $xeGantt.dispatchEvent(code === 'delete' || code === 'save' ? `proxy-${code as 'delete' | 'save'}` : 'proxy-query', { ...rest, isReload: code === 'reload' }, evnt)
-          }
-        })
-      },
-      triggerToolbarBtnEvent (button, evnt) {
-        $xeGantt.triggerToolbarCommitEvent(button, evnt)
-        $xeGantt.dispatchEvent('toolbar-button-click', { code: button.code, button }, evnt)
-      },
-      triggerToolbarTolEvent (tool, evnt) {
-        $xeGantt.triggerToolbarCommitEvent(tool, evnt)
-        $xeGantt.dispatchEvent('toolbar-tool-click', { code: tool.code, tool }, evnt)
-      },
-      triggerZoomEvent (evnt) {
-        $xeGantt.zoom()
-        $xeGantt.dispatchEvent('zoom', { type: reactData.isZMax ? 'max' : 'revert' }, evnt)
       }
-    }
+      return toolbarSlots
+    },
+    getFuncSlot (optSlots: any, slotKey: any) {
+      const $xeGantt = this
+      const slots = $xeGantt.$scopedSlots
 
-    Object.assign($xeGantt, ganttExtendTableMethods, ganttMethods, ganttPrivateMethods, {
-      // 检查插槽
-      loadColumn (columns: any[]) {
-        const $xeTable = refTable.value
-        XEUtils.eachTree(columns, (column) => {
-          if (column.slots) {
-            XEUtils.each(column.slots, (func) => {
-              if (!XEUtils.isFunction(func)) {
-                if (!slots[func]) {
-                  errLog('vxe.error.notSlot', [func])
-                }
-              }
-            })
+      const funcSlot = optSlots[slotKey]
+      if (funcSlot) {
+        if (XEUtils.isString(funcSlot)) {
+          if (slots[funcSlot]) {
+            return slots[funcSlot]
+          } else {
+            errLog('vxe.error.notSlot', [funcSlot])
           }
-        })
-        if ($xeTable) {
-          return $xeTable.loadColumn(columns)
+        } else {
+          return funcSlot
         }
-        return nextTick()
-      },
-      reloadColumn (columns: any[]) {
-        $xeGantt.clearAll()
-        return $xeGantt.loadColumn(columns)
       }
-    })
+      return null
+    },
 
-    /**
-     * 渲染表单
-     */
-    const renderForm = () => {
-      const { formConfig, proxyConfig } = props
+    //
+    // Render
+    //
+    renderDefaultForm (h: CreateElement) {
+      const VxeUIFormComponent = VxeUI.getComponent('VxeForm')
+
+      const $xeGantt = this
+      const props = $xeGantt
+      const slots = $xeGantt.$scopedSlots
+      const reactData = $xeGantt.reactData
+
+      const { proxyConfig, formConfig } = props
       const { formData } = reactData
-      const proxyOpts = computeProxyOpts.value
-      const formOpts = computeFormOpts.value
-      if ((formConfig && isEnableConf(formOpts)) || slots.form) {
-        let slotVNs: VNode[] = []
-        if (slots.form) {
-          slotVNs = slots.form({ $grid: null, $gantt: $xeGantt })
-        } else {
-          if (formOpts.items) {
-            const formSlots: { [key: string]: () => VNode[] } = {}
-            if (!(formOpts as any).inited) {
-              (formOpts as any).inited = true
-              const beforeItem = proxyOpts.beforeItem
-              if (proxyOpts && beforeItem) {
-                formOpts.items.forEach((item) => {
-                  beforeItem({ $grid: null, $gantt: $xeGantt, item })
-                })
-              }
-            }
-            // 处理插槽
+      const proxyOpts = $xeGantt.computeProxyOpts
+      const formOpts = $xeGantt.computeFormOpts
+      if (isEnableConf(formConfig) && formOpts.items && formOpts.items.length) {
+        const formSlots: any = {}
+        if (!(formOpts as any).inited) {
+          (formOpts as any).inited = true
+          const beforeItem = proxyOpts.beforeItem
+          if (proxyOpts && beforeItem) {
             formOpts.items.forEach((item) => {
-              XEUtils.each(item.slots, (func) => {
-                if (!XEUtils.isFunction(func)) {
-                  if (slots[func]) {
-                    formSlots[func] = slots[func] as any
-                  }
-                }
-              })
+              beforeItem.call($xeGantt, { $grid: $xeGantt, $gantt: null, item })
             })
-            if (VxeUIFormComponent) {
-              slotVNs.push(
-                h(VxeUIFormComponent, {
-                  ref: refForm,
-                  ...Object.assign({}, formOpts, {
-                    data: proxyConfig && isEnableConf(proxyOpts) && proxyOpts.form ? formData : formOpts.data
-                  }),
-                  onSubmit: submitFormEvent,
-                  onReset: resetFormEvent,
-                  onSubmitInvalid: submitInvalidEvent,
-                  onCollapse: collapseEvent
-                }, formSlots)
-              )
-            }
           }
         }
+        // 处理插槽
+        formOpts.items.forEach((item) => {
+          XEUtils.each(item.slots, (func) => {
+            if (!XEUtils.isFunction(func)) {
+              if (slots[func]) {
+                formSlots[func] = slots[func]
+              }
+            }
+          })
+        })
+        return [
+          VxeUIFormComponent
+            ? h(VxeUIFormComponent, {
+              props: Object.assign({}, formOpts, {
+                data: proxyConfig && proxyOpts.form ? formData : formOpts.data
+              }),
+              on: {
+                submit: $xeGantt.submitFormEvent,
+                reset: $xeGantt.resetFormEvent,
+                collapse: $xeGantt.collapseEvent,
+                'submit-invalid': $xeGantt.submitInvalidEvent
+              },
+              scopedSlots: formSlots
+            })
+            : renderEmptyElement($xeGantt)
+        ]
+      }
+      return []
+    },
+    renderForm (h: CreateElement) {
+      const $xeGantt = this
+      const props = $xeGantt
+      const slots = $xeGantt.$scopedSlots
+
+      const { formConfig } = props
+      const formSlot = slots.form
+      const hasForm = !!(formSlot || isEnableConf(formConfig))
+
+      if (hasForm) {
         return h('div', {
-          ref: refFormWrapper,
           key: 'form',
+          ref: 'refFormWrapper',
           class: 'vxe-gantt--form-wrapper'
-        }, slotVNs)
+        }, formSlot ? formSlot.call($xeGantt, { $grid: null, $gantt: $xeGantt }) : $xeGantt.renderDefaultForm(h))
       }
       return renderEmptyElement($xeGantt)
-    }
+    },
+    renderToolbar (h: CreateElement) {
+      const VxeUIToolbarComponent = VxeUI.getComponent('VxeToolbar')
+
+      const $xeGantt = this
+      const props = $xeGantt
+      const slots = $xeGantt.$scopedSlots
 
-    /**
-     * 渲染工具栏
-     */
-    const renderToolbar = () => {
       const { toolbarConfig } = props
-      const toolbarOpts = computeToolbarOpts.value
-      if ((toolbarConfig && isEnableConf(toolbarOpts)) || slots.toolbar) {
-        let slotVNs: VNode[] = []
-        if (slots.toolbar) {
-          slotVNs = slots.toolbar({ $grid: null, $gantt: $xeGantt })
-        } else {
-          const toolbarOptSlots = toolbarOpts.slots
-          const toolbarSlots: {
-            buttons?(params: any): any
-            buttonPrefix?(params: any): any
-            buttonSuffix?(params: any): any
-            tools?(params: any): any
-            toolPrefix?(params: any): any
-            toolSuffix?(params: any): any
-           } = {}
-          if (toolbarOptSlots) {
-            const buttonsSlot = getFuncSlot(toolbarOptSlots, 'buttons')
-            const buttonPrefixSlot = getFuncSlot(toolbarOptSlots, 'buttonPrefix')
-            const buttonSuffixSlot = getFuncSlot(toolbarOptSlots, 'buttonSuffix')
-            const toolsSlot = getFuncSlot(toolbarOptSlots, 'tools')
-            const toolPrefixSlot = getFuncSlot(toolbarOptSlots, 'toolPrefix')
-            const toolSuffixSlot = getFuncSlot(toolbarOptSlots, 'toolSuffix')
-            if (buttonsSlot) {
-              toolbarSlots.buttons = buttonsSlot
-            }
-            if (buttonPrefixSlot) {
-              toolbarSlots.buttonPrefix = buttonPrefixSlot
-            }
-            if (buttonSuffixSlot) {
-              toolbarSlots.buttonSuffix = buttonSuffixSlot
-            }
-            if (toolsSlot) {
-              toolbarSlots.tools = toolsSlot
-            }
-            if (toolPrefixSlot) {
-              toolbarSlots.toolPrefix = toolPrefixSlot
-            }
-            if (toolSuffixSlot) {
-              toolbarSlots.toolSuffix = toolSuffixSlot
-            }
-          }
-          slotVNs.push(
-            h(VxeToolbarComponent, {
-              ref: refToolbar,
-              ...toolbarOpts,
-              slots: undefined
-            }, toolbarSlots)
-          )
-        }
+      const toolbarSlot = slots.toolbar
+      const hasToolbar = !!(toolbarSlot || isEnableConf(toolbarConfig) || toolbar)
+      const toolbarOpts = $xeGantt.computeToolbarOpts
+
+      if (hasToolbar) {
         return h('div', {
-          ref: refToolbarWrapper,
           key: 'toolbar',
+          ref: 'refToolbarWrapper',
           class: 'vxe-gantt--toolbar-wrapper'
-        }, slotVNs)
+        }, toolbarSlot
+          ? toolbarSlot.call($xeGantt, { $grid: null, $gantt: $xeGantt })
+          : [
+              h(VxeUIToolbarComponent, {
+                props: Object.assign({}, toolbarOpts, { slots: undefined }),
+                ref: 'refToolbar',
+                scopedSlots: $xeGantt.getToolbarSlots()
+              })
+            ]
+        )
       }
       return renderEmptyElement($xeGantt)
-    }
+    },
+    renderTop (h: CreateElement) {
+      const $xeGantt = this
+      const slots = $xeGantt.$scopedSlots
 
-    /**
-     * 渲染表格顶部区域
-     */
-    const renderTop = () => {
       const topSlot = slots.top
-      if (topSlot) {
-        return h('div', {
-          ref: refTopWrapper,
+      return topSlot
+        ? h('div', {
           key: 'top',
+          ref: 'refTopWrapper',
           class: 'vxe-gantt--top-wrapper'
-        }, topSlot({ $grid: null, $gantt: $xeGantt }))
-      }
-      return renderEmptyElement($xeGantt)
-    }
+        }, topSlot.call($xeGantt, { $grid: null, $gantt: $xeGantt }))
+        : renderEmptyElement($xeGantt)
+    },
+    renderTableLeft (h: CreateElement) {
+      const $xeGantt = this
+      const slots = $xeGantt.$scopedSlots
 
-    const renderTableLeft = () => {
       const leftSlot = slots.left
       if (leftSlot) {
         return h('div', {
@@ -1502,9 +1751,11 @@ export default defineVxeComponent({
         }, leftSlot({ $grid: null, $gantt: $xeGantt }))
       }
       return renderEmptyElement($xeGantt)
-    }
+    },
+    renderTableRight (h: CreateElement) {
+      const $xeGantt = this
+      const slots = $xeGantt.$scopedSlots
 
-    const renderTableRight = () => {
       const rightSlot = slots.right
       if (rightSlot) {
         return h('div', {
@@ -1512,180 +1763,173 @@ export default defineVxeComponent({
         }, rightSlot({ $grid: null, $gantt: $xeGantt }))
       }
       return renderEmptyElement($xeGantt)
-    }
+    },
+    renderTable (h: CreateElement) {
+      const $xeGantt = this
+      const slots = $xeGantt.$scopedSlots
 
-    /**
-     * 渲染表格
-     */
-    const renderTable = () => {
-      const { proxyConfig } = props
-      const tableProps = computeTableProps.value
-      const proxyOpts = computeProxyOpts.value
-      const tableOns = Object.assign({}, tableCompEvents)
-      const emptySlot = slots.empty
-      const loadingSlot = slots.loading
-      const rowDragIconSlot = slots.rowDragIcon || slots['row-drag-icon']
-      const columnDragIconSlot = slots.columnDragIcon || slots['column-drag-icon']
-      if (proxyConfig && isEnableConf(proxyOpts)) {
-        if (proxyOpts.sort) {
-          tableOns.onSortChange = sortChangeEvent
-          tableOns.onClearAllSort = clearAllSortEvent
-        }
-        if (proxyOpts.filter) {
-          tableOns.onFilterChange = filterChangeEvent
-          tableOns.onClearAllFilter = clearAllFilterEvent
-        }
-      }
-      const slotObj: {
-        empty?(params: any): any
-        loading?(params: any): any
-        rowDragIcon?(params: any): any
-        columnDragIcon?(params: any): any
-      } = {}
-      if (emptySlot) {
-        slotObj.empty = emptySlot
-      }
-      if (loadingSlot) {
-        slotObj.loading = loadingSlot
-      }
-      if (rowDragIconSlot) {
-        slotObj.rowDragIcon = rowDragIconSlot
-      }
-      if (columnDragIconSlot) {
-        slotObj.columnDragIcon = columnDragIconSlot
-      }
+      const tableProps = $xeGantt.computeTableProps
       return h('div', {
-        ref: refTableWrapper,
         class: 'vxe-gantt--table-wrapper'
       }, [
-        h(VxeTableComponent, {
-          ref: refTable,
-          ...tableProps,
-          ...tableOns
-        }, slotObj)
+        h(VxeTableComponent as Component, {
+          key: 'table',
+          props: tableProps,
+          on: getTableOns($xeGantt),
+          scopedSlots: slots,
+          ref: 'refTable'
+        })
       ])
-    }
-
-    /**
-     * 渲染表格底部区域
-     */
-    const renderBottom = () => {
-      if (slots.bottom) {
-        return h('div', {
-          ref: refBottomWrapper,
+    },
+    renderBottom (h: CreateElement) {
+      const $xeGantt = this
+      const slots = $xeGantt.$scopedSlots
+
+      const bottomSlot = slots.bottom
+      return bottomSlot
+        ? h('div', {
           key: 'bottom',
+          ref: 'refBottomWrapper',
           class: 'vxe-gantt--bottom-wrapper'
-        }, slots.bottom({ $grid: null, $gantt: $xeGantt }))
-      }
-      return renderEmptyElement($xeGantt)
-    }
+        }, bottomSlot.call($xeGantt, { $grid: null, $gantt: $xeGantt }))
+        : renderEmptyElement($xeGantt)
+    },
+    renderPager (h: CreateElement) {
+      const VxeUIPagerComponent = VxeUI.getComponent('VxePager')
+
+      const $xeGantt = this
+      const props = $xeGantt
+      const slots = $xeGantt.$scopedSlots
+      const reactData = $xeGantt.reactData
 
-    /**
-     * 渲染分页
-     */
-    const renderPager = () => {
       const { proxyConfig, pagerConfig } = props
-      const proxyOpts = computeProxyOpts.value
-      const pagerOpts = computePagerOpts.value
+      const proxyOpts = $xeGantt.computeProxyOpts
+      const pagerOpts = $xeGantt.computePagerOpts
       const pagerSlot = slots.pager
       if ((pagerConfig && isEnableConf(pagerOpts)) || slots.pager) {
         return h('div', {
-          ref: refPagerWrapper,
+          ref: 'refPagerWrapper',
           key: 'pager',
           class: 'vxe-gantt--pager-wrapper'
         }, pagerSlot
-          ? pagerSlot({ $grid: null, $gantt: $xeGantt })
+          ? pagerSlot.call($xeGantt, { $grid: null, $gantt: $xeGantt })
           : [
               VxeUIPagerComponent
                 ? h(VxeUIPagerComponent, {
-                  ref: refPager,
-                  ...pagerOpts,
-                  ...(proxyConfig && isEnableConf(proxyOpts) ? reactData.tablePage : {}),
-                  onPageChange: pageChangeEvent
-                }, getConfigSlot(pagerOpts.slots))
+                  ref: 'refPager',
+                  props: {
+                    ...pagerOpts,
+                    ...(proxyConfig && isEnableConf(proxyOpts) ? reactData.tablePage : {})
+                  },
+                  on: {
+                    'page-change': $xeGantt.pageChangeEvent
+                  },
+                  scopedSlots: $xeGantt.getConfigSlot(pagerOpts.slots)
+                })
                 : renderEmptyElement($xeGantt)
             ])
       }
       return renderEmptyElement($xeGantt)
-    }
-
+    },
     /**
      * 渲染任务视图
      */
-    const renderTaskView = () => {
+    renderTaskView (h: CreateElement) {
       return h('div', {
-        ref: refGanttWrapper,
+        ref: 'refGanttWrapper',
         class: 'vxe-gantt--view-wrapper'
       }, [
         h(GanttViewComponent, {
-          ref: refGanttView
+          ref: 'refGanttView'
         })
       ])
-    }
+    },
+    renderSplitBar (h: CreateElement) {
+      const $xeGantt = this
+      const reactData = $xeGantt.reactData
 
-    const renderSplitBar = () => {
       const { showLeftView, showRightView } = reactData
+      const taskSplitOpts = $xeGantt.computeTaskSplitOpts
+      const { enabled, resize, showCollapseTableButton, showCollapseTaskButton } = taskSplitOpts
+      if (!enabled) {
+        return renderEmptyElement($xeGantt)
+      }
+      const ons: {
+        mousedown?: any
+      } = {}
+      if (resize) {
+        ons.mousedown = $xeGantt.dragSplitEvent
+      }
       return h('div', {
-        class: 'vxe-gantt--view-split-bar'
+        class: ['vxe-gantt--view-split-bar', {
+          'is--resize': resize,
+          on: ons
+        }]
       }, [
         h('div', {
-          class: 'vxe-gantt--view-split-bar-handle',
-          onMousedown: dragSplitEvent
+          class: 'vxe-gantt--view-split-bar-handle'
         }),
-        h('div', {
-          class: 'vxe-gantt--view-split-bar-btn-wrapper'
-        }, [
-          showRightView
-            ? h('div', {
-              class: 'vxe-gantt--view-split-bar-left-btn',
-              onClick: handleSplitLeftViewEvent
-            }, [
-              h('i', {
-                class: showLeftView ? getIcon().GANTT_VIEW_LEFT_OPEN : getIcon().GANTT_VIEW_LEFT_CLOSE
-              })
-            ])
-            : renderEmptyElement($xeGantt),
-          showLeftView
-            ? h('div', {
-              class: 'vxe-gantt--view-split-bar-right-btn',
-              onClick: handleSplitRightViewEvent
-            }, [
-              h('i', {
-                class: showRightView ? getIcon().GANTT_VIEW_RIGHT_OPEN : getIcon().GANTT_VIEW_RIGHT_CLOSE
-              })
-            ])
-            : renderEmptyElement($xeGantt)
-        ])
+        showCollapseTableButton || showCollapseTaskButton
+          ? h('div', {
+            class: 'vxe-gantt--view-split-bar-btn-wrapper'
+          }, [
+            showCollapseTableButton && showRightView
+              ? h('div', {
+                class: 'vxe-gantt--view-split-bar-left-btn',
+                on: {
+                  click: $xeGantt.handleSplitLeftViewEvent
+                }
+              }, [
+                h('i', {
+                  class: showLeftView ? getIcon().GANTT_VIEW_LEFT_OPEN : getIcon().GANTT_VIEW_LEFT_CLOSE
+                })
+              ])
+              : renderEmptyElement($xeGantt),
+            showCollapseTaskButton && showLeftView
+              ? h('div', {
+                class: 'vxe-gantt--view-split-bar-right-btn',
+                on: {
+                  click: $xeGantt.handleSplitRightViewEvent
+                }
+              }, [
+                h('i', {
+                  class: showRightView ? getIcon().GANTT_VIEW_RIGHT_OPEN : getIcon().GANTT_VIEW_RIGHT_CLOSE
+                })
+              ])
+              : renderEmptyElement($xeGantt)
+          ])
+          : renderEmptyElement($xeGantt)
       ])
-    }
+    },
+    renderChildLayout (h: CreateElement, layoutKeys: VxeGanttDefines.LayoutKey[]) {
+      const $xeGantt = this
 
-    const renderChildLayout = (layoutKeys: VxeGanttDefines.LayoutKey[]) => {
       const childVNs: VNode[] = []
       layoutKeys.forEach(key => {
         switch (key) {
           case 'Form':
-            childVNs.push(renderForm())
+            childVNs.push($xeGantt.renderForm(h))
             break
           case 'Toolbar':
-            childVNs.push(renderToolbar())
+            childVNs.push($xeGantt.renderToolbar(h))
             break
           case 'Top':
-            childVNs.push(renderTop())
+            childVNs.push($xeGantt.renderTop(h))
             break
           case 'Gantt':
             childVNs.push(
               h('div', {
-                ref: refGanttContainer,
+                ref: 'refGanttContainer',
                 key: 'tv',
                 class: 'vxe-gantt--gantt-container'
               }, [
-                renderTableLeft(),
-                renderTable(),
-                renderSplitBar(),
-                renderTaskView(),
-                renderTableRight(),
+                $xeGantt.renderTableLeft(h),
+                $xeGantt.renderTable(h),
+                $xeGantt.renderSplitBar(h),
+                $xeGantt.renderTaskView(h),
+                $xeGantt.renderTableRight(h),
                 h('div', {
-                  ref: refResizableSplitTip,
+                  ref: 'refResizableSplitTip',
                   class: 'vxe-gantt--resizable-split-tip'
                 }, [
                   h('div', {
@@ -1703,10 +1947,10 @@ export default defineVxeComponent({
             )
             break
           case 'Bottom':
-            childVNs.push(renderBottom())
+            childVNs.push($xeGantt.renderBottom(h))
             break
           case 'Pager':
-            childVNs.push(renderPager())
+            childVNs.push($xeGantt.renderPager(h))
             break
           default:
             errLog('vxe.error.notProp', [`layouts -> ${key}`])
@@ -1714,17 +1958,19 @@ export default defineVxeComponent({
         }
       })
       return childVNs
-    }
+    },
+    renderLayout (h: CreateElement) {
+      const $xeGantt = this
+      const slots = $xeGantt.$scopedSlots
 
-    const renderLayout = () => {
-      const currLayoutConf = computeCurrLayoutConf.value
+      const currLayoutConf = $xeGantt.computeCurrLayoutConf
       const { headKeys, bodyKeys, footKeys } = currLayoutConf
       const asideLeftSlot = slots.asideLeft || slots['aside-left']
       const asideRightSlot = slots.asideRight || slots['aside-right']
       return [
         h('div', {
           class: 'vxe-gantt--layout-header-wrapper'
-        }, renderChildLayout(headKeys)),
+        }, $xeGantt.renderChildLayout(h, headKeys)),
         h('div', {
           class: 'vxe-gantt--layout-body-wrapper'
         }, [
@@ -1735,7 +1981,7 @@ export default defineVxeComponent({
             : renderEmptyElement($xeGantt),
           h('div', {
             class: 'vxe-gantt--layout-body-content-wrapper'
-          }, renderChildLayout(bodyKeys)),
+          }, $xeGantt.renderChildLayout(h, bodyKeys)),
           asideRightSlot
             ? h('div', {
               class: 'vxe-gantt--layout-aside-right-wrapper'
@@ -1744,23 +1990,26 @@ export default defineVxeComponent({
         ]),
         h('div', {
           class: 'vxe-gantt--layout-footer-wrapper'
-        }, renderChildLayout(footKeys)),
+        }, $xeGantt.renderChildLayout(h, footKeys)),
         h('div', {
           class: 'vxe-gantt--border-line'
         })
       ]
-    }
+    },
+    renderVN (h: CreateElement): VNode {
+      const $xeGantt = this
+      const props = $xeGantt
+      const reactData = $xeGantt.reactData
 
-    const renderVN = () => {
       const { showLeftView, showRightView } = reactData
-      const vSize = computeSize.value
-      const styles = computeStyles.value
-      const isLoading = computeIsLoading.value
-      const tableBorder = computeTableBorder.value
-      const scrollbarXToTop = computeScrollbarXToTop.value
-      const scrollbarYToLeft = computeScrollbarYToLeft.value
+      const vSize = $xeGantt.computeSize
+      const styles = $xeGantt.computeStyles
+      const isLoading = $xeGantt.computeIsLoading
+      const tableBorder = $xeGantt.computeTableBorder
+      const scrollbarXToTop = $xeGantt.computeScrollbarXToTop
+      const scrollbarYToLeft = $xeGantt.computeScrollbarYToLeft
       return h('div', {
-        ref: refElem,
+        ref: 'refElem',
         class: ['vxe-gantt', `border--${tableBorder}`, `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`, {
           [`size--${vSize}`]: vSize,
           'is--round': props.round,
@@ -1770,100 +2019,71 @@ export default defineVxeComponent({
           'show--right': showRightView
         }],
         style: styles
-      }, renderLayout())
+      }, $xeGantt.renderLayout(h))
     }
+  },
+  created () {
+    // 使用已安装的组件，如果未安装则不渲染
+    const VxeUIFormComponent = VxeUI.getComponent('VxeForm')
+    const VxeUIPagerComponent = VxeUI.getComponent('VxePager')
+    const VxeUIToolbarComponent = VxeUI.getComponent('VxeToolbar')
 
-    const columnFlag = ref(0)
-    watch(() => props.columns ? props.columns.length : -1, () => {
-      columnFlag.value++
-    })
-    watch(() => props.columns, () => {
-      columnFlag.value++
-    })
-    watch(columnFlag, () => {
-      nextTick(() => $xeGantt.loadColumn(props.columns || []))
-    })
-
-    watch(() => props.toolbarConfig, () => {
-      initToolbar()
-    })
-
-    watch(computeCustomCurrentPageFlag, () => {
-      initPages('currentPage')
-    })
+    const $xeGantt = this
+    const props = $xeGantt
 
-    watch(computeCustomPageSizeFlag, () => {
-      initPages('pageSize')
-    })
+    const proxyOpts = $xeGantt.computeProxyOpts
 
-    watch(computeCustomTotalFlag, () => {
-      initPages('total')
-    })
-
-    watch(() => props.proxyConfig, () => {
-      initProxy()
-    })
+    if ((props as any).toolbar) {
+      errLog('vxe.error.delProp', ['grid.toolbar', 'grid.toolbar-config'])
+    }
+    if (props.toolbarConfig && !XEUtils.isObject(props.toolbarConfig)) {
+      errLog('vxe.error.errProp', [`grid.toolbar-config=${props.toolbarConfig}`, 'grid.toolbar-config={}'])
+    }
+    if (proxyOpts.props) {
+      warnLog('vxe.error.delProp', ['proxy-config.props', 'proxy-config.response'])
+    }
 
-    hooks.forEach((options) => {
-      const { setupGantt } = options
-      if (setupGantt) {
-        const hookRest = setupGantt($xeGantt)
-        if (hookRest && XEUtils.isObject(hookRest)) {
-          Object.assign($xeGantt, hookRest)
+    $xeGantt.$nextTick(() => {
+      if (props.formConfig) {
+        if (!VxeUIFormComponent) {
+          errLog('vxe.error.reqComp', ['vxe-form'])
         }
       }
-    })
-
-    initPages()
-
-    onMounted(() => {
-      nextTick(() => {
-        const { columns } = props
-        const proxyOpts = computeProxyOpts.value
-
-        if (props.formConfig) {
-          if (!VxeUIFormComponent) {
-            errLog('vxe.error.reqComp', ['vxe-form'])
-          }
+      if (props.pagerConfig) {
+        if (!VxeUIPagerComponent) {
+          errLog('vxe.error.reqComp', ['vxe-pager'])
         }
-        if (props.pagerConfig) {
-          if (!VxeUIPagerComponent) {
-            errLog('vxe.error.reqComp', ['vxe-pager'])
-          }
-        }
-
-        // const { data, columns, proxyConfig } = props
-        // const formOpts = computeFormOpts.value
-        // if (isEnableConf(proxyConfig) && (data || (proxyOpts.form && formOpts.data))) {
-        //   errLog('vxe.error.errConflicts', ['grid.data', 'grid.proxy-config'])
-        // }
-
-        if (proxyOpts.props) {
-          warnLog('vxe.error.delProp', ['proxy-config.props', 'proxy-config.response'])
-        }
-
-        if (columns && columns.length) {
-          $xeGantt.loadColumn(columns)
+      }
+      if (props.toolbarConfig) {
+        if (!VxeUIToolbarComponent) {
+          errLog('vxe.error.reqComp', ['vxe-toolbar'])
         }
-        initToolbar()
-        initProxy()
-      })
-      initGanttView()
-      globalEvents.on($xeGantt, 'keydown', handleGlobalKeydownEvent)
-    })
-
-    onUnmounted(() => {
-      globalEvents.off($xeGantt, 'keydown')
-      XEUtils.assign(internalData, createInternalData())
+      }
     })
 
-    $xeGantt.renderVN = renderVN
+    $xeGantt.initPages()
+  },
+  mounted () {
+    const $xeGantt = this
+    const props = $xeGantt
 
-    provide('$xeGantt', $xeGantt)
+    const { columns } = props
+    if (columns && columns.length) {
+      $xeGantt.loadColumn(columns)
+    }
+    $xeGantt.initToolbar()
+    $xeGantt.initProxy()
+    $xeGantt.initGanttView()
+    globalEvents.on($xeGantt, 'keydown', $xeGantt.handleGlobalKeydownEvent)
+  },
+  destroyed () {
+    const $xeGantt = this
+    const internalData = $xeGantt.internalData
 
-    return $xeGantt
+    globalEvents.off($xeGantt, 'keydown')
+    XEUtils.assign(internalData, createInternalData())
   },
-  render () {
-    return this.renderVN()
+  render (this: any, h) {
+    return this.renderVN(h)
   }
-})
+}) /* define-vxe-component end */