vxe-table 3.12.9 → 3.12.10-beta.0

package/es/table/src/methods.js

@@ -1,21 +1,13 @@
 import XEUtils from 'xe-utils';
-import { browse, getTpImg, isPx, isScale, hasClass, addClass, removeClass, getEventTargetNode, getPaddingTopBottomSize, setScrollTop, setScrollLeft, isNodeElement } from '../../ui/src/dom';
+import { browse, getTpImg, isPx, isScale, hasClass, addClass, removeClass, getEventTargetNode, getPaddingTopBottomSize, setScrollTop, setScrollLeft } from '../../ui/src/dom';
 import { getLastZIndex, nextZIndex, hasChildrenList, getFuncText, isEnableConf, formatText, eqEmptyValue } from '../../ui/src/utils';
 import { VxeUI } from '../../ui';
 import Cell from './cell';
-import { getRowUniqueId, clearTableAllStatus, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, getRootColumn, getColReMinWidth } from './util';
+import { getRowUniqueId, clearTableAllStatus, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, getRootColumn, getColReMinWidth, getRefElem } from './util';
 import { getSlotVNs } from '../../ui/src/vn';
 import { warnLog, errLog } from '../../ui/src/log';
 const { getConfig, getI18n, renderer, formats, interceptor, createEvent } = VxeUI;
 const customStorageKey = 'VXE_CUSTOM_STORE';
