vxe-gantt 0.0.3 → 3.0.0-beta.0

package/es/gantt/src/gantt-view.js

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