vxe-gantt 0.0.3 → 3.0.0-beta.0

package/es/gantt/src/gantt.js

@@ -1,39 +1,67 @@
-import { h, ref, computed, provide, reactive, onUnmounted, watch, nextTick, onMounted } 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';
-const { getConfig, getIcon, getI18n, commands, hooks, useFns, createEvent, globalEvents, GLOBAL_EVENT_KEYS, renderEmptyElement, getSlotVNs } = VxeUI;
-const tableComponentPropKeys = Object.keys(tableProps);
-const tableComponentMethodKeys = ['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'];
+import { VxeTable as VxeTableComponent } from 'vxe-table';
+const { getConfig, getIcon, getI18n, commands, globalMixins, createEvent, globalEvents, GLOBAL_EVENT_KEYS, renderEmptyElement, getSlotVNs } = VxeUI;
+const tableProps = VxeTableComponent.props;
+const tableMethods = {};
+const propKeys = Object.keys(tableProps);
+const defaultLayouts = [['Form'], ['Toolbar', 'Top', 'Gantt', 'Bottom', 'Pager']];
+function getTableOns(_vm) {
+    const { $listeners, proxyConfig, proxyOpts } = _vm;
+    const ons = {};
+    XEUtils.each($listeners, (cb, type) => {
+        ons[type] = (...args) => {
+            _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.methods, (fn, name) => {
+    tableMethods[name] = function (...args) {
+        const $xeGantt = this;
+        const $xeTable = $xeGantt.$refs.refTable;
+        return $xeTable && $xeTable[name](...args);
+    };
+});
 function createInternalData() {
     return {
         resizeTableWidth: 0
     };
 }
-export default defineVxeComponent({
+export default {
     name: 'VxeGantt',
-    props: ganttProps,
-    emits: ganttEmits,
-    setup(props, context) {
+    mixins: [
+        globalMixins.sizeMixin
+    ],
+    props: Object.assign(Object.assign({}, tableProps), { columns: Array, pagerConfig: Object, proxyConfig: Object, toolbarConfig: Object, formConfig: Object, zoomConfig: Object, layouts: Array, taskConfig: Object, taskViewConfig: Object, taskBarConfig: Object, taskSplitConfig: Object, size: {
+            type: String,
+            default: () => getConfig().gantt.size || getConfig().size
+        } }),
+    provide() {
+        const $xeGantt = this;
+        return {
+            $xeGantt
+        };
+    },
+    data() {
         var _a;
-        const { slots, emit } = context;
         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 = [['Form'], ['Toolbar', 'Top', 'Gantt', 'Bottom', 'Pager']];
-        const { computeSize } = useFns.useSize(props);
-        const reactData = reactive({
+        const reactData = {
             tableLoading: false,
             proxyInited: false,
             isZMax: false,
@@ -49,106 +77,114 @@ export default defineVxeComponent({
             },
             showLeftView: true,
             showRightView: true
-        });
+        };
         const internalData = createInternalData();
-        const refElem = ref();
-        const refTable = ref();
-        const refForm = ref();
-        const refToolbar = ref();
-        const refPager = ref();
-        const refGanttContainer = ref();
-        const refGanttView = ref();
-        const refFormWrapper = ref();
-        const refToolbarWrapper = ref();
-        const refTopWrapper = ref();
-        const refBottomWrapper = ref();
-        const refPagerWrapper = ref();
-        const refTableWrapper = ref();
-        const refGanttWrapper = ref();
-        const refResizableSplitTip = ref();
-        const extendTableMethods = (methodKeys) => {
-            const funcs = {};
-            methodKeys.forEach(name => {
-                funcs[name] = (...args) => {
-                    const $xeTable = refTable.value;
-                    if ($xeTable && $xeTable[name]) {
-                        return $xeTable[name](...args);
-                    }
-                };
-            });
-            return funcs;
+        return {
+            xID,
+            reactData,
+            internalData
         };
-        const ganttExtendTableMethods = extendTableMethods(tableComponentMethodKeys);
-        tableComponentMethodKeys.forEach(name => {
-            ganttExtendTableMethods[name] = (...args) => {
-                const $xeTable = refTable.value;
-                if ($xeTable && $xeTable[name]) {
-                    return $xeTable && $xeTable[name](...args);
-                }
-            };
-        });
-        const computeProxyOpts = computed(() => {
+    },
+    computed: Object.assign(Object.assign({}, {}), { computeProxyOpts() {
+            const $xeGantt = this;
+            const props = $xeGantt;
             return XEUtils.merge({}, XEUtils.clone(getConfig().gantt.proxyConfig, true), props.proxyConfig);
-        });
-        const computeIsRespMsg = computed(() => {
-            const proxyOpts = computeProxyOpts.value;
+        },
+        computeIsRespMsg() {
+            const $xeGantt = this;
+            const proxyOpts = $xeGantt.computeProxyOpts;
             return !!(XEUtils.isBoolean(proxyOpts.message) ? proxyOpts.message : proxyOpts.showResponseMsg);
-        });
-        const computeIsActiveMsg = computed(() => {
-            const proxyOpts = computeProxyOpts.value;
+        },
+        computeIsActiveMsg() {
+            const $xeGantt = this;
+            const proxyOpts = $xeGantt.computeProxyOpts;
             return XEUtils.isBoolean(proxyOpts.showActionMsg) ? proxyOpts.showActionMsg : !!proxyOpts.showActiveMsg;
-        });
-        const computePagerOpts = computed(() => {
+        },
+        computePagerOpts() {
+            const $xeGantt = this;
+            const props = $xeGantt;
             return Object.assign({}, getConfig().gantt.pagerConfig, props.pagerConfig);
-        });
-        const computeFormOpts = computed(() => {
+        },
+        computeFormOpts() {
+            const $xeGantt = this;
+            const props = $xeGantt;
             return Object.assign({}, getConfig().gantt.formConfig, props.formConfig);
-        });
-        const computeToolbarOpts = computed(() => {
+        },
+        computeToolbarOpts() {
+            const $xeGantt = this;
+            const props = $xeGantt;
             return Object.assign({}, getConfig().gantt.toolbarConfig, props.toolbarConfig);
-        });
-        const computeZoomOpts = computed(() => {
+        },
+        computeZoomOpts() {
+            const $xeGantt = this;
+            const props = $xeGantt;
             return Object.assign({}, getConfig().gantt.zoomConfig, props.zoomConfig);
-        });
-        const computeTaskOpts = computed(() => {
+        },
+        computeTaskOpts() {
+            const $xeGantt = this;
+            const props = $xeGantt;
             return Object.assign({}, getConfig().gantt.taskConfig, props.taskConfig);
-        });
-        const computeTaskViewOpts = computed(() => {
+        },
+        computeTaskViewOpts() {
+            const $xeGantt = this;
+            const props = $xeGantt;
             return Object.assign({}, getConfig().gantt.taskViewConfig, props.taskViewConfig);
-        });
-        const computeTaskBarOpts = computed(() => {
+        },
+        computeTaskBarOpts() {
+            const $xeGantt = this;
+            const props = $xeGantt;
             return Object.assign({}, getConfig().gantt.taskBarConfig, props.taskBarConfig);
-        });
-        const computeTitleField = computed(() => {
-            const taskOpts = computeTaskOpts.value;
+        },
+        computeTaskSplitOpts() {
+            const $xeGantt = this;
+            const props = $xeGantt;
+            return Object.assign({}, getConfig().gantt.taskSplitConfig, props.taskSplitConfig);
+        },
+        computeTitleField() {
+            const $xeGantt = this;
+            const taskOpts = $xeGantt.computeTaskOpts;
             return taskOpts.titleField || 'title';
-        });
-        const computeStartField = computed(() => {
-            const taskOpts = computeTaskOpts.value;
-            return taskOpts.startField || 'startDate';
-        });
-        const computeEndField = computed(() => {
-            const taskOpts = computeTaskOpts.value;
-            return taskOpts.endField || 'endDate';
-        });
-        const computeProgressField = computed(() => {
-            const taskOpts = computeTaskOpts.value;
+        },
+        computeStartField() {
+            const $xeGantt = this;
+            const taskOpts = $xeGantt.computeTaskOpts;
+            return taskOpts.startField || 'start';
+        },
+        computeEndField() {
+            const $xeGantt = this;
+            const taskOpts = $xeGantt.computeTaskOpts;
+            return taskOpts.endField || 'end';
+        },
+        computeProgressField() {
+            const $xeGantt = this;
+            const taskOpts = $xeGantt.computeTaskOpts;
             return taskOpts.progressField || 'progress';
-        });
-        const computeScrollbarOpts = computed(() => {
+        },
+        computeScrollbarOpts() {
+            const $xeGantt = this;
+            const props = $xeGantt;
             return Object.assign({}, getConfig().gantt.scrollbarConfig, props.scrollbarConfig);
-        });
-        const computeScrollbarXToTop = computed(() => {
-            const scrollbarOpts = computeScrollbarOpts.value;
+        },
+        computeScrollbarXToTop() {
+            const $xeGantt = this;
+            const scrollbarOpts = $xeGantt.computeScrollbarOpts;
             return !!(scrollbarOpts.x && scrollbarOpts.x.position === 'top');
-        });
-        const computeScrollbarYToLeft = computed(() => {
-            const scrollbarOpts = computeScrollbarOpts.value;
+        },
+        computeScrollbarYToLeft() {
+            const $xeGantt = this;
+            const scrollbarOpts = $xeGantt.computeScrollbarOpts;
             return !!(scrollbarOpts.y && scrollbarOpts.y.position === 'left');
-        });
-        const computeStyles = computed(() => {
+        },
+        computeStyles() {
+            const $xeGantt = this;
+            const props = $xeGantt;
+            const reactData = $xeGantt.reactData;
             const { height, maxHeight } = props;
             const { isZMax, tZindex } = reactData;
+            const taskViewOpts = $xeGantt.computeTaskViewOpts;
+            const { tableStyle } = taskViewOpts;
+            const taskBarOpts = $xeGantt.computeTaskBarOpts;
+            const { barStyle } = taskBarOpts;
             const stys = {};
             if (isZMax) {
                 stys.zIndex = tZindex;
@@ -161,28 +197,44 @@ 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(() => {
+        },
+        computeTableExtendProps() {
+            const $xeGantt = this;
+            const props = $xeGantt;
             const rest = {};
-            tableComponentPropKeys.forEach((key) => {
-                rest[key] = props[key];
+            const gridProps = props;
+            propKeys.forEach(key => {
+                rest[key] = gridProps[key];
             });
             return rest;
-        });
-        const computeTableProps = computed(() => {
+        },
+        computeTableProps() {
+            const $xeGantt = this;
+            const props = $xeGantt;
+            const reactData = $xeGantt.reactData;
             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;
+            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%';
@@ -201,8 +253,14 @@ export default defineVxeComponent({
                 tProps.editConfig = Object.assign({}, editConfig);
             }
             return tProps;
-        });
-        const computeCurrLayoutConf = computed(() => {
+        },
+        tableProps() {
+            const $xeGantt = this;
+            return $xeGantt.computeTableProps;
+        },
+        computeCurrLayoutConf() {
+            const $xeGantt = this;
+            const props = $xeGantt;
             const { layouts } = props;
             let confs = [];
             if (layouts && layouts.length) {
@@ -229,31 +287,41 @@ export default defineVxeComponent({
                 bodyKeys,
                 footKeys
             };
-        });
-        const computeCustomCurrentPageFlag = computed(() => {
-            const pagerOpts = computePagerOpts.value;
+        },
+        computeCustomCurrentPageFlag() {
+            const $xeGantt = this;
+            const pagerOpts = $xeGantt.computePagerOpts;
             return pagerOpts.currentPage;
-        });
-        const computeCustomPageSizeFlag = computed(() => {
-            const pagerOpts = computePagerOpts.value;
+        },
+        computeCustomPageSizeFlag() {
+            const $xeGantt = this;
+            const pagerOpts = $xeGantt.computePagerOpts;
             return pagerOpts.pageSize;
-        });
-        const computeCustomTotalFlag = computed(() => {
-            const pagerOpts = computePagerOpts.value;
+        },
+        computeCustomTotalFlag() {
+            const $xeGantt = this;
+            const pagerOpts = $xeGantt.computePagerOpts;
             return pagerOpts.total;
-        });
-        const computePageCount = computed(() => {
+        },
+        computePageCount() {
+            const $xeGantt = this;
+            const reactData = $xeGantt.reactData;
             const { tablePage } = reactData;
             return Math.max(Math.ceil(tablePage.total / tablePage.pageSize), 1);
-        });
-        const computeIsLoading = computed(() => {
+        },
+        computeIsLoading() {
+            const $xeGantt = this;
+            const props = $xeGantt;
+            const reactData = $xeGantt.reactData;
             const { loading, proxyConfig } = props;
             const { tableLoading } = reactData;
-            const proxyOpts = computeProxyOpts.value;
+            const proxyOpts = $xeGantt.computeProxyOpts;
             const { showLoading } = proxyOpts;
             return loading || (tableLoading && showLoading && proxyConfig && isEnableConf(proxyOpts));
-        });
-        const computeTableBorder = computed(() => {
+        },
+        computeTableBorder() {
+            const $xeGantt = this;
+            const props = $xeGantt;
             const { border } = props;
             if (border === true) {
                 return 'full';
@@ -262,70 +330,63 @@ export default defineVxeComponent({
                 return border;
             }
             return 'default';
-        });
-        const refMaps = {
-            refElem,
-            refTable,
-            refForm,
-            refToolbar,
-            refPager
-        };
-        const computeMaps = {
-            computeProxyOpts,
-            computePagerOpts,
-            computeFormOpts,
-            computeToolbarOpts,
-            computeZoomOpts,
-            computeTaskOpts,
-            computeTaskViewOpts,
-            computeTaskBarOpts,
-            computeTitleField,
-            computeStartField,
-            computeEndField,
-            computeProgressField,
-            computeScrollbarOpts,
-            computeScrollbarXToTop,
-            computeScrollbarYToLeft
-        };
-        const $xeGantt = {
-            xID,
-            props: props,
-            context,
-            reactData,
-            internalData,
-            getRefMaps: () => refMaps,
-            getComputeMaps: () => computeMaps
-        };
-        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);
-                    }
-                });
-            }
-        };
-        const initGanttView = () => {
-            const $xeTable = refTable.value;
-            const $ganttView = refGanttView.value;
+        } }),
+    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: Object.assign(Object.assign({}, tableMethods), { dispatchEvent(type, params, evnt) {
+            const $xeGantt = this;
+            $xeGantt.$emit(type, createEvent(evnt, { $grid: null, $gantt: $xeGantt }, params));
+        },
+        initToolbar() {
+            const $xeGantt = this;
+            $xeGantt.$nextTick(() => {
+                const $xeTable = $xeGantt.$refs.refTable;
+                const $xeToolbar = $xeGantt.$refs.refToolbar;
+                if ($xeTable && $xeToolbar) {
+                    $xeTable.connectToolbar($xeToolbar);
+                }
+            });
+        },
+        initGanttView() {
+            const $xeGantt = this;
+            const $xeTable = $xeGantt.$refs.refTable;
+            const $ganttView = $xeGantt.$refs.refGanttView;
             if ($xeTable && $ganttView) {
                 $xeTable.handleConnectGanttView($ganttView);
             }
-        };
-        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) => {
+        },
+        initPages(propKey) {
+            const $xeGantt = this;
+            const props = $xeGantt;
+            const reactData = $xeGantt.reactData;
             const { tablePage } = reactData;
             const { pagerConfig } = props;
-            const pagerOpts = computePagerOpts.value;
+            const pagerOpts = $xeGantt.computePagerOpts;
             if (pagerConfig && isEnableConf(pagerOpts)) {
                 if (propKey) {
                     if (pagerOpts[propKey]) {
@@ -345,15 +406,14 @@ export default defineVxeComponent({
                     }
                 }
             }
-        };
-        const triggerPendingEvent = (code) => {
-            const isActiveMsg = computeIsActiveMsg.value;
-            const $xeTable = refTable.value;
-            const selectRecords = $xeTable ? $xeTable.getCheckboxRecords() : [];
+        },
+        triggerPendingEvent(code) {
+            const $xeGantt = this;
+            const isActiveMsg = $xeGantt.computeIsActiveMsg;
+            const $xeTable = $xeGantt.$refs.refTable;
+            const selectRecords = $xeTable.getCheckboxRecords();
             if (selectRecords.length) {
-                if ($xeTable) {
-                    $xeTable.togglePendingRow(selectRecords);
-                }
+                $xeTable.togglePendingRow(selectRecords);
                 $xeGantt.clearCheckboxRow();
             }
             else {
@@ -363,20 +423,22 @@ export default defineVxeComponent({
                     }
                 }
             }
-        };
-        const getRespMsg = (rest, defaultMsg) => {
-            const proxyOpts = computeProxyOpts.value;
+        },
+        getRespMsg(rest, defaultMsg) {
+            const $xeGantt = this;
+            const proxyOpts = $xeGantt.computeProxyOpts;
             const resConfigs = proxyOpts.response || proxyOpts.props || {};
             const messageProp = resConfigs.message;
-            const $xeTable = refTable.value;
+            const $xeTable = $xeGantt.$refs.refTable;
             let msg;
             if (rest && messageProp) {
                 msg = XEUtils.isFunction(messageProp) ? messageProp({ data: rest, $table: $xeTable, $grid: null, $gantt: $xeGantt }) : XEUtils.get(rest, messageProp);
             }
             return msg || getI18n(defaultMsg);
-        };
-        const handleDeleteRow = (code, alertKey, callback) => {
-            const isActiveMsg = computeIsActiveMsg.value;
+        },
+        handleDeleteRow(code, alertKey, callback) {
+            const $xeGantt = this;
+            const isActiveMsg = $xeGantt.computeIsActiveMsg;
             const selectRecords = $xeGantt.getCheckboxRecords();
             if (isActiveMsg) {
                 if (selectRecords.length) {
@@ -400,12 +462,15 @@ export default defineVxeComponent({
                 }
             }
             return Promise.resolve();
-        };
-        const pageChangeEvent = (params) => {
+        },
+        pageChangeEvent(params) {
+            const $xeGantt = this;
+            const props = $xeGantt;
+            const reactData = $xeGantt.reactData;
             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);
@@ -414,16 +479,15 @@ export default defineVxeComponent({
                     $xeGantt.dispatchEvent('proxy-query', rest, $event);
                 });
             }
-        };
-        const handleSortEvent = (params) => {
-            const $xeTable = refTable.value;
+        },
+        handleSortEvent(params) {
+            const $xeGantt = this;
+            const props = $xeGantt;
+            const reactData = $xeGantt.reactData;
+            const $xeTable = $xeGantt.$refs.refTable;
             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;
@@ -434,24 +498,25 @@ export default defineVxeComponent({
                     });
                 }
             }
-        };
-        const sortChangeEvent = (params) => {
-            handleSortEvent(params);
+        },
+        sortChangeEvent(params) {
+            const $xeGantt = this;
+            $xeGantt.handleSortEvent(params);
             $xeGantt.dispatchEvent('sort-change', params, params.$event);
-        };
-        const clearAllSortEvent = (params) => {
-            handleSortEvent(params);
+        },
+        clearAllSortEvent(params) {
+            const $xeGantt = this;
+            $xeGantt.handleSortEvent(params);
             $xeGantt.dispatchEvent('clear-all-sort', params, params.$event);
-        };
-        const handleFilterEvent = (params) => {
-            const $xeTable = refTable.value;
+        },
+        handleFilterEvent(params) {
+            const $xeGantt = this;
+            const props = $xeGantt;
+            const reactData = $xeGantt.reactData;
+            const $xeTable = $xeGantt.$refs.refTable;
             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;
@@ -462,18 +527,23 @@ export default defineVxeComponent({
                     });
                 }
             }
-        };
-        const filterChangeEvent = (params) => {
-            handleFilterEvent(params);
+        },
+        filterChangeEvent(params) {
+            const $xeGantt = this;
+            $xeGantt.handleFilterEvent(params);
             $xeGantt.dispatchEvent('filter-change', params, params.$event);
-        };
-        const clearAllFilterEvent = (params) => {
-            handleFilterEvent(params);
+        },
+        clearAllFilterEvent(params) {
+            const $xeGantt = this;
+            $xeGantt.handleFilterEvent(params);
             $xeGantt.dispatchEvent('clear-all-filter', params, params.$event);
-        };
-        const submitFormEvent = (params) => {
+        },
+        submitFormEvent(params) {
+            const $xeGantt = this;
+            const props = $xeGantt;
+            const reactData = $xeGantt.reactData;
             const { proxyConfig } = props;
-            const proxyOpts = computeProxyOpts.value;
+            const proxyOpts = $xeGantt.computeProxyOpts;
             if (reactData.tableLoading) {
                 return;
             }
@@ -483,31 +553,35 @@ export default defineVxeComponent({
                 });
             }
             $xeGantt.dispatchEvent('form-submit', params, params.$event);
-        };
-        const resetFormEvent = (params) => {
-            const $xeTable = refTable.value;
+        },
+        resetFormEvent(params) {
+            const $xeGantt = this;
+            const props = $xeGantt;
+            const $xeTable = $xeGantt.$refs.refTable;
             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', Object.assign(Object.assign({}, rest), { isReload: true }), $event);
                 });
             }
             $xeGantt.dispatchEvent('form-reset', params, $event);
-        };
-        const submitInvalidEvent = (params) => {
+        },
+        submitInvalidEvent(params) {
+            const $xeGantt = this;
             $xeGantt.dispatchEvent('form-submit-invalid', params, params.$event);
-        };
-        const collapseEvent = (params) => {
+        },
+        collapseEvent(params) {
+            const $xeGantt = this;
             const { $event } = params;
             $xeGantt.dispatchEvent('form-toggle-collapse', params, $event);
             $xeGantt.dispatchEvent('form-collapse', params, $event);
-        };
-        const handleZoom = (isMax) => {
+        },
+        handleZoom(isMax) {
+            const $xeGantt = this;
+            const reactData = $xeGantt.reactData;
             const { isZMax } = reactData;
             if (isMax ? !isZMax : isZMax) {
                 reactData.isZMax = !isZMax;
@@ -515,67 +589,32 @@ 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, slotKey) => {
-            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) => {
-            const slotConf = {};
-            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;
-        };
-        const dragSplitEvent = (evnt) => {
-            const el = refElem.value;
+        },
+        dragSplitEvent(evnt) {
+            const $xeGantt = this;
+            const el = $xeGantt.$refs.refElem;
             if (!el) {
                 return;
             }
-            const ganttContainerEl = refGanttContainer.value;
+            const ganttContainerEl = $xeGantt.$refs.refGanttContainer;
             if (!ganttContainerEl) {
                 return;
             }
-            const tableWrapperEl = refTableWrapper.value;
+            const tableWrapperEl = $xeGantt.$refs.refTableWrapper;
             if (!tableWrapperEl) {
                 return;
             }
-            const rsSplitLineEl = refResizableSplitTip.value;
+            const rsSplitLineEl = $xeGantt.$refs.refResizableSplitTip;
             if (!rsSplitLineEl) {
                 return;
             }
-            const taskViewOpts = computeTaskViewOpts.value;
+            const taskViewOpts = $xeGantt.computeTaskViewOpts;
             const containerRect = ganttContainerEl.getBoundingClientRect();
             const rsSplitTipEl = rsSplitLineEl.children[0];
             const disX = evnt.clientX;
@@ -625,27 +664,27 @@ 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;
                 if ($xeTable) {
                     $xeTable.recalculate(true);
                 }
             };
             rsSplitLineEl.style.display = 'block';
             handleReStyle(evnt);
-        };
-        const handleSplitLeftViewEvent = () => {
+        },
+        handleSplitLeftViewEvent() {
+            const $xeGantt = this;
+            const reactData = $xeGantt.reactData;
             reactData.showLeftView = !reactData.showLeftView;
-        };
-        const handleSplitRightViewEvent = () => {
+        },
+        handleSplitRightViewEvent() {
+            const $xeGantt = this;
+            const reactData = $xeGantt.reactData;
             reactData.showRightView = !reactData.showRightView;
-        };
-        const tableCompEvents = {};
-        tableEmits.forEach(name => {
-            const type = XEUtils.camelCase(`on-${name}`);
-            tableCompEvents[type] = (...args) => emit(name, ...args);
-        });
-        const getDefaultFormData = () => {
-            const formOpts = computeFormOpts.value;
+        },
+        getDefaultFormData() {
+            const $xeGantt = this;
+            const formOpts = $xeGantt.computeFormOpts;
             if (formOpts.items) {
                 const fData = {};
                 formOpts.items.forEach(item => {
@@ -667,753 +706,894 @@ export default defineVxeComponent({
                 return fData;
             }
             return {};
-        };
-        const initProxy = () => {
+        },
+        initProxy() {
+            const $xeGantt = this;
+            const props = $xeGantt;
+            const reactData = $xeGantt.reactData;
             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', Object.assign(Object.assign({}, rest), { isInited: true }), new Event('initial'));
-                        });
-                    }
+                    $xeGantt.$nextTick().then(() => $xeGantt.commitProxy('initial')).then((rest) => {
+                        $xeGantt.dispatchEvent('proxy-query', Object.assign(Object.assign({}, rest), { isInited: true }), new Event('initial'));
+                    });
                 }
             }
-        };
-        const handleGlobalKeydownEvent = (evnt) => {
-            const zoomOpts = computeZoomOpts.value;
+        },
+        handleGlobalKeydownEvent(evnt) {
+            const $xeGantt = this;
+            const reactData = $xeGantt.reactData;
+            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, params, evnt) => {
-            emit(type, createEvent(evnt, { $grid: null, $gantt: $xeGantt }, params));
-        };
-        const ganttMethods = {
-            dispatchEvent,
-            getEl() {
-                return refElem.value;
-            },
+        },
+        getEl() {
+            const $xeGantt = this;
+            return $xeGantt.$refs.refElem;
+        },
+        /**
+           * 提交指令，支持 code 或 button
+           * @param {String/Object} code 字符串或对象
+           */
+        commitProxy(proxyTarget, ...args) {
+            const $xeGantt = this;
+            const props = $xeGantt;
+            const reactData = $xeGantt.reactData;
             /**
-             * 提交指令，支持 code 或 button
-             * @param {String/Object} code 字符串或对象
+             * 已废弃
+             * @deprecated
              */
-            commitProxy(proxyTarget, ...args) {
-                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 = null;
-                let code = 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;
-                }
-                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();
+            const toolbar = props.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;
+            let formData = $xeGantt.getFormData();
+            let button = null;
+            let code = 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 : null;
+                code = proxyTarget;
+            }
+            else {
+                button = proxyTarget;
+                code = button.code;
+            }
+            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 = [];
+                        let filterList = [];
+                        let pageParams = {};
+                        if (pagerConfig) {
+                            if (isInited || isReload) {
+                                tablePage.currentPage = 1;
                             }
-                            let sortList = [];
-                            let filterList = [];
-                            let pageParams = {};
-                            if (pagerConfig) {
-                                if (isInited || isReload) {
-                                    // 重置分页
-                                    tablePage.currentPage = 1;
-                                }
-                                if (isEnableConf(pagerOpts)) {
-                                    pageParams = Object.assign({}, tablePage);
+                            if (isEnableConf(pagerConfig)) {
+                                pageParams = Object.assign({}, tablePage);
+                            }
+                        }
+                        if (isInited) {
+                            // 重置代理表单数据
+                            if (proxyConfig && isEnableConf(proxyOpts) && proxyOpts.form) {
+                                formData = $xeGantt.getDefaultFormData();
+                                reactData.formData = formData;
+                            }
+                            if ($xeTable) {
+                                const tableInternalData = $xeTable;
+                                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();
                             }
-                            if (isInited) {
-                                // 重置代理表单数据
-                                if (proxyConfig && isEnableConf(proxyOpts) && proxyOpts.form) {
-                                    formData = getDefaultFormData();
-                                    reactData.formData = formData;
+                        }
+                        else {
+                            if ($xeTable) {
+                                if (isReload) {
+                                    $xeTable.clearAll();
                                 }
-                                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
-                                            };
-                                        });
-                                    }
+                                else {
+                                    sortList = $xeTable.getSortColumns();
                                     filterList = $xeTable.getCheckedFilters();
                                 }
                             }
-                            else {
-                                if ($xeTable) {
-                                    if (isReload) {
-                                        $xeTable.clearAll();
-                                    }
-                                    else {
-                                        sortList = $xeTable.getSortColumns();
-                                        filterList = $xeTable.getCheckedFilters();
+                        }
+                        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 = [];
+                            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 {
+                                    const listProp = resConfigs.list;
+                                    tableData = (listProp ? (XEUtils.isFunction(listProp) ? listProp({ data: rest, $table: $xeTable, $grid: null, $gantt: $xeGantt }) : XEUtils.get(rest, listProp)) : rest) || [];
+                                }
+                            }
+                            if ($xeTable) {
+                                $xeTable.loadData(tableData);
                             }
-                            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 = [];
-                                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 {
+                                $xeTable.$nextTick(() => {
+                                    if ($xeTable) {
+                                        $xeTable.loadData(tableData);
+                                    }
+                                });
+                            }
+                            if (afterQuery) {
+                                afterQuery(...applyArgs);
+                            }
+                            if (querySuccessMethods) {
+                                querySuccessMethods(Object.assign(Object.assign({}, commitParams), { response: rest }));
+                            }
+                            return { status: true };
+                        }).catch((rest) => {
+                            reactData.tableLoading = false;
+                            if (queryErrorMethods) {
+                                queryErrorMethods(Object.assign(Object.assign({}, 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) {
-                                    $xeTable.loadData(tableData);
-                                }
-                                else {
-                                    nextTick(() => {
-                                        if ($xeTable) {
-                                            $xeTable.loadData(tableData);
+                                    if (deleteSuccessMethods) {
+                                        deleteSuccessMethods(Object.assign(Object.assign({}, 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(Object.assign(Object.assign({}, commitParams), { response: rest }));
-                                }
-                                return { status: true };
-                            }).catch((rest) => {
-                                reactData.tableLoading = false;
-                                if (queryErrorMethods) {
-                                    queryErrorMethods(Object.assign(Object.assign({}, commitParams), { response: rest }));
-                                }
-                                return { status: false };
+                                        VxeUI.modal.message({ id: code, content: $xeGantt.getRespMsg(rest, 'vxe.grid.operError'), status: 'error' });
+                                    }
+                                    if (deleteErrorMethods) {
+                                        deleteErrorMethods(Object.assign(Object.assign({}, 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;
                     }
-                    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
-                            };
-                            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(Object.assign(Object.assign({}, 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' });
-                                            }
+                    else {
+                        errLog('vxe.error.notFunc', ['proxy-config.ajax.delete']);
+                    }
+                    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.resolve();
+                        if (editRules) {
+                            // 只校验新增和修改的数据
+                            restPromise = $xeGantt[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)(...applyArgs))
+                                    .then(rest => {
+                                    reactData.tableLoading = false;
+                                    $xeTable.clearPendingRow();
+                                    if (isRespMsg) {
+                                        // 检测弹窗模块
+                                        if (!VxeUI.modal) {
+                                            errLog('vxe.error.reqModule', ['Modal']);
                                         }
-                                        if (deleteErrorMethods) {
-                                            deleteErrorMethods(Object.assign(Object.assign({}, 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(Object.assign(Object.assign({}, commitParams), { response: rest }));
+                                    }
+                                    return { status: true };
+                                })
+                                    .catch(rest => {
+                                    reactData.tableLoading = false;
+                                    if (isRespMsg) {
+                                        // 检测弹窗模块
+                                        if (!VxeUI.modal) {
+                                            errLog('vxe.error.reqModule', ['Modal']);
                                         }
-                                        return { status: false };
-                                    });
+                                        VxeUI.modal.message({ id: code, content: $xeGantt.getRespMsg(rest, 'vxe.grid.operError'), status: 'error' });
+                                    }
+                                    if (saveErrorMethods) {
+                                        saveErrorMethods(Object.assign(Object.assign({}, commitParams), { response: rest }));
+                                    }
+                                    return { status: false };
                                 });
                             }
                             else {
                                 if (isActiveMsg) {
-                                    if (VxeUI.modal) {
-                                        VxeUI.modal.message({ id: code, content: getI18n('vxe.grid.selectOneRecord'), status: 'warning' });
+                                    // 检测弹窗模块
+                                    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.save']);
+                    }
+                    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.delete']);
+                            errLog('vxe.error.notCommands', [code]);
                         }
-                        break;
                     }
-                    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.resolve();
-                            if (editRules) {
-                                // 只校验新增和修改的数据
-                                restPromise = $xeTable[validConfig && validConfig.msgMode === 'full' ? 'fullValidate' : 'validate'](body.insertRecords.concat(updateRecords));
+                }
+            }
+            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) {
+            const $xeGantt = this;
+            const props = $xeGantt;
+            const formOpts = $xeGantt.computeFormOpts;
+            const { formConfig } = props;
+            const { items } = formOpts;
+            const itemList = [];
+            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;
+            if ($form) {
+                return $form.reset();
+            }
+            return $xeGantt.$nextTick();
+        },
+        validateForm() {
+            const $xeGantt = this;
+            const $form = $xeGantt.$refs.refForm;
+            if ($form) {
+                return $form.validate();
+            }
+            return $xeGantt.$nextTick();
+        },
+        validateFormField(field) {
+            const $xeGantt = this;
+            const $form = $xeGantt.$refs.refForm;
+            if ($form) {
+                return $form.validateField(field);
+            }
+            return $xeGantt.$nextTick();
+        },
+        clearFormValidate(field) {
+            const $xeGantt = this;
+            const $form = $xeGantt.$refs.refForm;
+            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) {
+            const $xeGantt = this;
+            const $pager = $xeGantt.$refs.refPager;
+            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) {
+            const $xeGantt = this;
+            const $pager = $xeGantt.$refs.refPager;
+            if ($pager) {
+                $pager.endPageByEvent(evnt);
+            }
+        },
+        setCurrentPage(currentPage) {
+            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, currentPage) {
+            const $xeGantt = this;
+            const $pager = $xeGantt.$refs.refPager;
+            if ($pager) {
+                $pager.setCurrentPageByEvent(evnt, currentPage);
+            }
+        },
+        setPageSize(pageSize) {
+            const $xeGantt = this;
+            const reactData = $xeGantt.reactData;
+            const { tablePage } = reactData;
+            tablePage.pageSize = Math.max(1, XEUtils.toNumber(pageSize));
+            return $xeGantt.$nextTick();
+        },
+        setPageSizeByEvent(evnt, pageSize) {
+            const $xeGantt = this;
+            const $pager = $xeGantt.$refs.refPager;
+            if ($pager) {
+                $pager.setPageSizeByEvent(evnt, pageSize);
+            }
+        },
+        getProxyInfo() {
+            const $xeGantt = this;
+            const props = $xeGantt;
+            const $xeTable = $xeGantt.$refs.refTable;
+            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() : []
+                };
+            }
+            return null;
+        },
+        refreshTaskView() {
+            const $xeGantt = this;
+            const $ganttView = $xeGantt.$refs.refGanttView;
+            if ($ganttView) {
+                return $ganttView.refreshData();
+            }
+            return $xeGantt.$nextTick();
+        },
+        callSlot(slotFunc, params, h, vNodes) {
+            const $xeGantt = this;
+            const slots = $xeGantt.$scopedSlots;
+            if (slotFunc) {
+                if (XEUtils.isString(slotFunc)) {
+                    slotFunc = slots[slotFunc] || null;
+                }
+                if (XEUtils.isFunction(slotFunc)) {
+                    return getSlotVNs(slotFunc.call(this, params, h, vNodes));
+                }
+            }
+            return [];
+        },
+        /**
+         * 获取需要排除的高度
+         */
+        getExcludeHeight() {
+            const $xeGantt = this;
+            const reactData = $xeGantt.reactData;
+            const { isZMax } = reactData;
+            const el = $xeGantt.$refs.refElem;
+            if (el) {
+                const formWrapper = $xeGantt.$refs.refFormWrapper;
+                const toolbarWrapper = $xeGantt.$refs.refToolbarWrapper;
+                const topWrapper = $xeGantt.$refs.refTopWrapper;
+                const bottomWrapper = $xeGantt.$refs.refBottomWrapper;
+                const pagerWrapper = $xeGantt.$refs.refPagerWrapper;
+                const parentEl = el.parentElement;
+                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;
+            if (el) {
+                const parentEl = el.parentElement;
+                return (reactData.isZMax ? getDomNode().visibleHeight : (parentEl ? XEUtils.toNumber(getComputedStyle(parentEl).height) : 0)) - $xeGantt.getExcludeHeight();
+            }
+            return 0;
+        },
+        triggerToolbarCommitEvent(params, evnt) {
+            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}` : 'proxy-query', Object.assign(Object.assign({}, rest), { isReload: code === 'reload' }), evnt);
+                }
+            });
+        },
+        triggerToolbarBtnEvent(button, evnt) {
+            const $xeGantt = this;
+            $xeGantt.triggerToolbarCommitEvent(button, evnt);
+            $xeGantt.dispatchEvent('toolbar-button-click', { code: button.code, button }, evnt);
+        },
+        triggerToolbarTolEvent(tool, evnt) {
+            const $xeGantt = this;
+            $xeGantt.triggerToolbarCommitEvent(tool, evnt);
+            $xeGantt.dispatchEvent('toolbar-tool-click', { code: tool.code, tool }, evnt);
+        },
+        triggerZoomEvent(evnt) {
+            const $xeGantt = this;
+            const reactData = $xeGantt.reactData;
+            $xeGantt.zoom();
+            $xeGantt.dispatchEvent('zoom', { type: reactData.isZMax ? 'max' : 'revert' }, evnt);
+        },
+        handleTaskCellClickEvent(evnt, params) {
+            const $xeGantt = this;
+            $xeGantt.dispatchEvent('task-cell-click', params, evnt);
+        },
+        handleTaskCellDblclickEvent(evnt, params) {
+            const $xeGantt = this;
+            $xeGantt.dispatchEvent('task-cell-dblclick', params, evnt);
+        },
+        handleTaskBarClickEvent(evnt, params) {
+            const $xeGantt = this;
+            $xeGantt.dispatchEvent('task-bar-click', params, evnt);
+        },
+        handleTaskBarDblclickEvent(evnt, params) {
+            const $xeGantt = this;
+            $xeGantt.dispatchEvent('task-bar-dblclick', params, evnt);
+        },
+        loadColumn(columns) {
+            const $xeGantt = this;
+            const slots = $xeGantt.$scopedSlots;
+            const $xeTable = $xeGantt.$refs.refTable;
+            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 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(Object.assign(Object.assign({}, 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(Object.assign(Object.assign({}, commitParams), { response: rest }));
-                                        }
-                                        return { status: false };
-                                    });
-                                }
-                                else {
-                                    if (isActiveMsg) {
-                                        if (VxeUI.modal) {
-                                            VxeUI.modal.message({ id: code, content: getI18n('vxe.grid.dataUnchanged'), status: 'info' });
-                                        }
-                                    }
-                                }
-                            });
+                        }
+                    });
+                }
+            });
+            return $xeTable.loadColumn(columns);
+        },
+        reloadColumn(columns) {
+            const $xeGantt = this;
+            $xeGantt.clearAll();
+            return $xeGantt.loadColumn(columns);
+        },
+        getConfigSlot(slotConfigs) {
+            const $xeGantt = this;
+            const slots = $xeGantt.$scopedSlots;
+            const slotConf = {};
+            XEUtils.objectMap(slotConfigs, (slotFunc, slotKey) => {
+                if (slotFunc) {
+                    if (XEUtils.isString(slotFunc)) {
+                        if (slots[slotFunc]) {
+                            slotConf[slotKey] = slots[slotFunc];
                         }
                         else {
-                            errLog('vxe.error.notFunc', ['proxy-config.ajax.save']);
+                            errLog('vxe.error.notSlot', [slotFunc]);
                         }
-                        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]);
-                            }
-                        }
+                    else {
+                        slotConf[slotKey] = slotFunc;
                     }
                 }
-                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) {
-                const formOpts = computeFormOpts.value;
-                const { formConfig } = props;
-                const { items } = formOpts;
-                const itemList = [];
-                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 slotConf;
+        },
+        getToolbarSlots() {
+            const $xeGantt = this;
+            const slots = $xeGantt.$scopedSlots;
+            const toolbarOpts = $xeGantt.computeToolbarOpts;
+            const toolbarOptSlots = toolbarOpts.slots;
+            const toolbarSlots = {};
+            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 nextTick();
-            },
-            clearFormValidate(field) {
-                const $form = refForm.value;
-                if ($form) {
-                    return $form.clearValidate(field);
+                if (buttonPrefixSlot) {
+                    toolbarSlots.buttonPrefix = buttonPrefixSlot;
                 }
-                return nextTick();
-            },
-            homePage() {
-                const { tablePage } = reactData;
-                tablePage.currentPage = 1;
-                return nextTick();
-            },
-            homePageByEvent(evnt) {
-                const $pager = refPager.value;
-                if ($pager) {
-                    $pager.homePageByEvent(evnt);
+                if (buttonSuffixSlot) {
+                    toolbarSlots.buttonSuffix = buttonSuffixSlot;
                 }
-            },
-            endPage() {
-                const { tablePage } = reactData;
-                const pageCount = computePageCount.value;
-                tablePage.currentPage = pageCount;
-                return nextTick();
-            },
-            endPageByEvent(evnt) {
-                const $pager = refPager.value;
-                if ($pager) {
-                    $pager.endPageByEvent(evnt);
+                if (toolsSlot) {
+                    toolbarSlots.tools = toolsSlot;
                 }
-            },
-            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);
-                }
-            },
-            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);
+                if (toolPrefixSlot) {
+                    toolbarSlots.toolPrefix = toolPrefixSlot;
                 }
-            },
-            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() : []
-                    };
+                if (toolSuffixSlot) {
+                    toolbarSlots.toolSuffix = toolSuffixSlot;
                 }
-                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()
-            // }
-        };
-        const ganttPrivateMethods = {
-            extendTableMethods,
-            callSlot(slotFunc, params) {
-                if (slotFunc) {
-                    if (XEUtils.isString(slotFunc)) {
-                        slotFunc = slots[slotFunc] || null;
+            }
+            return toolbarSlots;
+        },
+        getFuncSlot(optSlots, slotKey) {
+            const $xeGantt = this;
+            const slots = $xeGantt.$scopedSlots;
+            const funcSlot = optSlots[slotKey];
+            if (funcSlot) {
+                if (XEUtils.isString(funcSlot)) {
+                    if (slots[funcSlot]) {
+                        return slots[funcSlot];
                     }
-                    if (XEUtils.isFunction(slotFunc)) {
-                        return getSlotVNs(slotFunc(params));
+                    else {
+                        errLog('vxe.error.notSlot', [funcSlot]);
                     }
                 }
-                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;
-                    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 el = refElem.value;
-                if (el) {
-                    const parentEl = el.parentElement;
-                    return (reactData.isZMax ? getDomNode().visibleHeight : (parentEl ? XEUtils.toNumber(getComputedStyle(parentEl).height) : 0)) - ganttPrivateMethods.getExcludeHeight();
-                }
-                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}` : 'proxy-query', Object.assign(Object.assign({}, 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);
-            }
-        };
-        Object.assign($xeGantt, ganttExtendTableMethods, ganttMethods, ganttPrivateMethods, {
-            // 检查插槽
-            loadColumn(columns) {
-                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]);
-                                }
-                            }
-                        });
-                    }
-                });
-                if ($xeTable) {
-                    return $xeTable.loadColumn(columns);
+                else {
+                    return funcSlot;
                 }
-                return nextTick();
-            },
-            reloadColumn(columns) {
-                $xeGantt.clearAll();
-                return $xeGantt.loadColumn(columns);
             }
-        });
-        /**
-         * 渲染表单
-         */
-        const renderForm = () => {
-            const { formConfig, proxyConfig } = props;
+            return null;
+        },
+        //
+        // Render
+        //
+        renderDefaultForm(h) {
+            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 = [];
-                if (slots.form) {
-                    slotVNs = slots.form({ $grid: null, $gantt: $xeGantt });
-                }
-                else {
-                    if (formOpts.items) {
-                        const formSlots = {};
-                        if (!formOpts.inited) {
-                            formOpts.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 = {};
+                if (!formOpts.inited) {
+                    formOpts.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];
-                                    }
-                                }
-                            });
+                            beforeItem.call($xeGantt, { $grid: $xeGantt, $gantt: null, item });
                         });
-                        if (VxeUIFormComponent) {
-                            slotVNs.push(h(VxeUIFormComponent, Object.assign(Object.assign({ 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) {
+            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);
-        };
-        /**
-         * 渲染工具栏
-         */
-        const renderToolbar = () => {
+        },
+        renderToolbar(h) {
+            const VxeUIToolbarComponent = VxeUI.getComponent('VxeToolbar');
+            const $xeGantt = this;
+            const props = $xeGantt;
+            const slots = $xeGantt.$scopedSlots;
             const { toolbarConfig } = props;
-            const toolbarOpts = computeToolbarOpts.value;
-            if ((toolbarConfig && isEnableConf(toolbarOpts)) || slots.toolbar) {
-                let slotVNs = [];
-                if (slots.toolbar) {
-                    slotVNs = slots.toolbar({ $grid: null, $gantt: $xeGantt });
-                }
-                else {
-                    const toolbarOptSlots = toolbarOpts.slots;
-                    const toolbarSlots = {};
-                    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, Object.assign(Object.assign({ 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);
-        };
-        /**
-         * 渲染表格顶部区域
-         */
-        const renderTop = () => {
+        },
+        renderTop(h) {
+            const $xeGantt = this;
+            const slots = $xeGantt.$scopedSlots;
             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);
-        };
-        const renderTableLeft = () => {
+                }, topSlot.call($xeGantt, { $grid: null, $gantt: $xeGantt }))
+                : renderEmptyElement($xeGantt);
+        },
+        renderTableLeft(h) {
+            const $xeGantt = this;
+            const slots = $xeGantt.$scopedSlots;
             const leftSlot = slots.left;
             if (leftSlot) {
                 return h('div', {
@@ -1421,8 +1601,10 @@ export default defineVxeComponent({
                 }, leftSlot({ $grid: null, $gantt: $xeGantt }));
             }
             return renderEmptyElement($xeGantt);
-        };
-        const renderTableRight = () => {
+        },
+        renderTableRight(h) {
+            const $xeGantt = this;
+            const slots = $xeGantt.$scopedSlots;
             const rightSlot = slots.right;
             if (rightSlot) {
                 return h('div', {
@@ -1430,159 +1612,161 @@ export default defineVxeComponent({
                 }, rightSlot({ $grid: null, $gantt: $xeGantt }));
             }
             return renderEmptyElement($xeGantt);
-        };
-        /**
-         * 渲染表格
-         */
-        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 = {};
-            if (emptySlot) {
-                slotObj.empty = emptySlot;
-            }
-            if (loadingSlot) {
-                slotObj.loading = loadingSlot;
-            }
-            if (rowDragIconSlot) {
-                slotObj.rowDragIcon = rowDragIconSlot;
-            }
-            if (columnDragIconSlot) {
-                slotObj.columnDragIcon = columnDragIconSlot;
-            }
+        },
+        renderTable(h) {
+            const $xeGantt = this;
+            const slots = $xeGantt.$scopedSlots;
+            const tableProps = $xeGantt.computeTableProps;
             return h('div', {
-                ref: refTableWrapper,
                 class: 'vxe-gantt--table-wrapper'
             }, [
-                h(VxeTableComponent, Object.assign(Object.assign({ ref: refTable }, tableProps), tableOns), slotObj)
+                h(VxeTableComponent, {
+                    key: 'table',
+                    props: tableProps,
+                    on: getTableOns($xeGantt),
+                    scopedSlots: slots,
+                    ref: 'refTable'
+                })
             ]);
-        };
-        /**
-         * 渲染表格底部区域
-         */
-        const renderBottom = () => {
-            if (slots.bottom) {
-                return h('div', {
-                    ref: refBottomWrapper,
+        },
+        renderBottom(h) {
+            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);
-        };
-        /**
-         * 渲染分页
-         */
-        const renderPager = () => {
+                }, bottomSlot.call($xeGantt, { $grid: null, $gantt: $xeGantt }))
+                : renderEmptyElement($xeGantt);
+        },
+        renderPager(h) {
+            const VxeUIPagerComponent = VxeUI.getComponent('VxePager');
+            const $xeGantt = this;
+            const props = $xeGantt;
+            const slots = $xeGantt.$scopedSlots;
+            const reactData = $xeGantt.reactData;
             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, Object.assign(Object.assign(Object.assign({ ref: refPager }, pagerOpts), (proxyConfig && isEnableConf(proxyOpts) ? reactData.tablePage : {})), { onPageChange: pageChangeEvent }), getConfigSlot(pagerOpts.slots))
+                            ? h(VxeUIPagerComponent, {
+                                ref: 'refPager',
+                                props: Object.assign(Object.assign({}, 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) {
             return h('div', {
-                ref: refGanttWrapper,
+                ref: 'refGanttWrapper',
                 class: 'vxe-gantt--view-wrapper'
             }, [
                 h(GanttViewComponent, {
-                    ref: refGanttView
+                    ref: 'refGanttView'
                 })
             ]);
-        };
-        const renderSplitBar = () => {
+        },
+        renderSplitBar(h) {
+            const $xeGantt = this;
+            const reactData = $xeGantt.reactData;
             const { showLeftView, showRightView } = reactData;
+            const taskSplitOpts = $xeGantt.computeTaskSplitOpts;
+            const { enabled, resize, showCollapseTableButton, showCollapseTaskButton } = taskSplitOpts;
+            if (!enabled) {
+                return renderEmptyElement($xeGantt);
+            }
+            const ons = {};
+            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)
             ]);
-        };
-        const renderChildLayout = (layoutKeys) => {
+        },
+        renderChildLayout(h, layoutKeys) {
+            const $xeGantt = this;
             const childVNs = [];
             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', {
@@ -1599,10 +1783,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}`]);
@@ -1610,16 +1794,18 @@ export default defineVxeComponent({
                 }
             });
             return childVNs;
-        };
-        const renderLayout = () => {
-            const currLayoutConf = computeCurrLayoutConf.value;
+        },
+        renderLayout(h) {
+            const $xeGantt = this;
+            const slots = $xeGantt.$scopedSlots;
+            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'
                 }, [
@@ -1630,7 +1816,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'
@@ -1639,22 +1825,25 @@ export default defineVxeComponent({
                 ]),
                 h('div', {
                     class: 'vxe-gantt--layout-footer-wrapper'
-                }, renderChildLayout(footKeys)),
+                }, $xeGantt.renderChildLayout(h, footKeys)),
                 h('div', {
                     class: 'vxe-gantt--border-line'
                 })
             ];
-        };
-        const renderVN = () => {
+        },
+        renderVN(h) {
+            const $xeGantt = this;
+            const props = $xeGantt;
+            const reactData = $xeGantt.reactData;
             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,
@@ -1664,83 +1853,63 @@ export default defineVxeComponent({
                         'show--right': showRightView
                     }],
                 style: styles
-            }, renderLayout());
-        };
-        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');
-        });
-        watch(computeCustomPageSizeFlag, () => {
-            initPages('pageSize');
-        });
-        watch(computeCustomTotalFlag, () => {
-            initPages('total');
-        });
-        watch(() => props.proxyConfig, () => {
-            initProxy();
-        });
-        hooks.forEach((options) => {
-            const { setupGantt } = options;
-            if (setupGantt) {
-                const hookRest = setupGantt($xeGantt);
-                if (hookRest && XEUtils.isObject(hookRest)) {
-                    Object.assign($xeGantt, hookRest);
+            }, $xeGantt.renderLayout(h));
+        } }),
+    created() {
+        // 使用已安装的组件，如果未安装则不渲染
+        const VxeUIFormComponent = VxeUI.getComponent('VxeForm');
+        const VxeUIPagerComponent = VxeUI.getComponent('VxePager');
+        const VxeUIToolbarComponent = VxeUI.getComponent('VxeToolbar');
+        const $xeGantt = this;
+        const props = $xeGantt;
+        const proxyOpts = $xeGantt.computeProxyOpts;
+        if (props.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']);
+        }
+        $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']);
-                    }
-                }
-                // 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 (props.pagerConfig) {
+                if (!VxeUIPagerComponent) {
+                    errLog('vxe.error.reqComp', ['vxe-pager']);
                 }
-                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;
-        provide('$xeGantt', $xeGantt);
-        return $xeGantt;
+        $xeGantt.initPages();
     },
-    render() {
-        return this.renderVN();
+    mounted() {
+        const $xeGantt = this;
+        const props = $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;
+        globalEvents.off($xeGantt, 'keydown');
+        XEUtils.assign(internalData, createInternalData());
+    },
+    render(h) {
+        return this.renderVN(h);
     }
-});
+};