-// 获取所有的列，排除分组
-const getColumnList = (columns) => {
-    const result = [];
-    columns.forEach((column) => {
-        result.push(...(column.children && column.children.length ? getColumnList(column.children) : [column]));
-    });
-    return result;
-};
 function eqCellValue(row1, row2, field) {
     const val1 = XEUtils.get(row1, field);
     const val2 = XEUtils.get(row2, field);
@@ -68,18 +60,20 @@ function handleReserveRow(_vm, reserveRowMap) {
 }
 function handleVirtualXVisible($xeTable) {
     const internalData = $xeTable;
-    const { visibleColumn } = internalData;
-    const tableBody = $xeTable.$refs.tableBody;
-    const tableBodyElem = tableBody ? tableBody.$el : null;
-    if (tableBodyElem) {
-        const { scrollLeft, clientWidth } = tableBodyElem;
-        const endWidth = scrollLeft + clientWidth;
+    const { elemStore, visibleColumn } = internalData;
+    const leftFixedWidth = $xeTable.computeLeftFixedWidth;
+    const rightFixedWidth = $xeTable.computeRightFixedWidth;
+    const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
+    if (bodyScrollElem) {
+        const { scrollLeft, clientWidth } = bodyScrollElem;
+        const startWidth = scrollLeft + leftFixedWidth;
+        const endWidth = scrollLeft + clientWidth - rightFixedWidth;
         let toVisibleIndex = -1;
         let cWidth = 0;
         let visibleSize = 0;
         for (let colIndex = 0, colLen = visibleColumn.length; colIndex < colLen; colIndex++) {
             cWidth += visibleColumn[colIndex].renderWidth;
-            if (toVisibleIndex === -1 && scrollLeft < cWidth) {
+            if (toVisibleIndex === -1 && startWidth < cWidth) {
                 toVisibleIndex = colIndex;
             }
             if (toVisibleIndex >= 0) {
@@ -89,14 +83,87 @@ function handleVirtualXVisible($xeTable) {
                 }
             }
         }
-        return { toVisibleIndex: Math.max(0, toVisibleIndex), visibleSize: Math.max(6, visibleSize) };
+        return { toVisibleIndex: Math.max(0, toVisibleIndex), visibleSize: Math.max(1, visibleSize) };
     }
     return { toVisibleIndex: 0, visibleSize: 6 };
 }
+function handleCustomRestore($xeTable, storeData) {
+    const reactData = $xeTable;
+    const internalData = $xeTable;
+    let { collectColumn } = internalData;
+    const { resizableData, sortData, visibleData, fixedData } = storeData;
+    let hasCustomSort = false;
+    // 处理还原
+    if (resizableData || sortData || visibleData || fixedData) {
+        XEUtils.eachTree(collectColumn, (column, index, items, path, parentColumn) => {
+            const colKey = column.getKey();
+            // 支持一级
+            if (!parentColumn) {
+                if (fixedData && fixedData[colKey] !== undefined) {
+                    column.fixed = fixedData[colKey];
+                }
+                if (sortData && XEUtils.isNumber(sortData[colKey])) {
+                    hasCustomSort = true;
+                    column.renderSortNumber = sortData[colKey];
+                }
+            }
+            if (resizableData && XEUtils.isNumber(resizableData[colKey])) {
+                column.resizeWidth = resizableData[colKey];
+            }
+            if (visibleData && XEUtils.isBoolean(visibleData[colKey])) {
+                column.visible = visibleData[colKey];
+            }
+        });
+        // 如果自定义了顺序
+        if (hasCustomSort) {
+            collectColumn = XEUtils.orderBy(collectColumn, 'renderSortNumber');
+            internalData.collectColumn = collectColumn;
+            internalData.tableFullColumn = getColumnList(collectColumn);
+        }
+        reactData.isCustomStatus = true;
+    }
+    else {
+        reactData.isCustomStatus = false;
+    }
+}
+/**
+ * 还原自定义列操作状态
+ */
+function restoreCustomStorage($xeTable) {
+    const props = $xeTable;
+    const { customConfig } = props;
+    const tableId = $xeTable.computeTableId;
+    const customOpts = $xeTable.computeCustomOpts;
+    const { storage, restoreStore } = customOpts;
+    const isAllCustom = storage === true;
+    const storageOpts = isAllCustom ? {} : Object.assign({}, storage || {});
+    const isCustomResizable = isAllCustom || storageOpts.resizable;
+    const isCustomVisible = isAllCustom || storageOpts.visible;
+    const isCustomFixed = isAllCustom || storageOpts.fixed;
+    const isCustomSort = isAllCustom || storageOpts.sort;
+    if ((customConfig ? isEnableConf(customOpts) : customOpts.enabled) && (isCustomResizable || isCustomVisible || isCustomFixed || isCustomSort)) {
+        if (!tableId) {
+            errLog('vxe.error.reqProp', ['id']);
+            return;
+        }
+        const storeData = getCustomStorageMap(tableId);
+        if (restoreStore) {
+            return Promise.resolve(restoreStore({ id: tableId, type: 'restore', storeData })).then(storeData => {
+                if (!storeData) {
+                    return;
+                }
+                return handleCustomRestore($xeTable, storeData);
+            }).catch(e => e);
+        }
+        else {
+            return handleCustomRestore($xeTable, storeData);
+        }
+    }
+}
 /**
-   * 更新数据列的 Map
-   * 牺牲数据组装的耗时，用来换取使用过程中的流畅
-   */
+ * 更新数据列的 Map
+ * 牺牲数据组装的耗时，用来换取使用过程中的流畅
+ */
 function cacheColumnMap($xeTable) {
     const props = $xeTable;
     const reactData = $xeTable;
@@ -129,7 +196,7 @@ function cacheColumnMap($xeTable) {
             fullColumnFieldData[field] = rest;
         }
         else {
-            if (storage || isCrossDrag || isSelfToChildDrag) {
+            if (storage || (columnOpts.drag && (isCrossDrag || isSelfToChildDrag))) {
                 errLog('vxe.error.reqProp', [`${column.getTitle() || type || ''} -> column.field`]);
             }
         }
@@ -262,12 +329,323 @@ function handleVirtualTreeToList($xeTable) {
     }
     return internalData.afterFullData;
 }
+function updateStyle($xeTable) {
+    const props = $xeTable;
+    const reactData = $xeTable;
+    const internalData = $xeTable;
+    const { border, showOverflow: allColumnOverflow, showHeaderOverflow: allColumnHeaderOverflow, showFooterOverflow: allColumnFooterOverflow, mouseConfig, spanMethod, footerSpanMethod } = props;
+    const { isGroup, currentRow, tableColumn, scrollXLoad, scrollYLoad, scrollbarWidth, scrollbarHeight, columnStore, editStore, isAllOverflow, expandColumn } = reactData;
+    const { visibleColumn, fullColumnIdData, tableHeight, tableWidth, headerHeight, footerHeight, elemStore, customHeight, customMinHeight, customMaxHeight } = internalData;
+    const el = $xeTable.$refs.refElem;
+    if (!el) {
+        return;
+    }
+    const containerList = ['main', 'left', 'right'];
+    const emptyPlaceholderElem = $xeTable.$refs.refEmptyPlaceholder;
+    const cellOffsetWidth = $xeTable.computeCellOffsetWidth;
+    const mouseOpts = $xeTable.computeMouseOpts;
+    const bodyWrapperElem = getRefElem(elemStore['main-body-wrapper']);
+    const bodyTableElem = getRefElem(elemStore['main-body-table']);
+    if (emptyPlaceholderElem) {
+        emptyPlaceholderElem.style.top = `${headerHeight}px`;
+        emptyPlaceholderElem.style.height = bodyWrapperElem ? `${bodyWrapperElem.offsetHeight - scrollbarHeight}px` : '';
+    }
+    let bodyHeight = 0;
+    let bodyMaxHeight = 0;
+    const bodyMinHeight = customMinHeight - headerHeight - footerHeight - scrollbarHeight;
+    if (customMaxHeight) {
+        bodyMaxHeight = Math.max(bodyMinHeight, customMaxHeight - headerHeight - footerHeight - scrollbarHeight);
+    }
+    if (customHeight) {
+        bodyHeight = customHeight - headerHeight - footerHeight - scrollbarHeight;
+    }
+    if (!bodyHeight) {
+        if (bodyTableElem) {
+            bodyHeight = bodyTableElem.clientHeight;
+        }
+    }
+    if (bodyHeight) {
+        if (bodyMaxHeight) {
+            bodyHeight = Math.min(bodyMaxHeight, bodyHeight);
+        }
+        bodyHeight = Math.max(bodyMinHeight, bodyHeight);
+    }
+    const scrollXVirtualEl = $xeTable.$refs.refScrollXVirtualElem;
+    if (scrollXVirtualEl) {
+        scrollXVirtualEl.style.height = `${scrollbarHeight}px`;
+        scrollXVirtualEl.style.visibility = scrollbarHeight ? 'visible' : 'hidden';
+    }
+    const xHandleEl = $xeTable.$refs.refScrollXHandleElem;
+    if (xHandleEl) {
+        xHandleEl.style.width = `${el.clientWidth - scrollbarWidth}px`;
+    }
+    const xRightCornerEl = $xeTable.$refs.refScrollXRightCornerElem;
+    if (xRightCornerEl) {
+        xRightCornerEl.style.width = `${scrollbarWidth}px`;
+        xRightCornerEl.style.display = scrollbarWidth && scrollbarHeight ? 'block' : '';
+    }
+    const scrollYVirtualEl = $xeTable.$refs.refScrollYVirtualElem;
+    if (scrollYVirtualEl) {
+        scrollYVirtualEl.style.width = `${scrollbarWidth}px`;
+        scrollYVirtualEl.style.height = `${bodyHeight + headerHeight + footerHeight}px`;
+        scrollYVirtualEl.style.visibility = scrollbarWidth ? 'visible' : 'hidden';
+    }
+    const yTopCornerEl = $xeTable.$refs.refScrollYTopCornerElem;
+    if (yTopCornerEl) {
+        yTopCornerEl.style.height = `${headerHeight}px`;
+        yTopCornerEl.style.display = headerHeight ? 'block' : '';
+    }
+    const yHandleEl = $xeTable.$refs.refScrollYHandleElem;
+    if (yHandleEl) {
+        yHandleEl.style.height = `${bodyHeight}px`;
+        yHandleEl.style.top = `${headerHeight}px`;
+    }
+    const yBottomCornerEl = $xeTable.$refs.refScrollYBottomCornerElem;
+    if (yBottomCornerEl) {
+        yBottomCornerEl.style.height = `${footerHeight}px`;
+        yBottomCornerEl.style.top = `${headerHeight + bodyHeight}px`;
+        yBottomCornerEl.style.display = footerHeight ? 'block' : '';
+    }
+    containerList.forEach((name, index) => {
+        const fixedType = index > 0 ? name : '';
+        const layoutList = ['header', 'body', 'footer'];
+        const isFixedLeft = fixedType === 'left';
+        let fixedColumn = [];
+        let fixedWrapperElem;
+        if (fixedType) {
+            fixedColumn = isFixedLeft ? columnStore.leftList : columnStore.rightList;
+            fixedWrapperElem = (isFixedLeft ? $xeTable.$refs.refLeftContainer : $xeTable.$refs.refRightContainer);
+        }
+        layoutList.forEach(layout => {
+            const wrapperElem = getRefElem(elemStore[`${name}-${layout}-wrapper`]);
+            const currScrollElem = getRefElem(elemStore[`${name}-${layout}-scroll`]);
+            const tableElem = getRefElem(elemStore[`${name}-${layout}-table`]);
+            if (layout === 'header') {
+                // 表头体样式处理
+                // 横向滚动渲染
+                let tWidth = tableWidth;
+                let renderColumnList = tableColumn;
+                let isOptimizeMode = false;
+                if (isGroup) {
+                    renderColumnList = visibleColumn;
+                    if (fixedType) {
+                        if (wrapperElem) {
+                            wrapperElem.style.width = tWidth ? `${tWidth}px` : '';
+                        }
+                    }
+                }
+                else {
+                    // 如果是使用优化模式
+                    if (scrollXLoad || scrollYLoad || allColumnHeaderOverflow) {
+                        if (spanMethod || footerSpanMethod) {
+                            // 如果不支持优化模式
+                        }
+                        else {
+                            isOptimizeMode = true;
+                        }
+                    }
+                    if (fixedType) {
+                        renderColumnList = visibleColumn;
+                        // 如果是使用优化模式
+                        if (isOptimizeMode) {
+                            renderColumnList = fixedColumn || [];
+                        }
+                        if (!isOptimizeMode) {
+                            if (wrapperElem) {
+                                wrapperElem.style.width = tWidth ? `${tWidth}px` : '';
+                            }
+                        }
+                    }
+                }
+                tWidth = renderColumnList.reduce((previous, column) => previous + column.renderWidth, 0);
+                if (currScrollElem) {
+                    currScrollElem.style.height = `${headerHeight}px`;
+                }
+                if (tableElem) {
+                    tableElem.style.width = tWidth ? `${tWidth}px` : '';
+                }
+                const repairElem = getRefElem(elemStore[`${name}-${layout}-repair`]);
+                if (repairElem) {
+                    repairElem.style.width = `${tableWidth}px`;
+                }
+                const listElem = getRefElem(elemStore[`${name}-${layout}-list`]);
+                if (isGroup && listElem) {
+                    XEUtils.arrayEach(listElem.querySelectorAll('.col--group'), (thElem) => {
+                        const colNode = $xeTable.getColumnNode(thElem);
+                        if (colNode) {
+                            const column = colNode.item;
+                            const { showHeaderOverflow } = column;
+                            const cellOverflow = XEUtils.isBoolean(showHeaderOverflow) ? showHeaderOverflow : allColumnHeaderOverflow;
+                            const showEllipsis = cellOverflow === 'ellipsis';
+                            const showTitle = cellOverflow === 'title';
+                            const showTooltip = cellOverflow === true || cellOverflow === 'tooltip';
+                            const hasEllipsis = showTitle || showTooltip || showEllipsis;
+                            let childWidth = 0;
+                            let countChild = 0;
+                            if (hasEllipsis) {
+                                XEUtils.eachTree(column.children, (item) => {
+                                    if (!item.children || !column.children.length) {
+                                        countChild++;
+                                    }
+                                    childWidth += item.renderWidth;
+                                }, { children: 'children' });
+                            }
+                            thElem.style.width = hasEllipsis ? `${childWidth - countChild - (border ? 2 : 0)}px` : '';
+                        }
+                    });
+                }
+            }
+            else if (layout === 'body') {
+                if (currScrollElem) {
+                    currScrollElem.style.maxHeight = customMaxHeight ? `${bodyMaxHeight}px` : '';
+                    currScrollElem.style.height = customHeight ? `${bodyHeight}px` : '';
+                    currScrollElem.style.minHeight = `${bodyMinHeight}px`;
+                }
+                // 如果是固定列
+                if (fixedWrapperElem) {
+                    if (wrapperElem) {
+                        wrapperElem.style.top = `${headerHeight}px`;
+                    }
+                    fixedWrapperElem.style.height = `${customHeight > 0 ? customHeight : (tableHeight + headerHeight + footerHeight + scrollbarHeight)}px`;
+                    fixedWrapperElem.style.width = `${fixedColumn.reduce((previous, column) => previous + column.renderWidth, 0)}px`;
+                }
+                let tWidth = tableWidth;
+                let renderColumnList = tableColumn;
+                let isOptimizeMode = false;
+                // 如果是使用优化模式
+                if (scrollXLoad || scrollYLoad || (allColumnOverflow && isAllOverflow)) {
+                    if (expandColumn || spanMethod || footerSpanMethod) {
+                        // 如果不支持优化模式
+                    }
+                    else {
+                        isOptimizeMode = true;
+                    }
+                }
+                if (fixedType) {
+                    renderColumnList = visibleColumn;
+                    if (isOptimizeMode) {
+                        renderColumnList = fixedColumn || [];
+                    }
+                    if (!isOptimizeMode) {
+                        if (wrapperElem) {
+                            wrapperElem.style.width = tWidth ? `${tWidth}px` : '';
+                        }
+                    }
+                }
+                tWidth = renderColumnList.reduce((previous, column) => previous + column.renderWidth, 0);
+                if (tableElem) {
+                    tableElem.style.width = tWidth ? `${tWidth}px` : '';
+                    // 兼容性处理
+                    tableElem.style.paddingRight = scrollbarWidth && fixedType && (browse['-moz'] || browse.safari) ? `${scrollbarWidth}px` : '';
+                }
+                const emptyBlockElem = getRefElem(elemStore[`${name}-${layout}-emptyBlock`]);
+                if (emptyBlockElem) {
+                    emptyBlockElem.style.width = tWidth ? `${tWidth}px` : '';
+                }
+            }
+            else if (layout === 'footer') {
+                let tWidth = tableWidth;
+                let renderColumnList = tableColumn;
+                let isOptimizeMode = false;
+                // 如果是使用优化模式
+                if (scrollXLoad || scrollYLoad || allColumnFooterOverflow) {
+                    if (spanMethod || footerSpanMethod) {
+                        // 如果不支持优化模式
+                    }
+                    else {
+                        isOptimizeMode = true;
+                    }
+                }
+                if (fixedType) {
+                    renderColumnList = visibleColumn;
+                    if (isOptimizeMode) {
+                        renderColumnList = fixedColumn || [];
+                    }
+                    if (!isOptimizeMode) {
+                        if (wrapperElem) {
+                            wrapperElem.style.width = tWidth ? `${tWidth}px` : '';
+                        }
+                    }
+                }
+                tWidth = renderColumnList.reduce((previous, column) => previous + column.renderWidth, 0);
+                if (currScrollElem) {
+                    currScrollElem.style.height = `${footerHeight}px`;
+                    // 如果是固定列
+                    if (fixedWrapperElem) {
+                        if (wrapperElem) {
+                            wrapperElem.style.top = `${customHeight > 0 ? customHeight - footerHeight - scrollbarHeight : tableHeight + headerHeight}px`;
+                        }
+                    }
+                }
+                if (tableElem) {
+                    tableElem.style.width = tWidth ? `${tWidth}px` : '';
+                }
+            }
+            const colgroupElem = getRefElem(elemStore[`${name}-${layout}-colgroup`]);
+            if (colgroupElem) {
+                XEUtils.arrayEach(colgroupElem.children, (colElem) => {
+                    const colid = colElem.getAttribute('name');
+                    if (fullColumnIdData[colid]) {
+                        const colRest = fullColumnIdData[colid];
+                        const column = colRest.column;
+                        const { showHeaderOverflow, showFooterOverflow, showOverflow } = column;
+                        let cellOverflow;
+                        colElem.style.width = `${column.renderWidth}px`;
+                        if (layout === 'header') {
+                            cellOverflow = XEUtils.isUndefined(showHeaderOverflow) || XEUtils.isNull(showHeaderOverflow) ? allColumnHeaderOverflow : showHeaderOverflow;
+                        }
+                        else if (layout === 'footer') {
+                            cellOverflow = XEUtils.isUndefined(showFooterOverflow) || XEUtils.isNull(showFooterOverflow) ? allColumnFooterOverflow : showFooterOverflow;
+                        }
+                        else {
+                            cellOverflow = XEUtils.isUndefined(showOverflow) || XEUtils.isNull(showOverflow) ? allColumnOverflow : showOverflow;
+                        }
+                        const showEllipsis = cellOverflow === 'ellipsis';
+                        const showTitle = cellOverflow === 'title';
+                        const showTooltip = cellOverflow === true || cellOverflow === 'tooltip';
+                        let hasEllipsis = showTitle || showTooltip || showEllipsis;
+                        const listElem = getRefElem(elemStore[`${name}-${layout}-list`]);
+                        // 纵向虚拟滚动不支持动态行高
+                        if (scrollYLoad && !hasEllipsis) {
+                            hasEllipsis = true;
+                        }
+                        if (listElem) {
+                            XEUtils.arrayEach(listElem.querySelectorAll(`.${column.id}`), (elem) => {
+                                const colspan = parseInt(elem.getAttribute('colspan') || 1);
+                                const cellElem = elem.querySelector('.vxe-cell');
+                                let colWidth = column.renderWidth;
+                                if (cellElem) {
+                                    if (colspan > 1) {
+                                        const columnIndex = $xeTable.getColumnIndex(column);
+                                        for (let index = 1; index < colspan; index++) {
+                                            const nextColumn = $xeTable.getColumns(columnIndex + index);
+                                            if (nextColumn) {
+                                                colWidth += nextColumn.renderWidth;
+                                            }
+                                        }
+                                    }
+                                    cellElem.style.width = hasEllipsis ? `${colWidth - (cellOffsetWidth * colspan)}px` : '';
+                                }
+                            });
+                        }
+                    }
+                });
+            }
+        });
+    });
+    if (currentRow) {
+        $xeTable.setCurrentRow(currentRow);
+    }
+    if (mouseConfig && mouseOpts.selected && editStore.selected.row && editStore.selected.column) {
+        $xeTable.addCellSelectedClass();
+    }
+    return $xeTable.$nextTick();
+}
 function computeRowHeight($xeTable) {
-    const tableHeader = $xeTable.$refs.tableHeader;
-    const tableBody = $xeTable.$refs.tableBody;
+    const tableHeader = $xeTable.$refs.refTableHeader;
+    const tableBody = $xeTable.$refs.refTableBody;
     const tableBodyElem = tableBody ? tableBody.$el : null;
-    const vSize = $xeTable.computeSize;
-    const rowHeightMaps = $xeTable.computeRowHeightMaps;
+    const defaultRowHeight = $xeTable.computeDefaultRowHeight;
     let rowHeight = 0;
     if (tableBodyElem) {
         const tableHeaderElem = tableHeader ? tableHeader.$el : null;
@@ -281,21 +659,21 @@ function computeRowHeight($xeTable) {
         }
     }
     if (!rowHeight) {
-        rowHeight = rowHeightMaps[vSize || 'default'];
+        rowHeight = defaultRowHeight;
     }
     // 最低支持 18px 行高
     return Math.max(18, rowHeight);
 }
 function handleVirtualYVisible($xeTable) {
     const props = $xeTable;
+    const reactData = $xeTable;
     const internalData = $xeTable;
     const { showOverflow } = props;
-    const { scrollYStore, afterFullData, fullAllDataRowIdData } = internalData;
-    const tableBody = $xeTable.$refs.tableBody;
-    const tableBodyElem = tableBody ? tableBody.$el : null;
-    const { rowHeight } = scrollYStore;
-    if (tableBodyElem) {
-        const { scrollTop, clientHeight } = tableBodyElem;
+    const { rowHeight } = reactData;
+    const { elemStore, afterFullData, fullAllDataRowIdData } = internalData;
+    const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
+    if (bodyScrollElem) {
+        const { scrollTop, clientHeight } = bodyScrollElem;
         const endHeight = scrollTop + clientHeight;
         let toVisibleIndex = -1;
         let offsetTop = 0;
@@ -321,9 +699,9 @@ function handleVirtualYVisible($xeTable) {
                 }
             }
         }
-        return { toVisibleIndex: Math.max(0, toVisibleIndex), visibleSize: Math.max(8, visibleSize) };
+        return { toVisibleIndex: Math.max(0, toVisibleIndex), visibleSize: Math.max(6, visibleSize) };
     }
-    return { toVisibleIndex: 0, visibleSize: 8 };
+    return { toVisibleIndex: 0, visibleSize: 6 };
 }
 function calculateMergerOffsetIndex(list, offsetItem, type) {
     for (let mcIndex = 0, len = list.length; mcIndex < len; mcIndex++) {
@@ -457,18 +835,24 @@ function autoCellWidth($xeTable) {
     const props = $xeTable;
     const reactData = $xeTable;
     const internalData = $xeTable;
-    const tableHeader = $xeTable.$refs.tableHeader;
-    const tableBody = $xeTable.$refs.tableBody;
-    const tableFooter = $xeTable.$refs.tableFooter;
+    const { elemStore } = internalData;
+    const scrollbarOpts = $xeTable.computeScrollbarOpts;
+    const tableBody = $xeTable.$refs.refTableBody;
     const bodyElem = tableBody ? tableBody.$el : null;
-    const headerElem = tableHeader ? tableHeader.$el : null;
-    const footerElem = tableFooter ? tableFooter.$el : null;
     if (!bodyElem) {
         return;
     }
+    const yHandleEl = $xeTable.$refs.refScrollYHandleElem;
+    if (!yHandleEl) {
+        return;
+    }
+    const xHandleEl = $xeTable.$refs.refScrollXHandleElem;
+    if (!xHandleEl) {
+        return;
+    }
     let tableWidth = 0;
     const minCellWidth = 40; // 列宽最少限制 40px
-    const bodyWidth = bodyElem.clientWidth - 1;
+    const bodyWidth = bodyElem.clientWidth;
     let remainWidth = bodyWidth;
     let meanWidth = remainWidth / 100;
     const { fit } = props;
@@ -537,16 +921,16 @@ function autoCellWidth($xeTable) {
     });
     if (fit) {
         /**
-         * 偏移量算法
-         * 如果所有列足够放的情况下，从最后动态列开始分配
-         */
+             * 偏移量算法
+             * 如果所有列足够放的情况下，从最后动态列开始分配
+             */
         const dynamicList = scaleList.concat(scaleMinList).concat(pxMinList).concat(autoMinList).concat(remainList);
         let dynamicSize = dynamicList.length - 1;
         if (dynamicSize > 0) {
-            let odiffer = bodyWidth - tableWidth;
-            if (odiffer > 0) {
-                while (odiffer > 0 && dynamicSize >= 0) {
-                    odiffer--;
+            let i = bodyWidth - tableWidth;
+            if (i > 0) {
+                while (i > 0 && dynamicSize >= 0) {
+                    i--;
                     dynamicList[dynamicSize--].renderWidth++;
                 }
                 tableWidth = bodyWidth;
@@ -554,41 +938,20 @@ function autoCellWidth($xeTable) {
         }
     }
     const tableHeight = bodyElem.offsetHeight;
-    const overflowY = bodyElem.scrollHeight > bodyElem.clientHeight;
-    let scrollbarWidth = 0;
-    if (overflowY) {
-        scrollbarWidth = Math.max(bodyElem.offsetWidth - bodyElem.clientWidth, 0);
-    }
-    reactData.scrollbarWidth = scrollbarWidth;
+    const overflowY = yHandleEl.scrollHeight > yHandleEl.clientHeight;
+    reactData.scrollbarWidth = overflowY ? Math.max(scrollbarOpts.width || 0, yHandleEl.offsetWidth - yHandleEl.clientWidth) : 0;
     reactData.overflowY = overflowY;
     internalData.tableWidth = tableWidth;
     internalData.tableHeight = tableHeight;
-    let headerHeight = 0;
-    if (headerElem) {
-        headerHeight = headerElem.clientHeight;
-        $xeTable.$nextTick(() => {
-            // 检测是否同步滚动
-            if (headerElem && bodyElem && headerElem.scrollLeft !== bodyElem.scrollLeft) {
-                headerElem.scrollLeft = bodyElem.scrollLeft;
-            }
-        });
-    }
+    const headerTableElem = getRefElem(elemStore['main-header-table']);
+    const footerTableElem = getRefElem(elemStore['main-footer-table']);
+    const headerHeight = headerTableElem ? headerTableElem.clientHeight : 0;
+    const overflowX = tableWidth > bodyWidth;
+    const footerHeight = footerTableElem ? footerTableElem.clientHeight : 0;
+    reactData.scrollbarHeight = overflowX ? Math.max(scrollbarOpts.height || 0, xHandleEl.offsetHeight - xHandleEl.clientHeight) : 0;
     internalData.headerHeight = headerHeight;
-    let overflowX = false;
-    let footerHeight = 0;
-    let scrollbarHeight = 0;
-    if (footerElem) {
-        footerHeight = footerElem.offsetHeight;
-        overflowX = tableWidth > footerElem.clientWidth;
-        scrollbarHeight = Math.max(footerHeight - footerElem.clientHeight, 0);
-    }
-    else {
-        overflowX = tableWidth > bodyWidth;
-        scrollbarHeight = Math.max(tableHeight - bodyElem.clientHeight, 0);
-    }
     internalData.footerHeight = footerHeight;
     reactData.overflowX = overflowX;
-    reactData.scrollbarHeight = scrollbarHeight;
     updateHeight($xeTable);
     reactData.parentHeight = Math.max(internalData.headerHeight + footerHeight + 20, $xeTable.getParentHeight());
     if (overflowX) {
@@ -802,9 +1165,9 @@ function showDropTip($xeTable, evnt, trEl, thEl, showLine, dragPos) {
         const cdLineEl = $xeTable.$refs.refDragColLineElem;
         if (cdLineEl) {
             if (showLine) {
-                const leftContainerElem = $xeTable.$refs.leftContainer;
+                const leftContainerElem = $xeTable.$refs.refLeftContainer;
                 const leftContainerWidth = leftContainerElem ? leftContainerElem.clientWidth : 0;
-                const rightContainerElem = $xeTable.$refs.rightContainer;
+                const rightContainerElem = $xeTable.$refs.refRightContainer;
                 const rightContainerWidth = rightContainerElem ? rightContainerElem.clientWidth : 0;
                 const thRect = thEl.getBoundingClientRect();
                 let thWidth = thEl.clientWidth;
@@ -879,11 +1242,14 @@ function computeScrollLoad($xeTable) {
         const sXOpts = $xeTable.computeSXOpts;
         // 计算 X 逻辑
         if (scrollXLoad) {
-            const { visibleSize: visibleXSize } = handleVirtualXVisible($xeTable);
-            const offsetXSize = Math.max(0, sXOpts.oSize ? XEUtils.toNumber(sXOpts.oSize) : (browse.edge ? 5 : 0));
+            const { toVisibleIndex: toXVisibleIndex, visibleSize: visibleXSize } = handleVirtualXVisible($xeTable);
+            const offsetXSize = Math.max(0, sXOpts.oSize ? XEUtils.toNumber(sXOpts.oSize) : 0);
+            scrollXStore.preloadSize = 4;
             scrollXStore.offsetSize = offsetXSize;
             scrollXStore.visibleSize = visibleXSize;
             scrollXStore.endIndex = Math.max(scrollXStore.startIndex + scrollXStore.visibleSize + offsetXSize, scrollXStore.endIndex);
+            scrollXStore.visibleStartIndex = Math.max(scrollXStore.startIndex, toXVisibleIndex);
+            scrollXStore.visibleEndIndex = Math.min(scrollXStore.endIndex, toXVisibleIndex + visibleXSize);
             $xeTable.updateScrollXData().then(() => {
                 loadScrollXData($xeTable);
             });
@@ -896,12 +1262,15 @@ function computeScrollLoad($xeTable) {
         const rowHeight = computeRowHeight($xeTable);
         scrollYStore.rowHeight = rowHeight;
         reactData.rowHeight = rowHeight;
-        const { visibleSize: visibleYSize } = handleVirtualYVisible($xeTable);
+        const { toVisibleIndex: toYVisibleIndex, visibleSize: visibleYSize } = handleVirtualYVisible($xeTable);
         if (scrollYLoad) {
-            const offsetYSize = Math.max(0, sYOpts.oSize ? XEUtils.toNumber(sYOpts.oSize) : (browse.edge ? 10 : 0));
+            const offsetYSize = Math.max(0, sYOpts.oSize ? XEUtils.toNumber(sYOpts.oSize) : 0);
+            scrollYStore.preloadSize = 2;
             scrollYStore.offsetSize = offsetYSize;
             scrollYStore.visibleSize = visibleYSize;
             scrollYStore.endIndex = Math.max(scrollYStore.startIndex + visibleYSize + offsetYSize, scrollYStore.endIndex);
+            scrollYStore.visibleStartIndex = Math.max(scrollYStore.startIndex, toYVisibleIndex);
+            scrollYStore.visibleEndIndex = Math.min(scrollYStore.endIndex, toYVisibleIndex + visibleYSize);
             $xeTable.updateScrollYData().then(() => {
                 loadScrollYData($xeTable);
             });
@@ -910,7 +1279,7 @@ function computeScrollLoad($xeTable) {
             $xeTable.updateScrollYSpace();
         }
         $xeTable.$nextTick(() => {
-            $xeTable.updateStyle();
+            updateStyle($xeTable);
         });
     });
 }
@@ -933,17 +1302,42 @@ function handleRecalculateLayout($xeTable, reFull) {
         }
     });
 }
+function handleTableColumn($xeTable) {
+    const reactData = $xeTable;
+    const internalData = $xeTable;
+    const { scrollXLoad } = reactData;
+    const { visibleColumn, scrollXStore, fullColumnIdData } = internalData;
+    const tableColumn = scrollXLoad ? visibleColumn.slice(scrollXStore.startIndex, scrollXStore.endIndex) : visibleColumn.slice(0);
+    tableColumn.forEach((column, $index) => {
+        const colid = column.id;
+        const colRest = fullColumnIdData[colid];
+        if (colRest) {
+            colRest.$index = $index;
+        }
+    });
+    reactData.tableColumn = tableColumn;
+}
+function handleUpdateColumn($xeTable) {
+    const internalData = $xeTable;
+    const columnList = XEUtils.orderBy(internalData.collectColumn, 'renderSortNumber');
+    internalData.collectColumn = columnList;
+    const tableFullColumn = getColumnList(columnList);
+    internalData.tableFullColumn = tableFullColumn;
+    cacheColumnMap($xeTable);
+}
 function loadScrollXData($xeTable) {
     const reactData = $xeTable;
     const internalData = $xeTable;
     const { mergeList, mergeFooterList } = reactData;
     const { scrollXStore } = internalData;
-    const { startIndex, endIndex, offsetSize } = scrollXStore;
+    const { preloadSize, startIndex, endIndex, offsetSize } = scrollXStore;
     const { toVisibleIndex, visibleSize } = handleVirtualXVisible($xeTable);
     const offsetItem = {
-        startIndex: Math.max(0, toVisibleIndex - 1 - offsetSize),
-        endIndex: toVisibleIndex + visibleSize + offsetSize
+        startIndex: Math.max(0, toVisibleIndex - 1 - offsetSize - preloadSize),
+        endIndex: toVisibleIndex + visibleSize + offsetSize + preloadSize
     };
+    scrollXStore.visibleStartIndex = toVisibleIndex;
+    scrollXStore.visibleEndIndex = toVisibleIndex + visibleSize;
     calculateMergerOffsetIndex(mergeList.concat(mergeFooterList), offsetItem, 'col');
     const { startIndex: offsetStartIndex, endIndex: offsetEndIndex } = offsetItem;
     if (toVisibleIndex <= startIndex || toVisibleIndex >= endIndex - visibleSize - 1) {
@@ -955,6 +1349,198 @@ function loadScrollXData($xeTable) {
     }
     $xeTable.closeTooltip();
 }
+// 获取所有的列，排除分组
+function getColumnList(columns) {
+    const result = [];
+    columns.forEach((column) => {
+        result.push(...(column.children && column.children.length ? getColumnList(column.children) : [column]));
+    });
+    return result;
+}
+function parseColumns($xeTable, isReset) {
+    const props = $xeTable;
+    const reactData = $xeTable;
+    const internalData = $xeTable;
+    const { showOverflow } = props;
+    const rowOpts = $xeTable.computeRowOpts;
+    const leftList = [];
+    const centerList = [];
+    const rightList = [];
+    const { isGroup, columnStore } = reactData;
+    const sXOpts = $xeTable.computeSXOpts;
+    const { collectColumn, tableFullColumn, scrollXStore, fullColumnIdData } = internalData;
+    // 如果是分组表头，如果子列全部被隐藏，则根列也隐藏
+    if (isGroup) {
+        const leftGroupList = [];
+        const centerGroupList = [];
+        const rightGroupList = [];
+        XEUtils.eachTree(collectColumn, (column, index, items, path, parentColumn) => {
+            const isColGroup = hasChildrenList(column);
+            // 如果是分组，必须按组设置固定列，不允许给子列设置固定
+            if (parentColumn && parentColumn.fixed) {
+                column.fixed = parentColumn.fixed;
+            }
+            if (parentColumn && column.fixed !== parentColumn.fixed) {
+                errLog('vxe.error.groupFixed');
+            }
+            if (isColGroup) {
+                column.visible = !!XEUtils.findTree(column.children, (subColumn) => hasChildrenList(subColumn) ? false : subColumn.visible);
+            }
+            else if (column.visible) {
+                if (column.fixed === 'left') {
+                    leftList.push(column);
+                }
+                else if (column.fixed === 'right') {
+                    rightList.push(column);
+                }
+                else {
+                    centerList.push(column);
+                }
+            }
+        });
+        collectColumn.forEach((column) => {
+            if (column.visible) {
+                if (column.fixed === 'left') {
+                    leftGroupList.push(column);
+                }
+                else if (column.fixed === 'right') {
+                    rightGroupList.push(column);
+                }
+                else {
+                    centerGroupList.push(column);
+                }
+            }
+        });
+        reactData.tableGroupColumn = leftGroupList.concat(centerGroupList).concat(rightGroupList);
+    }
+    else {
+        // 重新分配列
+        tableFullColumn.forEach((column) => {
+            if (column.visible) {
+                if (column.fixed === 'left') {
+                    leftList.push(column);
+                }
+                else if (column.fixed === 'right') {
+                    rightList.push(column);
+                }
+                else {
+                    centerList.push(column);
+                }
+            }
+        });
+    }
+    const visibleColumn = leftList.concat(centerList).concat(rightList);
+    // 如果gt为0，则总是启用
+    const scrollXLoad = !!sXOpts.enabled && sXOpts.gt > -1 && (sXOpts.gt === 0 || sXOpts.gt < tableFullColumn.length);
+    reactData.hasFixedColumn = leftList.length > 0 || rightList.length > 0;
+    Object.assign(columnStore, { leftList, centerList, rightList });
+    if (scrollXLoad) {
+        if (showOverflow) {
+            if (!rowOpts.height) {
+                const errColumn = internalData.tableFullColumn.find(column => column.showOverflow === false);
+                if (errColumn) {
+                    errLog('vxe.error.errProp', [`column[field="${errColumn.field}"].show-overflow=false`, 'show-overflow=true']);
+                }
+            }
+        }
+        if (process.env.NODE_ENV === 'development') {
+            // if (props.showHeader && !props.showHeaderOverflow) {
+            //   warnLog('vxe.error.reqProp', ['show-header-overflow'])
+            // }
+            // if (props.showFooter && !props.showFooterOverflow) {
+            //   warnLog('vxe.error.reqProp', ['show-footer-overflow'])
+            // }
+            if (props.spanMethod) {
+                warnLog('vxe.error.scrollErrProp', ['span-method']);
+            }
+            if (props.footerSpanMethod) {
+                warnLog('vxe.error.scrollErrProp', ['footer-span-method']);
+            }
+        }
+        if (isReset) {
+            const { visibleSize } = handleVirtualXVisible($xeTable);
+            scrollXStore.startIndex = 0;
+            scrollXStore.endIndex = visibleSize;
+            scrollXStore.visibleSize = visibleSize;
+            scrollXStore.visibleStartIndex = 0;
+            scrollXStore.visibleEndIndex = visibleSize;
+        }
+    }
+    // 如果列被显示/隐藏，则清除合并状态
+    // 如果列被设置为固定，则清除合并状态
+    if (visibleColumn.length !== internalData.visibleColumn.length || !internalData.visibleColumn.every((column, index) => column === visibleColumn[index])) {
+        $xeTable.clearMergeCells();
+        $xeTable.clearMergeFooterItems();
+    }
+    reactData.scrollXLoad = scrollXLoad;
+    visibleColumn.forEach((column, index) => {
+        const colid = column.id;
+        const colRest = fullColumnIdData[colid];
+        if (colRest) {
+            colRest._index = index;
+        }
+    });
+    internalData.visibleColumn = visibleColumn;
+    handleTableColumn($xeTable);
+    if (isReset) {
+        return $xeTable.updateFooter().then(() => {
+            return $xeTable.recalculate();
+        }).then(() => {
+            $xeTable.updateCellAreas();
+            return $xeTable.recalculate();
+        });
+    }
+    return $xeTable.updateFooter();
+}
+function initColumnSort($xeTable) {
+    const internalData = $xeTable;
+    const { collectColumn } = internalData;
+    collectColumn.forEach((column, index) => {
+        const sortIndex = index + 1;
+        column.sortNumber = sortIndex;
+        column.renderSortNumber = sortIndex;
+    });
+}
+function handleColumn($xeTable, collectColumn) {
+    const $xeToolbar = $xeTable.$refs.$xeToolbar;
+    const reactData = $xeTable;
+    const internalData = $xeTable;
+    internalData.collectColumn = collectColumn;
+    const tableFullColumn = getColumnList(collectColumn);
+    internalData.tableFullColumn = tableFullColumn;
+    reactData.isLoading = true;
+    reactData.isDragColMove = false;
+    initColumnSort($xeTable);
+    return Promise.resolve(restoreCustomStorage($xeTable)).then(() => {
+        reactData.isLoading = false;
+        cacheColumnMap($xeTable);
+        parseColumns($xeTable, true).then(() => {
+            if (reactData.scrollXLoad) {
+                loadScrollXData($xeTable);
+            }
+        });
+        $xeTable.clearMergeCells();
+        $xeTable.clearMergeFooterItems();
+        $xeTable.handleTableData(true);
+        if (process.env.NODE_ENV === 'development') {
+            if ((reactData.scrollXLoad || reactData.scrollYLoad) && reactData.expandColumn) {
+                warnLog('vxe.error.scrollErrProp', ['column.type=expand']);
+            }
+        }
+        return $xeTable.$nextTick().then(() => {
+            if ($xeToolbar) {
+                $xeToolbar.syncUpdate({
+                    collectColumn: internalData.collectColumn,
+                    $table: $xeTable
+                });
+            }
+            if ($xeTable.handleUpdateCustomColumn) {
+                $xeTable.handleUpdateCustomColumn();
+            }
+            return $xeTable.recalculate();
+        });
+    });
+}
 /**
  * 纵向 Y 可视渲染处理
  */
@@ -964,14 +1550,16 @@ function loadScrollYData($xeTable) {
     const internalData = $xeTable;
     const { showOverflow } = props;
     const { mergeList } = reactData;
-    const { tableHeight, scrollYStore } = internalData;
-    const { startIndex, endIndex, offsetSize } = scrollYStore;
-    const autoOffsetYSize = showOverflow ? offsetSize : offsetSize + Math.min(8, Math.ceil(tableHeight / 200));
+    const { scrollYStore } = internalData;
+    const { preloadSize, startIndex, endIndex, offsetSize } = scrollYStore;
+    const autoOffsetYSize = showOverflow ? offsetSize : offsetSize + 1;
     const { toVisibleIndex, visibleSize } = handleVirtualYVisible($xeTable);
     const offsetItem = {
-        startIndex: Math.max(0, toVisibleIndex - 1 - offsetSize),
-        endIndex: toVisibleIndex + visibleSize + autoOffsetYSize
+        startIndex: Math.max(0, toVisibleIndex - 1 - offsetSize - preloadSize),
+        endIndex: toVisibleIndex + visibleSize + autoOffsetYSize + preloadSize
     };
+    scrollYStore.visibleStartIndex = toVisibleIndex;
+    scrollYStore.visibleEndIndex = toVisibleIndex + visibleSize;
     calculateMergerOffsetIndex(mergeList, offsetItem, 'row');
     const { startIndex: offsetStartIndex, endIndex: offsetEndIndex } = offsetItem;
     if (toVisibleIndex <= startIndex || toVisibleIndex >= endIndex - visibleSize - 1) {
@@ -994,16 +1582,20 @@ function checkLastSyncScroll($xeTable, isRollX, isRollY) {
         internalData.lcsRunTime = Date.now();
         internalData.lcsTimeout = undefined;
         internalData.inVirtualScroll = false;
+        internalData.inWheelScroll = false;
+        internalData.inHeaderScroll = false;
         internalData.inBodyScroll = false;
         internalData.inFooterScroll = false;
-        internalData.bodyScrollType = '';
+        internalData.scrollRenderType = '';
         if (isRollX && scrollXLoad) {
             $xeTable.updateScrollXData().then(() => {
+                calcCellHeight($xeTable);
                 loadScrollXData($xeTable);
             });
         }
         if (isRollY && scrollYLoad) {
             $xeTable.updateScrollYData().then(() => {
+                calcCellHeight($xeTable);
                 loadScrollYData($xeTable);
             });
         }
@@ -1271,7 +1863,7 @@ const Methods = {
         this.updateFooter();
         return this.$nextTick().then(() => {
             updateHeight($xeTable);
-            this.updateStyle();
+            updateStyle($xeTable);
         }).then(() => {
             computeScrollLoad($xeTable);
         }).then(() => {
@@ -1296,10 +1888,18 @@ const Methods = {
                     }
                     // 是否变更虚拟滚动
                     if (oldScrollYLoad === sYLoad) {
-                        restoreScrollLocation(this, targetScrollLeft, targetScrollTop).then(resolve);
+                        restoreScrollLocation(this, targetScrollLeft, targetScrollTop)
+                            .then(() => {
+                            resolve();
+                        });
                     }
                     else {
-                        setTimeout(() => restoreScrollLocation(this, targetScrollLeft, targetScrollTop).then(resolve));
+                        setTimeout(() => {
+                            restoreScrollLocation(this, targetScrollLeft, targetScrollTop)
+                                .then(() => {
+                                resolve();
+                            });
+                        });
                     }
                 });
             });
@@ -1387,8 +1987,9 @@ const Methods = {
      * @param {ColumnInfo} columns 列配置
      */
     loadColumn(columns) {
+        const $xeTable = this;
         const collectColumn = XEUtils.mapTree(columns, column => Cell.createColumn(this, column), { children: 'children' });
-        return this.handleColumn(collectColumn);
+        return handleColumn($xeTable, collectColumn);
     },
     /**
      * 加载列配置并恢复到初始状态
@@ -1400,51 +2001,9 @@ const Methods = {
             return this.loadColumn(columns);
         });
     },
-    initColumnSort() {
-        const { collectColumn } = this;
-        collectColumn.forEach((column, index) => {
-            const sortIndex = index + 1;
-            column.sortNumber = sortIndex;
-            column.renderSortNumber = sortIndex;
-        });
-    },
     handleColumn(collectColumn) {
         const $xeTable = this;
-        this.collectColumn = collectColumn;
-        const tableFullColumn = getColumnList(collectColumn);
-        this.tableFullColumn = tableFullColumn;
-        this._isLoading = true;
-        this.isDragColMove = false;
-        this.initColumnSort();
-        return Promise.resolve(this.restoreCustomStorage()).then(() => {
-            this._isLoading = false;
-            cacheColumnMap($xeTable);
-            this.parseColumns(true).then(() => {
-                if (this.scrollXLoad) {
-                    loadScrollXData($xeTable);
-                }
-            });
-            this.clearMergeCells();
-            this.clearMergeFooterItems();
-            this.handleTableData(true);
-            if (process.env.NODE_ENV === 'development') {
-                if ((this.scrollXLoad || this.scrollYLoad) && this.expandColumn) {
-                    warnLog('vxe.error.scrollErrProp', ['column.type=expand']);
-                }
-            }
-            return this.$nextTick().then(() => {
-                if (this.$toolbar) {
-                    this.$toolbar.syncUpdate({
-                        collectColumn: this.collectColumn,
-                        $table: this
-                    });
-                }
-                if ($xeTable.handleUpdateCustomColumn) {
-                    $xeTable.handleUpdateCustomColumn();
-                }
-                return this.recalculate();
-            });
-        });
+        return handleColumn($xeTable, collectColumn);
     },
     /**
      * 更新数据行的 Map
@@ -1909,7 +2468,7 @@ const Methods = {
         const rowid = getRowid(this, row);
         let bodyElem = null;
         if (column) {
-            bodyElem = $refs[`${column.fixed || 'table'}Body`] || $refs.tableBody;
+            bodyElem = $refs[`${column.fixed || 'table'}Body`] || $refs.refTableBody;
         }
         if (bodyElem && bodyElem.$el) {
             return bodyElem.$el.querySelector(`.vxe-body--row[rowid="${rowid}"] .${column.id}`);
@@ -2550,8 +3109,8 @@ const Methods = {
                 const colWidth = XEUtils.toInteger(width);
                 let rdWidth = colWidth;
                 if (isScale(width)) {
-                    const tableBody = $xeTable.$refs.tableBody;
-                    const bodyElem = tableBody ? tableBody.$el : null;
+                    const refTableBody = $xeTable.$refs.refTableBody;
+                    const bodyElem = refTableBody ? refTableBody.$el : null;
                     const bodyWidth = bodyElem ? bodyElem.clientWidth - 1 : 0;
                     rdWidth = Math.floor(colWidth * bodyWidth);
                 }
@@ -2797,150 +3356,16 @@ const Methods = {
      * 刷新列配置
      */
     refreshColumn(initSort) {
+        const $xeTable = this;
         if (initSort) {
-            this.handleUpdateColumn();
+            handleUpdateColumn($xeTable);
         }
-        return this.parseColumns(true).then(() => {
+        return parseColumns($xeTable, true).then(() => {
             return this.refreshScroll();
         }).then(() => {
             return this.recalculate();
         });
     },
-    /**
-     * 刷新列信息
-     * 将固定的列左边、右边分别靠边
-     */
-    parseColumns(isReset) {
-        const $xeTable = this;
-        const props = $xeTable;
-        const internalData = $xeTable;
-        const { showOverflow } = props;
-        const rowOpts = $xeTable.computeRowOpts;
-        const leftList = [];
-        const centerList = [];
-        const rightList = [];
-        const { collectColumn, tableFullColumn, isGroup, columnStore, sXOpts, scrollXStore, fullColumnIdData } = this;
-        // 如果是分组表头，如果子列全部被隐藏，则根列也隐藏
-        if (isGroup) {
-            const leftGroupList = [];
-            const centerGroupList = [];
-            const rightGroupList = [];
-            XEUtils.eachTree(collectColumn, (column, index, items, path, parentColumn) => {
-                const isColGroup = hasChildrenList(column);
-                // 如果是分组，必须按组设置固定列，不允许给子列设置固定
-                if (parentColumn && parentColumn.fixed) {
-                    column.fixed = parentColumn.fixed;
-                }
-                if (parentColumn && column.fixed !== parentColumn.fixed) {
-                    errLog('vxe.error.groupFixed');
-                }
-                if (isColGroup) {
-                    column.visible = !!XEUtils.findTree(column.children, (subColumn) => hasChildrenList(subColumn) ? null : subColumn.visible);
-                }
-                else if (column.visible) {
-                    if (column.fixed === 'left') {
-                        leftList.push(column);
-                    }
-                    else if (column.fixed === 'right') {
-                        rightList.push(column);
-                    }
-                    else {
-                        centerList.push(column);
-                    }
-                }
-            });
-            collectColumn.forEach((column) => {
-                if (column.visible) {
-                    if (column.fixed === 'left') {
-                        leftGroupList.push(column);
-                    }
-                    else if (column.fixed === 'right') {
-                        rightGroupList.push(column);
-                    }
-                    else {
-                        centerGroupList.push(column);
-                    }
-                }
-            });
-            this.tableGroupColumn = leftGroupList.concat(centerGroupList).concat(rightGroupList);
-        }
-        else {
-            // 重新分配列
-            tableFullColumn.forEach((column) => {
-                if (column.visible) {
-                    if (column.fixed === 'left') {
-                        leftList.push(column);
-                    }
-                    else if (column.fixed === 'right') {
-                        rightList.push(column);
-                    }
-                    else {
-                        centerList.push(column);
-                    }
-                }
-            });
-        }
-        const visibleColumn = leftList.concat(centerList).concat(rightList);
-        // 如果gt为0，则总是启用
-        const scrollXLoad = sXOpts.enabled && sXOpts.gt > -1 && (sXOpts.gt === 0 || sXOpts.gt <= tableFullColumn.length);
-        this.hasFixedColumn = leftList.length > 0 || rightList.length > 0;
-        Object.assign(columnStore, { leftList, centerList, rightList });
-        if (scrollXLoad) {
-            if (showOverflow) {
-                if (!rowOpts.height) {
-                    const errColumn = internalData.tableFullColumn.find((column) => column.showOverflow === false);
-                    if (errColumn) {
-                        errLog('vxe.error.errProp', [`column[field="${errColumn.field}"].show-overflow=false`, 'show-overflow=true']);
-                    }
-                }
-            }
-            if (process.env.NODE_ENV === 'development') {
-                // if (this.showHeader && !this.showHeaderOverflow) {
-                //   warnLog('vxe.error.reqProp', ['show-header-overflow'])
-                // }
-                // if (this.showFooter && !this.showFooterOverflow) {
-                //   warnLog('vxe.error.reqProp', ['show-footer-overflow'])
-                // }
-                if (this.spanMethod) {
-                    warnLog('vxe.error.scrollErrProp', ['span-method']);
-                }
-                if (this.footerSpanMethod) {
-                    warnLog('vxe.error.scrollErrProp', ['footer-span-method']);
-                }
-            }
-            if (isReset) {
-                const { visibleSize } = handleVirtualXVisible(this);
-                scrollXStore.startIndex = 0;
-                scrollXStore.endIndex = visibleSize;
-                scrollXStore.visibleSize = visibleSize;
-            }
-        }
-        // 如果列被显示/隐藏，则清除合并状态
-        // 如果列被设置为固定，则清除合并状态
-        if (visibleColumn.length !== this.visibleColumn.length || !this.visibleColumn.every((column, index) => column === visibleColumn[index])) {
-            this.clearMergeCells();
-            this.clearMergeFooterItems();
-        }
-        this.scrollXLoad = scrollXLoad;
-        visibleColumn.forEach((column, index) => {
-            const colid = column.id;
-            const colRest = fullColumnIdData[colid];
-            if (colRest) {
-                colRest._index = index;
-            }
-        });
-        this.visibleColumn = visibleColumn;
-        this.handleTableColumn();
-        if (isReset) {
-            return this.updateFooter().then(() => {
-                return this.recalculate();
-            }).then(() => {
-                this.updateCellAreas();
-                return this.recalculate();
-            });
-        }
-        return this.updateFooter();
-    },
     /**
      * 指定列宽的列进行拆分
      */
@@ -3019,377 +3444,115 @@ const Methods = {
                 $xeTable.saveCustomStore('update:visible');
                 $xeTable.updateCellAreas();
                 $xeTable.dispatchEvent('resizable-change', Object.assign(Object.assign({}, params), { resizeWidth }), evnt);
-                setTimeout(() => $xeTable.recalculate(true), 300);
-            });
-        }
-    },
-    /**
-     * 刷新滚动操作，手动同步滚动相关位置（对于某些特殊的操作，比如滚动条错位、固定列不同步）
-     */
-    refreshScroll() {
-        const { lastScrollLeft, lastScrollTop } = this;
-        const { $refs } = this;
-        const { tableBody, leftBody, rightBody, tableFooter } = $refs;
-        const tableBodyElem = tableBody ? tableBody.$el : null;
-        const leftBodyElem = leftBody ? leftBody.$el : null;
-        const rightBodyElem = rightBody ? rightBody.$el : null;
-        const tableFooterElem = tableFooter ? tableFooter.$el : null;
-        return new Promise(resolve => {
-            // 还原滚动条位置
-            if (lastScrollLeft || lastScrollTop) {
-                return restoreScrollLocation(this, lastScrollLeft, lastScrollTop).then(() => {
-                    // 存在滚动行为未结束情况
-                    setTimeout(resolve, 30);
-                });
-            }
-            // 重置
-            setScrollTop(tableBodyElem, lastScrollTop);
-            setScrollTop(leftBodyElem, lastScrollTop);
-            setScrollTop(rightBodyElem, lastScrollTop);
-            setScrollLeft(tableFooterElem, lastScrollLeft);
-            // 存在滚动行为未结束情况
-            setTimeout(resolve, 30);
-        });
-    },
-    /**
-     * 重新渲染布局
-     * 刷新布局
-     */
-    recalculate(reFull) {
-        const $xeTable = this;
-        const internalData = $xeTable;
-        return new Promise(resolve => {
-            const { rceTimeout, rceRunTime } = internalData;
-            const resizeOpts = $xeTable.computeResizeOpts;
-            const refreshDelay = resizeOpts.refreshDelay || 20;
-            const el = $xeTable.$refs.refElem;
-            if (el && el.clientWidth) {
-                autoCellWidth($xeTable);
-            }
-            if (rceTimeout) {
-                clearTimeout(rceTimeout);
-                if (rceRunTime && rceRunTime + (refreshDelay - 5) < Date.now()) {
-                    resolve(handleRecalculateLayout($xeTable, !!reFull));
-                }
-                else {
-                    $xeTable.$nextTick(() => {
-                        resolve();
-                    });
-                }
-            }
-            else {
-                resolve(handleRecalculateLayout($xeTable, !!reFull));
-            }
-            internalData.rceTimeout = setTimeout(() => {
-                internalData.rceTimeout = undefined;
-                handleRecalculateLayout($xeTable, !!reFull);
-            }, refreshDelay);
-        });
-    },
-    updateStyle() {
-        const $xeTable = this;
-        let { $refs, isGroup, fullColumnIdData, tableColumn, customHeight, customMinHeight, customMaxHeight, border, headerHeight, showFooter, showOverflow: allColumnOverflow, showHeaderOverflow: allColumnHeaderOverflow, showFooterOverflow: allColumnFooterOverflow, footerHeight, tableHeight, tableWidth, scrollbarHeight, scrollbarWidth, scrollXLoad, scrollYLoad, overflowX, cellOffsetWidth, columnStore, elemStore, editStore, currentRow, mouseConfig, spanMethod, expandColumn, footerSpanMethod, isAllOverflow, visibleColumn } = $xeTable;
-        const containerList = ['main', 'left', 'right'];
-        const emptyPlaceholderElem = $refs.emptyPlaceholder;
-        const bodyWrapperElem = elemStore['main-body-wrapper'];
-        if (emptyPlaceholderElem) {
-            emptyPlaceholderElem.style.top = `${headerHeight}px`;
-            emptyPlaceholderElem.style.height = bodyWrapperElem ? `${bodyWrapperElem.offsetHeight - scrollbarHeight}px` : '';
-        }
-        if (customHeight > 0) {
-            if (showFooter) {
-                customHeight += scrollbarHeight;
-            }
-        }
-        const scrollXVirtualEl = $xeTable.$refs.refScrollXVirtualElem;
-        if (scrollXVirtualEl) {
-            scrollXVirtualEl.style.height = `${scrollbarHeight}px`;
-        }
-        const scrollYVirtualEl = $xeTable.$refs.refScrollYVirtualElem;
-        if (scrollYVirtualEl) {
-            let bodyHeight = 0;
-            let bodyMaxHeight = 0;
-            const bodyMinHeight = customMinHeight - headerHeight - footerHeight;
-            if (customMaxHeight) {
-                bodyMaxHeight = customMaxHeight - headerHeight - footerHeight;
-                bodyMaxHeight = Math.max(bodyMinHeight, bodyMaxHeight);
-            }
-            if (customHeight) {
-                bodyHeight = customHeight - headerHeight - footerHeight;
-                if (bodyMaxHeight) {
-                    bodyHeight = Math.min(bodyMaxHeight, bodyHeight);
-                }
-                bodyHeight = Math.max(bodyMinHeight, bodyHeight);
-            }
-            scrollYVirtualEl.style.top = `${headerHeight}px`;
-            scrollYVirtualEl.style.width = `${scrollbarWidth}px`;
-            scrollYVirtualEl.style.height = `${bodyHeight + (overflowX ? -Math.max(1, scrollbarHeight) : 0)}px`;
-        }
-        containerList.forEach((name, index) => {
-            const fixedType = index > 0 ? name : '';
-            const layoutList = ['header', 'body', 'footer'];
-            const fixedColumn = columnStore[`${fixedType}List`];
-            const fixedWrapperElem = $refs[`${fixedType}Container`];
-            layoutList.forEach(layout => {
-                const wrapperElem = elemStore[`${name}-${layout}-wrapper`];
-                const tableElem = elemStore[`${name}-${layout}-table`];
-                if (layout === 'header') {
-                    // 表头体样式处理
-                    // 横向滚动渲染
-                    let tWidth = tableWidth;
-                    let renderColumnList = tableColumn;
-                    if (isGroup) {
-                        renderColumnList = visibleColumn;
-                    }
-                    else {
-                        if (fixedType) {
-                            // 如果是使用优化模式
-                            if (scrollXLoad || scrollYLoad || allColumnHeaderOverflow) {
-                                // 如果不支持优化模式
-                                if (spanMethod || footerSpanMethod) {
-                                    renderColumnList = visibleColumn;
-                                }
-                                else {
-                                    renderColumnList = fixedColumn || [];
-                                }
-                            }
-                            else {
-                                renderColumnList = visibleColumn;
-                            }
-                        }
-                    }
-                    tWidth = renderColumnList.reduce((previous, column) => previous + column.renderWidth, 0);
-                    if (tableElem) {
-                        tableElem.style.width = tWidth ? `${tWidth + scrollbarWidth}px` : '';
-                        // 修复 IE 中高度无法自适应问题
-                        if (browse.msie) {
-                            XEUtils.arrayEach(tableElem.querySelectorAll('.vxe-resizable'), (resizeElem) => {
-                                resizeElem.style.height = `${resizeElem.parentNode.offsetHeight}px`;
-                            });
-                        }
-                    }
-                    const repairElem = elemStore[`${name}-${layout}-repair`];
-                    if (repairElem) {
-                        repairElem.style.width = `${tableWidth}px`;
-                    }
-                    const listElem = elemStore[`${name}-${layout}-list`];
-                    if (isGroup && listElem) {
-                        XEUtils.arrayEach(listElem.querySelectorAll('.col--group'), (thElem) => {
-                            const colNode = this.getColumnNode(thElem);
-                            if (colNode) {
-                                const column = colNode.item;
-                                const { showHeaderOverflow } = column;
-                                const cellOverflow = XEUtils.isBoolean(showHeaderOverflow) ? showHeaderOverflow : allColumnHeaderOverflow;
-                                const showEllipsis = cellOverflow === 'ellipsis';
-                                const showTitle = cellOverflow === 'title';
-                                const showTooltip = cellOverflow === true || cellOverflow === 'tooltip';
-                                const hasEllipsis = showTitle || showTooltip || showEllipsis;
-                                let childWidth = 0;
-                                let countChild = 0;
-                                if (hasEllipsis) {
-                                    XEUtils.eachTree(column.children, item => {
-                                        if (!item.children || !column.children.length) {
-                                            countChild++;
-                                        }
-                                        childWidth += item.renderWidth;
-                                    });
-                                }
-                                thElem.style.width = hasEllipsis ? `${childWidth - countChild - (border ? 2 : 0)}px` : '';
-                            }
-                        });
-                    }
-                }
-                else if (layout === 'body') {
-                    const emptyBlockElem = elemStore[`${name}-${layout}-emptyBlock`];
-                    if (isNodeElement(wrapperElem)) {
-                        let bodyMaxHeight = 0;
-                        const bodyMinHeight = customMinHeight - headerHeight - footerHeight;
-                        if (customMaxHeight) {
-                            bodyMaxHeight = customMaxHeight - headerHeight - footerHeight;
-                            // 如果是固定列
-                            if (fixedType) {
-                                bodyMaxHeight -= (showFooter ? 0 : scrollbarHeight);
-                            }
-                            bodyMaxHeight = Math.max(bodyMinHeight, bodyMaxHeight);
-                            wrapperElem.style.maxHeight = `${bodyMaxHeight}px`;
-                        }
-                        if (customHeight) {
-                            let bodyHeight = customHeight - headerHeight - footerHeight;
-                            // 如果是固定列
-                            if (fixedType) {
-                                bodyHeight -= (showFooter ? 0 : scrollbarHeight);
-                            }
-                            if (bodyMaxHeight) {
-                                bodyHeight = Math.min(bodyMaxHeight, bodyHeight);
-                            }
-                            wrapperElem.style.height = `${Math.max(bodyMinHeight, bodyHeight)}px`;
-                        }
-                        else {
-                            wrapperElem.style.height = '';
-                        }
-                        wrapperElem.style.minHeight = `${bodyMinHeight}px`;
-                    }
-                    // 如果是固定列
-                    if (fixedWrapperElem) {
-                        const isRightFixed = fixedType === 'right';
-                        const fixedColumn = columnStore[`${fixedType}List`];
-                        if (isNodeElement(wrapperElem)) {
-                            wrapperElem.style.top = `${headerHeight}px`;
-                        }
-                        fixedWrapperElem.style.height = `${(customHeight > 0 ? customHeight - headerHeight - footerHeight : tableHeight) + headerHeight + footerHeight - scrollbarHeight * (showFooter ? 2 : 1)}px`;
-                        fixedWrapperElem.style.width = `${fixedColumn.reduce((previous, column) => previous + column.renderWidth, isRightFixed ? scrollbarWidth : 0)}px`;
-                    }
-                    let tWidth = tableWidth;
-                    let renderColumnList = tableColumn;
-                    if (fixedType) {
-                        // 如果是使用优化模式
-                        if (scrollXLoad || scrollYLoad || (allColumnOverflow && isAllOverflow)) {
-                            // 如果不支持优化模式
-                            if (expandColumn || spanMethod || footerSpanMethod) {
-                                renderColumnList = visibleColumn;
-                            }
-                            else {
-                                renderColumnList = fixedColumn || [];
-                            }
-                        }
-                        else {
-                            renderColumnList = visibleColumn;
-                        }
-                    }
-                    tWidth = renderColumnList.reduce((previous, column) => previous + column.renderWidth, 0);
-                    if (tableElem) {
-                        tableElem.style.width = tWidth ? `${tWidth}px` : '';
-                        // 兼容性处理
-                        tableElem.style.paddingRight = scrollbarWidth && fixedType && (browse['-moz'] || browse.safari) ? `${scrollbarWidth}px` : '';
-                    }
-                    if (emptyBlockElem) {
-                        emptyBlockElem.style.width = tWidth ? `${tWidth}px` : '';
-                    }
-                }
-                else if (layout === 'footer') {
-                    let tWidth = tableWidth;
-                    let renderColumnList = tableColumn;
-                    if (fixedType) {
-                        // 如果是使用优化模式
-                        if (scrollXLoad || scrollYLoad || allColumnFooterOverflow) {
-                            // 如果不支持优化模式
-                            if (spanMethod || footerSpanMethod) {
-                                renderColumnList = visibleColumn;
-                            }
-                            else {
-                                renderColumnList = fixedColumn || [];
-                            }
-                        }
-                        else {
-                            renderColumnList = visibleColumn;
-                        }
-                    }
-                    tWidth = renderColumnList.reduce((previous, column) => previous + column.renderWidth, 0);
-                    if (isNodeElement(wrapperElem)) {
-                        // 如果是固定列
-                        if (fixedWrapperElem) {
-                            wrapperElem.style.top = `${customHeight > 0 ? customHeight - footerHeight : tableHeight + headerHeight}px`;
-                        }
-                        wrapperElem.style.marginTop = `${-scrollbarHeight}px`;
-                    }
-                    if (tableElem) {
-                        tableElem.style.width = tWidth ? `${tWidth + scrollbarWidth}px` : '';
-                    }
+                setTimeout(() => $xeTable.recalculate(true), 300);
+            });
+        }
+    },
+    /**
+     * 刷新滚动操作，手动同步滚动相关位置（对于某些特殊的操作，比如滚动条错位、固定列不同步）
+     */
+    refreshScroll() {
+        const $xeTable = this;
+        const internalData = $xeTable;
+        const { elemStore, lastScrollLeft, lastScrollTop } = internalData;
+        const headerScrollElem = getRefElem(elemStore['main-header-scroll']);
+        const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
+        const footerScrollElem = getRefElem(elemStore['main-footer-scroll']);
+        const leftScrollElem = getRefElem(elemStore['left-body-scroll']);
+        const rightScrollElem = getRefElem(elemStore['right-body-scroll']);
+        const xHandleEl = $xeTable.$refs.refScrollXHandleElem;
+        const yHandleEl = $xeTable.$refs.refScrollYHandleElem;
+        return new Promise(resolve => {
+            // 还原滚动条位置
+            if (lastScrollLeft || lastScrollTop) {
+                return restoreScrollLocation($xeTable, lastScrollLeft, lastScrollTop).then().then(() => {
+                    // 存在滚动行为未结束情况
+                    setTimeout(resolve, 10);
+                });
+            }
+            internalData.intoRunScroll = true;
+            // 重置
+            setScrollTop(yHandleEl, lastScrollTop);
+            setScrollTop(bodyScrollElem, lastScrollTop);
+            setScrollTop(leftScrollElem, lastScrollTop);
+            setScrollTop(rightScrollElem, lastScrollTop);
+            setScrollLeft(xHandleEl, lastScrollLeft);
+            setScrollLeft(bodyScrollElem, lastScrollLeft);
+            setScrollLeft(headerScrollElem, lastScrollLeft);
+            setScrollLeft(footerScrollElem, lastScrollLeft);
+            // 存在滚动行为未结束情况
+            setTimeout(() => {
+                internalData.intoRunScroll = false;
+                resolve();
+            }, 10);
+        });
+    },
+    /**
+     * 重新渲染布局
+     * 刷新布局
+     */
+    recalculate(reFull) {
+        const $xeTable = this;
+        const internalData = $xeTable;
+        return new Promise(resolve => {
+            const { rceTimeout, rceRunTime } = internalData;
+            const resizeOpts = $xeTable.computeResizeOpts;
+            const refreshDelay = resizeOpts.refreshDelay || 20;
+            const el = $xeTable.$refs.refElem;
+            if (el && el.clientWidth) {
+                autoCellWidth($xeTable);
+            }
+            if (rceTimeout) {
+                clearTimeout(rceTimeout);
+                if (rceRunTime && rceRunTime + (refreshDelay - 5) < Date.now()) {
+                    resolve(handleRecalculateLayout($xeTable, !!reFull));
                 }
-                const colgroupElem = elemStore[`${name}-${layout}-colgroup`];
-                if (colgroupElem) {
-                    XEUtils.arrayEach(colgroupElem.children, (colElem) => {
-                        const colid = colElem.getAttribute('name');
-                        if (colid === 'col_gutter') {
-                            colElem.style.width = `${scrollbarWidth}px`;
-                        }
-                        if (fullColumnIdData[colid]) {
-                            const colRest = fullColumnIdData[colid];
-                            const column = colRest.column;
-                            const { showHeaderOverflow, showFooterOverflow, showOverflow } = column;
-                            let cellOverflow;
-                            colElem.style.width = `${column.renderWidth}px`;
-                            if (layout === 'header') {
-                                cellOverflow = XEUtils.isUndefined(showHeaderOverflow) || XEUtils.isNull(showHeaderOverflow) ? allColumnHeaderOverflow : showHeaderOverflow;
-                            }
-                            else if (layout === 'footer') {
-                                cellOverflow = XEUtils.isUndefined(showFooterOverflow) || XEUtils.isNull(showFooterOverflow) ? allColumnFooterOverflow : showFooterOverflow;
-                            }
-                            else {
-                                cellOverflow = XEUtils.isUndefined(showOverflow) || XEUtils.isNull(showOverflow) ? allColumnOverflow : showOverflow;
-                            }
-                            const showEllipsis = cellOverflow === 'ellipsis';
-                            const showTitle = cellOverflow === 'title';
-                            const showTooltip = cellOverflow === true || cellOverflow === 'tooltip';
-                            let hasEllipsis = showTitle || showTooltip || showEllipsis;
-                            const listElem = elemStore[`${name}-${layout}-list`];
-                            // 滚动的渲染不支持动态行高
-                            if (layout === 'header' || layout === 'footer') {
-                                if (scrollXLoad && !hasEllipsis) {
-                                    hasEllipsis = true;
-                                }
-                            }
-                            else {
-                                if ((scrollXLoad || scrollYLoad) && !hasEllipsis) {
-                                    hasEllipsis = true;
-                                }
-                            }
-                            if (listElem) {
-                                XEUtils.arrayEach(listElem.querySelectorAll(`.${column.id}`), (elem) => {
-                                    const colspan = parseInt(elem.getAttribute('colspan') || 1);
-                                    const cellElem = elem.querySelector('.vxe-cell');
-                                    let colWidth = column.renderWidth;
-                                    if (cellElem) {
-                                        if (colspan > 1) {
-                                            const columnIndex = this.getColumnIndex(column);
-                                            for (let index = 1; index < colspan; index++) {
-                                                const nextColumn = this.getColumns(columnIndex + index);
-                                                if (nextColumn) {
-                                                    colWidth += nextColumn.renderWidth;
-                                                }
-                                            }
-                                        }
-                                        cellElem.style.width = hasEllipsis ? `${colWidth - (cellOffsetWidth * colspan)}px` : '';
-                                    }
-                                });
-                            }
-                        }
+                else {
+                    $xeTable.$nextTick(() => {
+                        resolve();
                     });
                 }
-            });
+            }
+            else {
+                resolve(handleRecalculateLayout($xeTable, !!reFull));
+            }
+            internalData.rceTimeout = setTimeout(() => {
+                internalData.rceTimeout = undefined;
+                handleRecalculateLayout($xeTable, !!reFull);
+            }, refreshDelay);
         });
-        if (currentRow) {
-            this.setCurrentRow(currentRow);
-        }
-        if (mouseConfig && mouseConfig.selected && editStore.selected.row && editStore.selected.column) {
-            this.addColSdCls();
-        }
-        return this.$nextTick();
+    },
+    updateStyle() {
+        const $xeTable = this;
+        return updateStyle($xeTable);
     },
     /**
      * 处理固定列的显示状态
      */
     checkScrolling() {
         const $xeTable = this;
-        const { tableBody, leftContainer, rightContainer } = $xeTable.$refs;
-        const bodyElem = tableBody ? tableBody.$el : null;
+        const internalData = $xeTable;
+        const { elemStore } = internalData;
+        const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
+        const leftContainerElem = $xeTable.$refs.refLeftContainer;
+        const rightContainerElem = $xeTable.$refs.refRightContainer;
         const xHandleEl = $xeTable.$refs.refScrollXHandleElem;
-        const bodtTargetEl = xHandleEl || bodyElem;
+        const bodtTargetEl = xHandleEl || bodyScrollElem;
         if (bodtTargetEl) {
-            if (leftContainer) {
+            if (leftContainerElem) {
                 if (bodtTargetEl.scrollLeft > 0) {
-                    addClass(leftContainer, 'scrolling--middle');
+                    addClass(leftContainerElem, 'scrolling--middle');
                 }
                 else {
-                    removeClass(leftContainer, 'scrolling--middle');
+                    removeClass(leftContainerElem, 'scrolling--middle');
                 }
             }
-            if (rightContainer) {
+            if (rightContainerElem) {
                 if (bodtTargetEl.clientWidth < bodtTargetEl.scrollWidth - Math.ceil(bodtTargetEl.scrollLeft)) {
-                    addClass(rightContainer, 'scrolling--middle');
+                    addClass(rightContainerElem, 'scrolling--middle');
                 }
                 else {
-                    removeClass(rightContainer, 'scrolling--middle');
+                    removeClass(rightContainerElem, 'scrolling--middle');
                 }
             }
         }
@@ -3423,7 +3586,7 @@ const Methods = {
     handleGlobalMousedownEvent(evnt) {
         const { $el, $refs, $xegrid, $toolbar, mouseConfig, editStore, ctxMenuStore, editRules, editOpts, validOpts, areaOpts, filterStore, customStore, getRowNode } = this;
         const { actived } = editStore;
-        const { ctxWrapper, filterWrapper, customWrapper, validTip } = $refs;
+        const { refTableMenu, filterWrapper, customWrapper, refValidTooltip } = $refs;
         // 筛选
         if (filterWrapper) {
             if (getEventTargetNode(evnt, $el, 'vxe-cell--filter').flag) {
@@ -3458,7 +3621,7 @@ const Methods = {
                 // 如果是激活状态，点击了单元格之外
                 const cell = actived.args.cell;
                 if ((!cell || !getEventTargetNode(evnt, cell).flag)) {
-                    if (validTip && getEventTargetNode(evnt, validTip.$el).flag) {
+                    if (refValidTooltip && getEventTargetNode(evnt, refValidTooltip.$el).flag) {
                         // 如果是激活状态，且点击了校验提示框
                     }
                     else if (!this.lastCallTime || this.lastCallTime + 50 < Date.now()) {
@@ -3509,7 +3672,7 @@ const Methods = {
             }
         }
         else if (mouseConfig) {
-            if (!getEventTargetNode(evnt, $el).flag && !($xegrid && getEventTargetNode(evnt, $xegrid.$el).flag) && !(ctxWrapper && getEventTargetNode(evnt, ctxWrapper.$el).flag) && !($toolbar && getEventTargetNode(evnt, $toolbar.$el).flag)) {
+            if (!getEventTargetNode(evnt, $el).flag && !($xegrid && getEventTargetNode(evnt, $xegrid.$el).flag) && !(refTableMenu && getEventTargetNode(evnt, refTableMenu.$el).flag) && !($toolbar && getEventTargetNode(evnt, $toolbar.$el).flag)) {
                 if (this.clearSelected) {
                     this.clearSelected();
                 }
@@ -3528,7 +3691,7 @@ const Methods = {
             }
         }
         // 如果配置了快捷菜单且，点击了其他地方则关闭
-        if (ctxMenuStore.visible && ctxWrapper && !getEventTargetNode(evnt, ctxWrapper.$el).flag) {
+        if (ctxMenuStore.visible && refTableMenu && !getEventTargetNode(evnt, refTableMenu.$el).flag) {
             this.closeMenu();
         }
         const isActivated = getEventTargetNode(evnt, ($xegrid || this).$el).flag;
@@ -3665,8 +3828,8 @@ const Methods = {
                 else if (isContextMenu) {
                     // 如果按下上下文键
                     this._keyCtx = selected.row && selected.column && bodyCtxMenu.length;
-                    clearTimeout(this.keyCtxTimeout);
-                    this.keyCtxTimeout = setTimeout(() => {
+                    clearTimeout(internalData.keyCtxTimeout);
+                    internalData.keyCtxTimeout = setTimeout(() => {
                         this._keyCtx = false;
                     }, 1000);
                 }
@@ -4031,6 +4194,10 @@ const Methods = {
      * @param {Row} row 行对象
      */
     handleTooltip(evnt, cell, overflowElem, tipElem, params) {
+        const $xeTable = this;
+        if (!overflowElem) {
+            return $xeTable.$nextTick();
+        }
         params.cell = cell;
         const { $refs, tooltipOpts, tooltipStore } = this;
         const { column, row } = params;
@@ -4057,7 +4224,7 @@ const Methods = {
     },
     openTooltip(target, content) {
         const { $refs } = this;
-        const commTip = $refs.commTip;
+        const commTip = $refs.refCommTooltip;
         if (commTip) {
             return commTip.open(target, content);
         }
@@ -4069,7 +4236,7 @@ const Methods = {
     closeTooltip() {
         const { $refs, tooltipStore } = this;
         const tooltip = $refs.tooltip;
-        const commTip = $refs.commTip;
+        const commTip = $refs.refCommTooltip;
         if (tooltipStore.visible) {
             Object.assign(tooltipStore, {
                 row: null,
@@ -5250,6 +5417,7 @@ const Methods = {
         this.emitEvent('cell-dblclick', params, evnt);
     },
     handleDefaultSort() {
+        const $xeTable = this;
         const { sortConfig, sortOpts } = this;
         let { defaultSort } = sortOpts;
         if (defaultSort) {
@@ -5268,7 +5436,7 @@ const Methods = {
                     }
                 });
                 if (!sortOpts.remote) {
-                    this.handleTableData(true).then(this.updateStyle);
+                    this.handleTableData(true).then(() => updateStyle($xeTable));
                 }
             }
         }
@@ -5689,8 +5857,8 @@ const Methods = {
     },
     handleColDragSwapColumn() {
         const $xeTable = this;
-        $xeTable.handleUpdateColumn();
-        $xeTable.parseColumns(false).then(() => {
+        handleUpdateColumn($xeTable);
+        parseColumns($xeTable, false).then(() => {
             $xeTable.updateCellAreas();
             $xeTable.saveCustomStore('update:sort');
         });
@@ -5916,15 +6084,15 @@ const Methods = {
                 return;
             }
             const xHandleEl = $xeTable.$refs.refScrollXHandleElem;
-            const tableBody = $xeTable.$refs.tableBody;
-            const tableBodyElem = tableBody ? tableBody.$el : null;
+            const refTableBody = $xeTable.$refs.refTableBody;
+            const tableBodyElem = refTableBody ? refTableBody.$el : null;
             const scrollTargetEl = xHandleEl || tableBodyElem;
             if (scrollTargetEl) {
                 const wrapperRect = el.getBoundingClientRect();
                 const tableWidth = el.clientWidth;
-                const leftContainerElem = $xeTable.$refs.leftContainer;
+                const leftContainerElem = $xeTable.$refs.refLeftContainer;
                 const leftContainerWidth = leftContainerElem ? leftContainerElem.clientWidth : 0;
-                const rightContainerElem = $xeTable.$refs.rightContainer;
+                const rightContainerElem = $xeTable.$refs.refRightContainer;
                 const rightContainerWidth = rightContainerElem ? rightContainerElem.clientWidth : 0;
                 const srartX = wrapperRect.x + leftContainerWidth;
                 const endX = wrapperRect.x + tableWidth - rightContainerWidth;
@@ -6048,6 +6216,7 @@ const Methods = {
         return this.$nextTick();
     },
     sort(sortConfs, sortOrder) {
+        const $xeTable = this;
         const { sortOpts } = this;
         const { multiple, remote, orders } = sortOpts;
         if (sortConfs) {
@@ -6090,7 +6259,7 @@ const Methods = {
             }
             return this.$nextTick().then(() => {
                 this.updateCellAreas();
-                return this.updateStyle();
+                return updateStyle($xeTable);
             });
         }
         return this.$nextTick();
@@ -6135,7 +6304,7 @@ const Methods = {
             }
             return $xeTable.$nextTick().then(() => {
                 $xeTable.updateCellAreas();
-                return $xeTable.updateStyle();
+                return updateStyle($xeTable);
             });
         }
         return $xeTable.$nextTick();
@@ -6146,6 +6315,7 @@ const Methods = {
      * @param {String} column 列或字段名
      */
     clearSort(fieldOrColumn) {
+        const $xeTable = this;
         const { sortOpts } = this;
         if (fieldOrColumn) {
             const column = handleFieldOrColumn(this, fieldOrColumn);
@@ -6159,7 +6329,7 @@ const Methods = {
         if (!sortOpts.remote) {
             this.handleTableData(true);
         }
-        return this.$nextTick().then(this.updateStyle);
+        return this.$nextTick().then(() => updateStyle($xeTable));
     },
     // 在 v3 中废弃
     getSortColumn() {
@@ -6864,7 +7034,7 @@ const Methods = {
      */
     getScroll() {
         const { $refs, scrollXLoad, scrollYLoad } = this;
-        const bodyElem = $refs.tableBody.$el;
+        const bodyElem = $refs.refTableBody.$el;
         return {
             virtualX: scrollXLoad,
             virtualY: scrollYLoad,
@@ -6879,15 +7049,18 @@ const Methods = {
         const internalData = $xeTable;
         const { highlightHoverRow } = props;
         const { lastScrollLeft, lastScrollTop } = internalData;
-        const tableBody = $xeTable.$refs.tableBody;
-        const bodyElem = tableBody ? tableBody.$el : null;
+        const xHandleEl = $xeTable.$refs.refScrollXHandleElem;
+        const yHandleEl = $xeTable.$refs.refScrollYHandleElem;
+        if (!xHandleEl || !yHandleEl) {
+            return;
+        }
         const rowOpts = $xeTable.computeRowOpts;
-        const validTip = $xeTable.$refs.validTip;
-        const tooltip = $xeTable.$refs.tooltip;
-        const bodyHeight = bodyElem ? bodyElem.clientHeight : 0;
-        const bodyWidth = bodyElem ? bodyElem.clientWidth : 0;
-        const scrollHeight = bodyElem ? bodyElem.scrollHeight : 0;
-        const scrollWidth = bodyElem ? bodyElem.scrollWidth : 0;
+        const validTip = $xeTable.$refs.refValidTooltip;
+        const tooltip = $xeTable.$refs.refTooltip;
+        const bodyHeight = yHandleEl.clientHeight;
+        const bodyWidth = xHandleEl.clientWidth;
+        const scrollHeight = yHandleEl.scrollHeight;
+        const scrollWidth = xHandleEl.scrollWidth;
         let isTop = false;
         let isBottom = false;
         let isLeft = false;
@@ -6955,10 +7128,10 @@ const Methods = {
         if (rowOpts.isHover || highlightHoverRow) {
             $xeTable.clearHoverRow();
         }
-        if (validTip && validTip.visible) {
+        if (validTip && validTip.reactData.visible) {
             validTip.close();
         }
-        if (tooltip && tooltip.visible) {
+        if (tooltip && tooltip.reactData.visible) {
             tooltip.close();
         }
         if (isBottomBoundary || isTopBoundary || isRightBoundary || isLeftBoundary) {
@@ -6971,7 +7144,7 @@ const Methods = {
         const internalData = $xeTable;
         const { lxTimeout, lxRunTime, scrollXStore } = internalData;
         const { visibleSize } = scrollXStore;
-        const fpsTime = Math.min(80, Math.floor(visibleSize * 3));
+        const fpsTime = Math.max(5, Math.min(80, Math.floor(visibleSize * 3)));
         if (lxTimeout) {
             clearTimeout(lxTimeout);
         }
@@ -6987,10 +7160,12 @@ const Methods = {
     },
     lazyScrollYData() {
         const $xeTable = this;
+        const props = $xeTable;
         const internalData = $xeTable;
+        const { showOverflow } = props;
         const { lyTimeout, lyRunTime, scrollYStore } = internalData;
         const { visibleSize } = scrollYStore;
-        const fpsTime = Math.min(80, Math.floor(visibleSize));
+        const fpsTime = showOverflow ? 5 : Math.max(5, Math.min(80, Math.floor(visibleSize / 2)));
         if (lyTimeout) {
             clearTimeout(lyTimeout);
         }
@@ -7030,28 +7205,254 @@ const Methods = {
             $xeTable.lazyScrollYData();
         }
     },
-    scrollXEvent(evnt) {
+    triggerBodyScrollEvent(evnt, fixedType) {
         const $xeTable = this;
         const internalData = $xeTable;
-        const { intoRunScroll, inFooterScroll, inBodyScroll, lastScrollTop } = internalData;
-        if (!intoRunScroll) {
-            if (inFooterScroll) {
+        const { elemStore, lastScrollTop, lastScrollLeft, inWheelScroll, inVirtualScroll, inHeaderScroll, inBodyScroll, scrollRenderType, inFooterScroll } = internalData;
+        const xHandleEl = $xeTable.$refs.refScrollXHandleElem;
+        const yHandleEl = $xeTable.$refs.refScrollYHandleElem;
+        const leftScrollElem = getRefElem(elemStore['left-body-scroll']);
+        const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
+        const rightScrollElem = getRefElem(elemStore['right-body-scroll']);
+        const headerScrollElem = getRefElem(elemStore['main-header-scroll']);
+        const footerScrollElem = getRefElem(elemStore['main-footer-scroll']);
+        if (inWheelScroll || inVirtualScroll || inHeaderScroll || inFooterScroll) {
+            return;
+        }
+        if (!bodyScrollElem) {
+            return;
+        }
+        if (!xHandleEl) {
+            return;
+        }
+        if (!yHandleEl) {
+            return;
+        }
+        if (inBodyScroll) {
+            if (scrollRenderType !== fixedType) {
                 return;
             }
-            if (inBodyScroll) {
-                return;
+        }
+        let scrollTop = yHandleEl.scrollTop;
+        let scrollLeft = xHandleEl.scrollLeft;
+        if (leftScrollElem && fixedType === 'left') {
+            scrollTop = leftScrollElem.scrollTop;
+        }
+        else if (rightScrollElem && fixedType === 'right') {
+            scrollTop = rightScrollElem.scrollTop;
+        }
+        else {
+            scrollTop = bodyScrollElem.scrollTop;
+            scrollLeft = bodyScrollElem.scrollLeft;
+        }
+        const isRollX = scrollLeft !== lastScrollLeft;
+        const isRollY = scrollTop !== lastScrollTop;
+        internalData.inBodyScroll = true;
+        internalData.scrollRenderType = fixedType;
+        if (isRollY) {
+            if (fixedType === 'left') {
+                setScrollTop(bodyScrollElem, scrollTop);
+                setScrollTop(rightScrollElem, scrollTop);
+            }
+            else if (fixedType === 'right') {
+                setScrollTop(bodyScrollElem, scrollTop);
+                setScrollTop(leftScrollElem, scrollTop);
+            }
+            else {
+                setScrollTop(leftScrollElem, scrollTop);
+                setScrollTop(rightScrollElem, scrollTop);
             }
+            setScrollTop(yHandleEl, scrollTop);
+            $xeTable.triggerScrollYEvent(evnt);
+        }
+        if (isRollX) {
+            setScrollLeft(xHandleEl, scrollLeft);
+            setScrollLeft(headerScrollElem, scrollLeft);
+            setScrollLeft(footerScrollElem, scrollLeft);
+            $xeTable.triggerScrollXEvent(evnt);
+        }
+        $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
+            type: 'body',
+            fixed: fixedType
+        });
+    },
+    triggerHeaderScrollEvent(evnt, fixedType) {
+        const $xeTable = this;
+        const internalData = $xeTable;
+        const { elemStore, inWheelScroll, inVirtualScroll, inBodyScroll, inFooterScroll } = internalData;
+        const xHandleEl = $xeTable.$refs.refScrollXHandleElem;
+        const yHandleEl = $xeTable.$refs.refScrollYHandleElem;
+        const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
+        const headerScrollElem = getRefElem(elemStore['main-header-scroll']);
+        const footerScrollElem = getRefElem(elemStore['main-footer-scroll']);
+        if (inWheelScroll) {
+            return;
+        }
+        if (inVirtualScroll) {
+            return;
+        }
+        if (inBodyScroll) {
+            return;
+        }
+        if (inFooterScroll) {
+            return;
+        }
+        if (!headerScrollElem) {
+            return;
+        }
+        if (!xHandleEl) {
+            return;
+        }
+        if (!yHandleEl) {
+            return;
+        }
+        const scrollTop = yHandleEl.scrollTop;
+        const scrollLeft = headerScrollElem.scrollLeft;
+        const isRollX = true;
+        const isRollY = false;
+        internalData.inHeaderScroll = true;
+        setScrollLeft(xHandleEl, scrollLeft);
+        setScrollLeft(footerScrollElem, scrollLeft);
+        setScrollLeft(bodyScrollElem, scrollLeft);
+        $xeTable.triggerScrollXEvent(evnt);
+        $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
+            type: 'header',
+            fixed: fixedType
+        });
+    },
+    triggerFooterScrollEvent(evnt, fixedType) {
+        const $xeTable = this;
+        const internalData = $xeTable;
+        const { elemStore, inWheelScroll, inVirtualScroll, inHeaderScroll, inBodyScroll } = internalData;
+        const xHandleEl = $xeTable.$refs.refScrollXHandleElem;
+        const yHandleEl = $xeTable.$refs.refScrollYHandleElem;
+        const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
+        const headerScrollElem = getRefElem(elemStore['main-header-scroll']);
+        const footerScrollElem = getRefElem(elemStore['main-footer-scroll']);
+        if (inWheelScroll) {
+            return;
+        }
+        if (inVirtualScroll) {
+            return;
+        }
+        if (inHeaderScroll) {
+            return;
+        }
+        if (inBodyScroll) {
+            return;
+        }
+        if (!footerScrollElem) {
+            return;
+        }
+        if (!xHandleEl) {
+            return;
+        }
+        if (!yHandleEl) {
+            return;
+        }
+        const scrollTop = yHandleEl.scrollTop;
+        const scrollLeft = footerScrollElem.scrollLeft;
+        const isRollX = true;
+        const isRollY = false;
+        internalData.inFooterScroll = true;
+        setScrollLeft(xHandleEl, scrollLeft);
+        setScrollLeft(headerScrollElem, scrollLeft);
+        setScrollLeft(bodyScrollElem, scrollLeft);
+        $xeTable.triggerScrollXEvent(evnt);
+        $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
+            type: 'footer',
+            fixed: fixedType
+        });
+    },
+    triggerBodyWheelEvent(evnt) {
+        const $xeTable = this;
+        const tableProps = $xeTable;
+        const reactData = $xeTable;
+        const internalData = $xeTable;
+        const { deltaY, deltaX } = evnt;
+        const { highlightHoverRow } = tableProps;
+        const { elemStore, lastScrollTop, lastScrollLeft } = internalData;
+        const rowOpts = $xeTable.computeRowOpts;
+        const xHandleEl = $xeTable.$refs.refScrollXHandleElem;
+        const yHandleEl = $xeTable.$refs.refScrollYHandleElem;
+        const leftScrollElem = getRefElem(elemStore['left-body-scroll']);
+        const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
+        const rightScrollElem = getRefElem(elemStore['right-body-scroll']);
+        if (!xHandleEl) {
+            return;
+        }
+        if (!yHandleEl) {
+            return;
+        }
+        if (!bodyScrollElem) {
+            return;
+        }
+        let multiple = 1;
+        if (reactData.lastScrollTime + 25 > Date.now()) {
+            multiple = 1.18;
+        }
+        else if (reactData.lastScrollTime + 30 > Date.now()) {
+            multiple = 1.15;
+        }
+        else if (reactData.lastScrollTime + 40 > Date.now()) {
+            multiple = 1.12;
+        }
+        else if (reactData.lastScrollTime + 55 > Date.now()) {
+            multiple = 1.09;
+        }
+        else if (reactData.lastScrollTime + 75 > Date.now()) {
+            multiple = 1.06;
+        }
+        else if (reactData.lastScrollTime + 100 > Date.now()) {
+            multiple = 1.03;
+        }
+        const deltaTop = deltaY * multiple;
+        const deltaLeft = deltaX * multiple;
+        const isTopWheel = deltaTop < 0;
+        const currScrollTop = yHandleEl.scrollTop;
+        // 如果滚动位置已经是顶部或底部，则不需要触发
+        if (isTopWheel ? currScrollTop <= 0 : currScrollTop >= yHandleEl.scrollHeight - yHandleEl.clientHeight) {
+            return;
+        }
+        const scrollTop = bodyScrollElem.scrollTop + deltaTop;
+        const scrollLeft = bodyScrollElem.scrollLeft + deltaLeft;
+        const isRollX = scrollLeft !== lastScrollLeft;
+        const isRollY = scrollTop !== lastScrollTop;
+        // 用于鼠标纵向滚轮处理
+        if (isRollY) {
+            evnt.preventDefault();
+            if (rowOpts.isHover || highlightHoverRow) {
+                $xeTable.clearHoverRow();
+            }
+            internalData.inWheelScroll = true;
+            setScrollTop(yHandleEl, scrollTop);
+            setScrollTop(bodyScrollElem, scrollTop);
+            setScrollTop(leftScrollElem, scrollTop);
+            setScrollTop(rightScrollElem, scrollTop);
+            $xeTable.triggerScrollYEvent(evnt);
+            $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
+                type: 'footer',
+                fixed: ''
+            });
+        }
+    },
+    scrollXEvent(evnt) {
+        const $xeTable = this;
+        const internalData = $xeTable;
+        const { elemStore, inWheelScroll, lastScrollTop, inHeaderScroll, inBodyScroll, inFooterScroll } = internalData;
+        if (inHeaderScroll || inBodyScroll || inFooterScroll) {
+            return;
+        }
+        if (inWheelScroll) {
+            return;
         }
-        const tableHeader = $xeTable.$refs.tableHeader;
-        const tableBody = $xeTable.$refs.tableBody;
-        const tableFooter = $xeTable.$refs.tableFooter;
-        const bodyElem = tableBody.$el;
-        const headerElem = tableHeader ? tableHeader.$el : null;
-        const footerElem = tableFooter ? tableFooter.$el : null;
+        const headerScrollElem = getRefElem(elemStore['main-header-scroll']);
+        const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
+        const footerScrollElem = getRefElem(elemStore['main-footer-scroll']);
         const yHandleEl = $xeTable.$refs.refScrollYHandleElem;
         const wrapperEl = evnt.currentTarget;
         const { scrollLeft } = wrapperEl;
-        const yBodyEl = yHandleEl || bodyElem;
+        const yBodyEl = yHandleEl || bodyScrollElem;
         let scrollTop = 0;
         if (yBodyEl) {
             scrollTop = yBodyEl.scrollTop;
@@ -7059,9 +7460,9 @@ const Methods = {
         const isRollX = true;
         const isRollY = scrollTop !== lastScrollTop;
         internalData.inVirtualScroll = true;
-        setScrollLeft(bodyElem, scrollLeft);
-        setScrollLeft(headerElem, scrollLeft);
-        setScrollLeft(footerElem, scrollLeft);
+        setScrollLeft(bodyScrollElem, scrollLeft);
+        setScrollLeft(headerScrollElem, scrollLeft);
+        setScrollLeft(footerScrollElem, scrollLeft);
         $xeTable.triggerScrollXEvent(evnt);
         $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
             type: 'table',
@@ -7071,25 +7472,20 @@ const Methods = {
     scrollYEvent(evnt) {
         const $xeTable = this;
         const internalData = $xeTable;
-        const { intoRunScroll, inFooterScroll, inBodyScroll, lastScrollLeft } = internalData;
-        if (!intoRunScroll) {
-            if (inFooterScroll) {
-                return;
-            }
-            if (inBodyScroll) {
-                return;
-            }
+        const { elemStore, inWheelScroll, lastScrollLeft, inHeaderScroll, inBodyScroll, inFooterScroll } = internalData;
+        if (inHeaderScroll || inBodyScroll || inFooterScroll) {
+            return;
+        }
+        if (inWheelScroll) {
+            return;
         }
-        const tableBody = $xeTable.$refs.tableBody;
-        const leftBody = $xeTable.$refs.leftBody;
-        const rightBody = $xeTable.$refs.rightBody;
-        const bodyElem = tableBody.$el;
-        const leftElem = leftBody ? leftBody.$el : null;
-        const rightElem = rightBody ? rightBody.$el : null;
+        const leftScrollElem = getRefElem(elemStore['left-body-scroll']);
+        const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
+        const rightScrollElem = getRefElem(elemStore['right-body-scroll']);
         const xHandleEl = $xeTable.$refs.refScrollXHandleElem;
         const wrapperEl = evnt.currentTarget;
         const { scrollTop } = wrapperEl;
-        const xBodyEl = xHandleEl || bodyElem;
+        const xBodyEl = xHandleEl || bodyScrollElem;
         let scrollLeft = 0;
         if (xBodyEl) {
             scrollLeft = xBodyEl.scrollLeft;
@@ -7097,45 +7493,24 @@ const Methods = {
         const isRollX = scrollLeft !== lastScrollLeft;
         const isRollY = true;
         internalData.inVirtualScroll = true;
-        setScrollTop(bodyElem, scrollTop);
-        setScrollTop(leftElem, scrollTop);
-        setScrollTop(rightElem, scrollTop);
+        setScrollTop(bodyScrollElem, scrollTop);
+        setScrollTop(leftScrollElem, scrollTop);
+        setScrollTop(rightScrollElem, scrollTop);
         $xeTable.triggerScrollYEvent(evnt);
         $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
             type: 'table',
             fixed: ''
         });
     },
-    handleTableColumn() {
-        const { scrollXLoad, visibleColumn, scrollXStore, fullColumnIdData } = this;
-        const tableColumn = scrollXLoad ? visibleColumn.slice(scrollXStore.startIndex, scrollXStore.endIndex) : visibleColumn.slice(0);
-        tableColumn.forEach((column, $index) => {
-            const colid = column.id;
-            const colRest = fullColumnIdData[colid];
-            if (colRest) {
-                colRest.$index = $index;
-            }
-        });
-        this.tableColumn = tableColumn;
-    },
-    handleUpdateColumn() {
-        const $xeTable = this;
-        const internalData = $xeTable;
-        const columnList = XEUtils.orderBy(internalData.collectColumn, 'renderSortNumber');
-        internalData.collectColumn = columnList;
-        const tableFullColumn = getColumnList(columnList);
-        internalData.tableFullColumn = tableFullColumn;
-        cacheColumnMap($xeTable);
-    },
     updateScrollXData() {
         const $xeTable = this;
         const props = $xeTable;
         const { showOverflow } = props;
-        $xeTable.handleTableColumn();
-        calcCellHeight($xeTable);
+        handleTableColumn($xeTable);
+        // calcCellHeight()
         return $xeTable.$nextTick().then(() => {
-            calcCellHeight($xeTable);
-            $xeTable.handleTableColumn();
+            // calcCellHeight()
+            handleTableColumn($xeTable);
             $xeTable.updateScrollXSpace();
             if (!showOverflow) {
                 $xeTable.updateScrollYSpace();
@@ -7145,8 +7520,13 @@ const Methods = {
     // 更新横向 X 可视渲染上下剩余空间大小
     updateScrollXSpace() {
         const $xeTable = this;
-        const { $refs, isGroup, elemStore, visibleColumn, scrollXStore, scrollXLoad, tableWidth, scrollbarWidth } = $xeTable;
-        const { tableHeader, tableBody, tableFooter } = $refs;
+        const reactData = $xeTable;
+        const internalData = $xeTable;
+        const { isGroup, scrollXLoad } = reactData;
+        const { visibleColumn, scrollXStore, elemStore, tableWidth } = internalData;
+        const tableHeader = $xeTable.$refs.refTableHeader;
+        const tableBody = $xeTable.$refs.refTableBody;
+        const tableFooter = $xeTable.$refs.refTableFooter;
         const tableBodyElem = tableBody ? tableBody.$el : null;
         if (tableBodyElem) {
             const tableHeaderElem = tableHeader ? tableHeader.$el : null;
@@ -7170,25 +7550,27 @@ const Methods = {
             containerList.forEach(name => {
                 const layoutList = ['header', 'body', 'footer'];
                 layoutList.forEach(layout => {
-                    const xSpaceElem = elemStore[`${name}-${layout}-xSpace`];
+                    const xSpaceElem = getRefElem(elemStore[`${name}-${layout}-xSpace`]);
                     if (xSpaceElem) {
-                        xSpaceElem.style.width = scrollXLoad ? `${tableWidth + (layout === 'header' ? scrollbarWidth : 0)}px` : '';
+                        xSpaceElem.style.width = scrollXLoad ? `${tableWidth}px` : '';
                     }
                 });
             });
             const scrollXSpaceEl = $xeTable.$refs.refScrollXSpaceElem;
             if (scrollXSpaceEl) {
-                scrollXSpaceEl.style.width = `${tableWidth + scrollbarWidth}px`;
+                scrollXSpaceEl.style.width = `${tableWidth}px`;
             }
-            this.$nextTick(this.updateStyle);
+            $xeTable.$nextTick(() => {
+                updateStyle($xeTable);
+            });
         }
     },
     updateScrollYData() {
         const $xeTable = this;
         $xeTable.handleTableData();
-        calcCellHeight($xeTable);
+        // calcCellHeight()
         return $xeTable.$nextTick().then(() => {
-            calcCellHeight($xeTable);
+            // calcCellHeight()
             $xeTable.handleTableData();
             $xeTable.updateScrollYSpace();
         });
@@ -7196,16 +7578,20 @@ const Methods = {
     // 更新纵向 Y 可视渲染上下剩余空间大小
     updateScrollYSpace() {
         const $xeTable = this;
-        const { showOverflow, elemStore, scrollYStore, scrollYLoad, afterFullData, fullAllDataRowIdData } = this;
-        const { startIndex, rowHeight } = scrollYStore;
-        let bodyHeight = 0;
-        let topSpaceHeight = 0;
+        const props = $xeTable;
+        const reactData = $xeTable;
+        const internalData = $xeTable;
+        const { showOverflow } = props;
+        const { scrollYLoad, rowHeight } = reactData;
+        const { scrollYStore, elemStore, afterFullData, fullAllDataRowIdData } = internalData;
+        const { startIndex } = scrollYStore;
+        const bodyTableElem = getRefElem(elemStore['main-body-table']);
         const containerList = ['main', 'left', 'right'];
-        let marginTop = '';
-        let ySpaceHeight = '';
+        let topSpaceHeight = 0;
+        let ySpaceHeight = 0;
         if (scrollYLoad) {
             if (showOverflow) {
-                bodyHeight = afterFullData.length * rowHeight;
+                ySpaceHeight = afterFullData.length * rowHeight;
                 topSpaceHeight = Math.max(0, startIndex * rowHeight);
             }
             else {
@@ -7214,7 +7600,7 @@ const Methods = {
                     const rowid = getRowid($xeTable, row);
                     const rowRest = fullAllDataRowIdData[rowid];
                     if (rowRest) {
-                        bodyHeight += rowRest.height || rowHeight;
+                        ySpaceHeight += rowRest.height || rowHeight;
                     }
                 }
                 for (let i = 0; i < startIndex; i++) {
@@ -7226,27 +7612,32 @@ const Methods = {
                     }
                 }
             }
-            marginTop = `${topSpaceHeight}px`;
-            ySpaceHeight = `${bodyHeight}px`;
+        }
+        else {
+            if (bodyTableElem) {
+                ySpaceHeight = bodyTableElem.clientHeight;
+            }
         }
         containerList.forEach(name => {
             const layoutList = ['header', 'body', 'footer'];
-            const tableElem = elemStore[`${name}-body-table`];
+            const tableElem = getRefElem(elemStore[`${name}-body-table`]);
             if (tableElem) {
-                tableElem.style.marginTop = marginTop;
+                tableElem.style.marginTop = topSpaceHeight ? `${topSpaceHeight}px` : '';
             }
             layoutList.forEach(layout => {
-                const ySpaceElem = elemStore[`${name}-${layout}-ySpace`];
+                const ySpaceElem = getRefElem(elemStore[`${name}-${layout}-ySpace`]);
                 if (ySpaceElem) {
-                    ySpaceElem.style.height = ySpaceHeight;
+                    ySpaceElem.style.height = ySpaceHeight ? `${ySpaceHeight}px` : '';
                 }
             });
         });
         const scrollYSpaceEl = $xeTable.$refs.refScrollYSpaceElem;
         if (scrollYSpaceEl) {
-            scrollYSpaceEl.style.height = ySpaceHeight;
+            scrollYSpaceEl.style.height = ySpaceHeight ? `${ySpaceHeight}px` : '';
         }
-        this.$nextTick(this.updateStyle);
+        $xeTable.$nextTick(() => {
+            updateStyle($xeTable);
+        });
     },
     updateScrollYStatus() {
         const $xeTable = this;
@@ -7261,12 +7652,12 @@ const Methods = {
         const $xeTable = this;
         const internalData = $xeTable;
         const { $refs } = this;
-        const { tableBody, tableHeader, leftBody, rightBody, tableFooter } = $refs;
-        const tableBodyElem = tableBody ? tableBody.$el : null;
+        const { refTableBody, refTableHeader, leftBody, rightBody, refTableFooter } = $refs;
+        const tableBodyElem = refTableBody ? refTableBody.$el : null;
         const leftBodyElem = leftBody ? leftBody.$el : null;
         const rightBodyElem = rightBody ? rightBody.$el : null;
-        const tableHeaderElem = tableHeader ? tableHeader.$el : null;
-        const tableFooterElem = tableFooter ? tableFooter.$el : null;
+        const tableHeaderElem = refTableHeader ? refTableHeader.$el : null;
+        const tableFooterElem = refTableFooter ? refTableFooter.$el : null;
         internalData.intoRunScroll = true;
         if (XEUtils.isNumber(scrollLeft)) {
             const xHandleEl = $xeTable.$refs.refScrollXHandleElem;
@@ -7371,46 +7762,33 @@ const Methods = {
     clearScroll() {
         const $xeTable = this;
         const internalData = $xeTable;
-        const { scrollXStore, scrollYStore } = internalData;
-        const tableBody = $xeTable.$refs.tableBody;
-        const tableHeader = $xeTable.$refs.tableHeader;
-        const tableFooter = $xeTable.$refs.tableFooter;
-        const leftBody = $xeTable.$refs.leftBody;
-        const rightBody = $xeTable.$refs.rightBody;
-        const leftBodyElem = leftBody ? leftBody.$el : null;
-        const tableBodyElem = tableBody ? tableBody.$el : null;
-        const rightBodyElem = rightBody ? rightBody.$el : null;
-        const tableHeaderElem = tableHeader ? tableHeader.$el : null;
-        const tableFooterElem = tableFooter ? tableFooter.$el : null;
+        const { elemStore, scrollXStore, scrollYStore } = internalData;
+        const headerScrollElem = getRefElem(elemStore['main-header-scroll']);
+        const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
+        const footerScrollElem = getRefElem(elemStore['main-footer-scroll']);
+        const leftScrollElem = getRefElem(elemStore['left-body-scroll']);
+        const rightScrollElem = getRefElem(elemStore['right-body-scroll']);
         const xHandleEl = $xeTable.$refs.refScrollXHandleElem;
-        if (xHandleEl) {
-            setScrollLeft(xHandleEl, 0);
-        }
-        else {
-            setScrollLeft(tableBodyElem, 0);
-            setScrollLeft(tableHeaderElem, 0);
-            setScrollLeft(tableFooterElem, 0);
-        }
         const yHandleEl = $xeTable.$refs.refScrollYHandleElem;
-        if (yHandleEl) {
-            setScrollTop(yHandleEl, 0);
-        }
-        else {
-            setScrollTop(tableBodyElem, 0);
-            setScrollTop(leftBodyElem, 0);
-            setScrollTop(rightBodyElem, 0);
-        }
+        internalData.intoRunScroll = true;
+        setScrollLeft(xHandleEl, 0);
+        setScrollLeft(bodyScrollElem, 0);
+        setScrollLeft(headerScrollElem, 0);
+        setScrollLeft(footerScrollElem, 0);
+        setScrollTop(yHandleEl, 0);
+        setScrollTop(bodyScrollElem, 0);
+        setScrollTop(leftScrollElem, 0);
+        setScrollTop(rightScrollElem, 0);
         scrollXStore.startIndex = 0;
+        scrollXStore.visibleStartIndex = 0;
         scrollXStore.endIndex = scrollXStore.visibleSize;
+        scrollXStore.visibleEndIndex = scrollXStore.visibleSize;
         scrollYStore.startIndex = 0;
+        scrollYStore.visibleStartIndex = 0;
         scrollYStore.endIndex = scrollYStore.visibleSize;
+        scrollYStore.visibleEndIndex = scrollYStore.visibleSize;
         return $xeTable.$nextTick().then(() => {
-            setScrollLeft(tableBodyElem, 0);
-            setScrollLeft(tableHeaderElem, 0);
-            setScrollLeft(tableFooterElem, 0);
-            setScrollTop(tableBodyElem, 0);
-            setScrollTop(leftBodyElem, 0);
-            setScrollTop(rightBodyElem, 0);
+            internalData.intoRunScroll = false;
         });
     },
     /**
@@ -7437,8 +7815,8 @@ const Methods = {
         const customVal = !XEUtils.isUndefined(cellValue);
         return this.$nextTick().then(() => {
             const { $refs, editRules, validStore } = this;
-            const tableBody = $refs.tableBody;
-            if (slotParams && tableBody && editRules) {
+            const refTableBody = $refs.refTableBody;
+            if (slotParams && refTableBody && editRules) {
                 const { row, column } = slotParams;
                 const type = 'change';
                 if (this.hasCellRules) {
@@ -7472,13 +7850,14 @@ const Methods = {
      * @param {TableMergeConfig[]} merges { row: Row|number, column: ColumnInfo|number, rowspan: number, colspan: number }
      */
     setMergeCells(merges) {
+        const $xeTable = this;
         if (this.spanMethod) {
             errLog('vxe.error.errConflicts', ['merge-cells', 'span-method']);
         }
         setMerges(this, merges, this.mergeList, this.afterFullData);
         return this.$nextTick().then(() => {
             this.updateCellAreas();
-            return this.updateStyle();
+            return updateStyle($xeTable);
         });
     },
     /**
@@ -7486,13 +7865,14 @@ const Methods = {
      * @param {TableMergeConfig[]} merges 多个或数组 [{row:Row|number, col:ColumnInfo|number}]
      */
     removeMergeCells(merges) {
+        const $xeTable = this;
         if (this.spanMethod) {
             errLog('vxe.error.errConflicts', ['merge-cells', 'span-method']);
         }
         const rest = removeMerges(this, merges, this.mergeList, this.afterFullData);
         return this.$nextTick().then(() => {
             this.updateCellAreas();
-            this.updateStyle();
+            updateStyle($xeTable);
             return rest;
         });
     },
@@ -7506,32 +7886,35 @@ const Methods = {
      * 清除所有单元格合并
      */
     clearMergeCells() {
+        const $xeTable = this;
         this.mergeList = [];
         return this.$nextTick().then(() => {
-            return this.updateStyle();
+            return updateStyle($xeTable);
         });
     },
     handleDefaultMergeFooterItems() {
         this.setMergeFooterItems(this.mergeFooterItems);
     },
     setMergeFooterItems(merges) {
+        const $xeTable = this;
         if (this.footerSpanMethod) {
             errLog('vxe.error.errConflicts', ['merge-footer-items', 'footer-span-method']);
         }
         setMerges(this, merges, this.mergeFooterList, null);
         return this.$nextTick().then(() => {
             this.updateCellAreas();
-            return this.updateStyle();
+            return updateStyle($xeTable);
         });
     },
     removeMergeFooterItems(merges) {
+        const $xeTable = this;
         if (this.footerSpanMethod) {
             errLog('vxe.error.errConflicts', ['merge-footer-items', 'footer-span-method']);
         }
         const rest = removeMerges(this, merges, this.mergeFooterList, null);
         return this.$nextTick().then(() => {
             this.updateCellAreas();
-            this.updateStyle();
+            updateStyle($xeTable);
             return rest;
         });
     },
@@ -7545,9 +7928,10 @@ const Methods = {
      * 清除所有表尾合并
      */
     clearMergeFooterItems() {
+        const $xeTable = this;
         this.mergeFooterList = [];
         return this.$nextTick().then(() => {
-            return this.updateStyle();
+            return updateStyle($xeTable);
         });
     },
     updateZindex() {