vxe-table 3.12.9 → 3.12.10-beta.0

package/lib/table/src/methods.js

@@ -22,14 +22,6 @@ const {
   createEvent
 } = _ui.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.default.get(row1, field);
   const val2 = _xeUtils.default.get(row2, field);
@@ -89,22 +81,25 @@ function handleReserveRow(_vm, reserveRowMap) {
 function handleVirtualXVisible($xeTable) {
   const internalData = $xeTable;
   const {
+    elemStore,
     visibleColumn
   } = internalData;
-  const tableBody = $xeTable.$refs.tableBody;
-  const tableBodyElem = tableBody ? tableBody.$el : null;
-  if (tableBodyElem) {
+  const leftFixedWidth = $xeTable.computeLeftFixedWidth;
+  const rightFixedWidth = $xeTable.computeRightFixedWidth;
+  const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
+  if (bodyScrollElem) {
     const {
       scrollLeft,
       clientWidth
-    } = tableBodyElem;
-    const endWidth = 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) {
@@ -116,7 +111,7 @@ function handleVirtualXVisible($xeTable) {
     }
     return {
       toVisibleIndex: Math.max(0, toVisibleIndex),
-      visibleSize: Math.max(6, visibleSize)
+      visibleSize: Math.max(1, visibleSize)
     };
   }
   return {
@@ -124,10 +119,97 @@ function handleVirtualXVisible($xeTable) {
     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.default.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.default.isNumber(sortData[colKey])) {
+          hasCustomSort = true;
+          column.renderSortNumber = sortData[colKey];
+        }
+      }
+      if (resizableData && _xeUtils.default.isNumber(resizableData[colKey])) {
+        column.resizeWidth = resizableData[colKey];
+      }
+      if (visibleData && _xeUtils.default.isBoolean(visibleData[colKey])) {
+        column.visible = visibleData[colKey];
+      }
+    });
+    // 如果自定义了顺序
+    if (hasCustomSort) {
+      collectColumn = _xeUtils.default.orderBy(collectColumn, 'renderSortNumber');
+      internalData.collectColumn = collectColumn;
+      internalData.tableFullColumn = getColumnList(collectColumn);
+    }
+    reactData.isCustomStatus = true;
+  } else {
+    reactData.isCustomStatus = false;
+  }
+}
 /**
-   * 更新数据列的 Map
-   * 牺牲数据组装的耗时，用来换取使用过程中的流畅
-   */
+ * 还原自定义列操作状态
+ */
+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 ? (0, _utils.isEnableConf)(customOpts) : customOpts.enabled) && (isCustomResizable || isCustomVisible || isCustomFixed || isCustomSort)) {
+    if (!tableId) {
+      (0, _log.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
+ * 牺牲数据组装的耗时，用来换取使用过程中的流畅
+ */
 function cacheColumnMap($xeTable) {
   const props = $xeTable;
   const reactData = $xeTable;
@@ -182,7 +264,7 @@ function cacheColumnMap($xeTable) {
       }
       fullColumnFieldData[field] = rest;
     } else {
-      if (storage || isCrossDrag || isSelfToChildDrag) {
+      if (storage || columnOpts.drag && (isCrossDrag || isSelfToChildDrag)) {
         (0, _log.errLog)('vxe.error.reqProp', [`${column.getTitle() || type || ''} -> column.field`]);
       }
     }
@@ -324,12 +406,354 @@ 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 = (0, _util.getRefElem)(elemStore['main-body-wrapper']);
+  const bodyTableElem = (0, _util.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 = (0, _util.getRefElem)(elemStore[`${name}-${layout}-wrapper`]);
+      const currScrollElem = (0, _util.getRefElem)(elemStore[`${name}-${layout}-scroll`]);
+      const tableElem = (0, _util.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 = (0, _util.getRefElem)(elemStore[`${name}-${layout}-repair`]);
+        if (repairElem) {
+          repairElem.style.width = `${tableWidth}px`;
+        }
+        const listElem = (0, _util.getRefElem)(elemStore[`${name}-${layout}-list`]);
+        if (isGroup && listElem) {
+          _xeUtils.default.arrayEach(listElem.querySelectorAll('.col--group'), thElem => {
+            const colNode = $xeTable.getColumnNode(thElem);
+            if (colNode) {
+              const column = colNode.item;
+              const {
+                showHeaderOverflow
+              } = column;
+              const cellOverflow = _xeUtils.default.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.default.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 && (_dom.browse['-moz'] || _dom.browse.safari) ? `${scrollbarWidth}px` : '';
+        }
+        const emptyBlockElem = (0, _util.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 = (0, _util.getRefElem)(elemStore[`${name}-${layout}-colgroup`]);
+      if (colgroupElem) {
+        _xeUtils.default.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.default.isUndefined(showHeaderOverflow) || _xeUtils.default.isNull(showHeaderOverflow) ? allColumnHeaderOverflow : showHeaderOverflow;
+            } else if (layout === 'footer') {
+              cellOverflow = _xeUtils.default.isUndefined(showFooterOverflow) || _xeUtils.default.isNull(showFooterOverflow) ? allColumnFooterOverflow : showFooterOverflow;
+            } else {
+              cellOverflow = _xeUtils.default.isUndefined(showOverflow) || _xeUtils.default.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 = (0, _util.getRefElem)(elemStore[`${name}-${layout}-list`]);
+            // 纵向虚拟滚动不支持动态行高
+            if (scrollYLoad && !hasEllipsis) {
+              hasEllipsis = true;
+            }
+            if (listElem) {
+              _xeUtils.default.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;
@@ -343,32 +767,32 @@ 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,
+    rowHeight
+  } = reactData;
+  const {
+    elemStore,
     afterFullData,
     fullAllDataRowIdData
   } = internalData;
-  const tableBody = $xeTable.$refs.tableBody;
-  const tableBodyElem = tableBody ? tableBody.$el : null;
-  const {
-    rowHeight
-  } = scrollYStore;
-  if (tableBodyElem) {
+  const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
+  if (bodyScrollElem) {
     const {
       scrollTop,
       clientHeight
-    } = tableBodyElem;
+    } = bodyScrollElem;
     const endHeight = scrollTop + clientHeight;
     let toVisibleIndex = -1;
     let offsetTop = 0;
@@ -395,12 +819,12 @@ function handleVirtualYVisible($xeTable) {
     }
     return {
       toVisibleIndex: Math.max(0, toVisibleIndex),
-      visibleSize: Math.max(8, visibleSize)
+      visibleSize: Math.max(6, visibleSize)
     };
   }
   return {
     toVisibleIndex: 0,
-    visibleSize: 8
+    visibleSize: 6
   };
 }
 function calculateMergerOffsetIndex(list, offsetItem, type) {
@@ -551,18 +975,26 @@ 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 {
@@ -643,16 +1075,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;
@@ -660,40 +1092,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 = (0, _util.getRefElem)(elemStore['main-header-table']);
+  const footerTableElem = (0, _util.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) {
@@ -931,9 +1343,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;
@@ -1015,12 +1427,16 @@ function computeScrollLoad($xeTable) {
     // 计算 X 逻辑
     if (scrollXLoad) {
       const {
+        toVisibleIndex: toXVisibleIndex,
         visibleSize: visibleXSize
       } = handleVirtualXVisible($xeTable);
-      const offsetXSize = Math.max(0, sXOpts.oSize ? _xeUtils.default.toNumber(sXOpts.oSize) : _dom.browse.edge ? 5 : 0);
+      const offsetXSize = Math.max(0, sXOpts.oSize ? _xeUtils.default.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);
       });
@@ -1033,13 +1449,17 @@ function computeScrollLoad($xeTable) {
     scrollYStore.rowHeight = rowHeight;
     reactData.rowHeight = rowHeight;
     const {
+      toVisibleIndex: toYVisibleIndex,
       visibleSize: visibleYSize
     } = handleVirtualYVisible($xeTable);
     if (scrollYLoad) {
-      const offsetYSize = Math.max(0, sYOpts.oSize ? _xeUtils.default.toNumber(sYOpts.oSize) : _dom.browse.edge ? 10 : 0);
+      const offsetYSize = Math.max(0, sYOpts.oSize ? _xeUtils.default.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);
       });
@@ -1047,7 +1467,7 @@ function computeScrollLoad($xeTable) {
       $xeTable.updateScrollYSpace();
     }
     $xeTable.$nextTick(() => {
-      $xeTable.updateStyle();
+      updateStyle($xeTable);
     });
   });
 }
@@ -1070,6 +1490,35 @@ 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.default.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;
@@ -1081,6 +1530,7 @@ function loadScrollXData($xeTable) {
     scrollXStore
   } = internalData;
   const {
+    preloadSize,
     startIndex,
     endIndex,
     offsetSize
@@ -1090,9 +1540,11 @@ function loadScrollXData($xeTable) {
     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,
@@ -1107,6 +1559,208 @@ 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.default.eachTree(collectColumn, (column, index, items, path, parentColumn) => {
+      const isColGroup = (0, _utils.hasChildrenList)(column);
+      // 如果是分组，必须按组设置固定列，不允许给子列设置固定
+      if (parentColumn && parentColumn.fixed) {
+        column.fixed = parentColumn.fixed;
+      }
+      if (parentColumn && column.fixed !== parentColumn.fixed) {
+        (0, _log.errLog)('vxe.error.groupFixed');
+      }
+      if (isColGroup) {
+        column.visible = !!_xeUtils.default.findTree(column.children, subColumn => (0, _utils.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) {
+          (0, _log.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) {
+        (0, _log.warnLog)('vxe.error.scrollErrProp', ['span-method']);
+      }
+      if (props.footerSpanMethod) {
+        (0, _log.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) {
+        (0, _log.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 可视渲染处理
  */
@@ -1121,23 +1775,25 @@ function loadScrollYData($xeTable) {
     mergeList
   } = reactData;
   const {
-    tableHeight,
     scrollYStore
   } = internalData;
   const {
+    preloadSize,
     startIndex,
     endIndex,
     offsetSize
   } = scrollYStore;
-  const autoOffsetYSize = showOverflow ? offsetSize : offsetSize + Math.min(8, Math.ceil(tableHeight / 200));
+  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,
@@ -1168,16 +1824,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);
       });
     }
@@ -1477,7 +2137,7 @@ const Methods = {
     this.updateFooter();
     return this.$nextTick().then(() => {
       updateHeight($xeTable);
-      this.updateStyle();
+      updateStyle($xeTable);
     }).then(() => {
       computeScrollLoad($xeTable);
     }).then(() => {
@@ -1500,9 +2160,15 @@ const Methods = {
           }
           // 是否变更虚拟滚动
           if (oldScrollYLoad === sYLoad) {
-            (0, _util.restoreScrollLocation)(this, targetScrollLeft, targetScrollTop).then(resolve);
+            (0, _util.restoreScrollLocation)(this, targetScrollLeft, targetScrollTop).then(() => {
+              resolve();
+            });
           } else {
-            setTimeout(() => (0, _util.restoreScrollLocation)(this, targetScrollLeft, targetScrollTop).then(resolve));
+            setTimeout(() => {
+              (0, _util.restoreScrollLocation)(this, targetScrollLeft, targetScrollTop).then(() => {
+                resolve();
+              });
+            });
           }
         });
       });
@@ -1592,10 +2258,11 @@ const Methods = {
    * @param {ColumnInfo} columns 列配置
    */
   loadColumn(columns) {
+    const $xeTable = this;
     const collectColumn = _xeUtils.default.mapTree(columns, column => _cell.default.createColumn(this, column), {
       children: 'children'
     });
-    return this.handleColumn(collectColumn);
+    return handleColumn($xeTable, collectColumn);
   },
   /**
    * 加载列配置并恢复到初始状态
@@ -1607,53 +2274,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) {
-          (0, _log.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
@@ -2203,7 +2826,7 @@ const Methods = {
     const rowid = (0, _util.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}`);
@@ -3016,8 +3639,8 @@ const Methods = {
         const colWidth = _xeUtils.default.toInteger(width);
         let rdWidth = colWidth;
         if ((0, _dom.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);
         }
@@ -3290,158 +3913,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.default.eachTree(collectColumn, (column, index, items, path, parentColumn) => {
-        const isColGroup = (0, _utils.hasChildrenList)(column);
-        // 如果是分组，必须按组设置固定列，不允许给子列设置固定
-        if (parentColumn && parentColumn.fixed) {
-          column.fixed = parentColumn.fixed;
-        }
-        if (parentColumn && column.fixed !== parentColumn.fixed) {
-          (0, _log.errLog)('vxe.error.groupFixed');
-        }
-        if (isColGroup) {
-          column.visible = !!_xeUtils.default.findTree(column.children, subColumn => (0, _utils.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) {
-            (0, _log.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) {
-          (0, _log.warnLog)('vxe.error.scrollErrProp', ['span-method']);
-        }
-        if (this.footerSpanMethod) {
-          (0, _log.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();
-  },
   /**
    * 指定列宽的列进行拆分
    */
@@ -3545,38 +4026,43 @@ const Methods = {
    * 刷新滚动操作，手动同步滚动相关位置（对于某些特殊的操作，比如滚动条错位、固定列不同步）
    */
   refreshScroll() {
+    const $xeTable = this;
+    const internalData = $xeTable;
     const {
+      elemStore,
       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;
+    } = internalData;
+    const headerScrollElem = (0, _util.getRefElem)(elemStore['main-header-scroll']);
+    const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
+    const footerScrollElem = (0, _util.getRefElem)(elemStore['main-footer-scroll']);
+    const leftScrollElem = (0, _util.getRefElem)(elemStore['left-body-scroll']);
+    const rightScrollElem = (0, _util.getRefElem)(elemStore['right-body-scroll']);
+    const xHandleEl = $xeTable.$refs.refScrollXHandleElem;
+    const yHandleEl = $xeTable.$refs.refScrollYHandleElem;
     return new Promise(resolve => {
       // 还原滚动条位置
       if (lastScrollLeft || lastScrollTop) {
-        return (0, _util.restoreScrollLocation)(this, lastScrollLeft, lastScrollTop).then(() => {
+        return (0, _util.restoreScrollLocation)($xeTable, lastScrollLeft, lastScrollTop).then().then(() => {
           // 存在滚动行为未结束情况
-          setTimeout(resolve, 30);
+          setTimeout(resolve, 10);
         });
       }
+      internalData.intoRunScroll = true;
       // 重置
-      (0, _dom.setScrollTop)(tableBodyElem, lastScrollTop);
-      (0, _dom.setScrollTop)(leftBodyElem, lastScrollTop);
-      (0, _dom.setScrollTop)(rightBodyElem, lastScrollTop);
-      (0, _dom.setScrollLeft)(tableFooterElem, lastScrollLeft);
+      (0, _dom.setScrollTop)(yHandleEl, lastScrollTop);
+      (0, _dom.setScrollTop)(bodyScrollElem, lastScrollTop);
+      (0, _dom.setScrollTop)(leftScrollElem, lastScrollTop);
+      (0, _dom.setScrollTop)(rightScrollElem, lastScrollTop);
+      (0, _dom.setScrollLeft)(xHandleEl, lastScrollLeft);
+      (0, _dom.setScrollLeft)(bodyScrollElem, lastScrollLeft);
+      (0, _dom.setScrollLeft)(headerScrollElem, lastScrollLeft);
+      (0, _dom.setScrollLeft)(footerScrollElem, lastScrollLeft);
       // 存在滚动行为未结束情况
-      setTimeout(resolve, 30);
+      setTimeout(() => {
+        internalData.intoRunScroll = false;
+        resolve();
+      }, 10);
     });
   },
   /**
@@ -3585,368 +4071,67 @@ const Methods = {
    */
   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 (_dom.browse.msie) {
-              _xeUtils.default.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.default.arrayEach(listElem.querySelectorAll('.col--group'), thElem => {
-              const colNode = this.getColumnNode(thElem);
-              if (colNode) {
-                const column = colNode.item;
-                const {
-                  showHeaderOverflow
-                } = column;
-                const cellOverflow = _xeUtils.default.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.default.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 ((0, _dom.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 ((0, _dom.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 && (_dom.browse['-moz'] || _dom.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 ((0, _dom.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` : '';
-          }
-        }
-        const colgroupElem = elemStore[`${name}-${layout}-colgroup`];
-        if (colgroupElem) {
-          _xeUtils.default.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.default.isUndefined(showHeaderOverflow) || _xeUtils.default.isNull(showHeaderOverflow) ? allColumnHeaderOverflow : showHeaderOverflow;
-              } else if (layout === 'footer') {
-                cellOverflow = _xeUtils.default.isUndefined(showFooterOverflow) || _xeUtils.default.isNull(showFooterOverflow) ? allColumnFooterOverflow : showFooterOverflow;
-              } else {
-                cellOverflow = _xeUtils.default.isUndefined(showOverflow) || _xeUtils.default.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.default.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` : '';
-                  }
-                });
-              }
-            }
+    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);
     });
-    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 internalData = $xeTable;
     const {
-      tableBody,
-      leftContainer,
-      rightContainer
-    } = $xeTable.$refs;
-    const bodyElem = tableBody ? tableBody.$el : null;
+      elemStore
+    } = internalData;
+    const bodyScrollElem = (0, _util.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) {
-          (0, _dom.addClass)(leftContainer, 'scrolling--middle');
+          (0, _dom.addClass)(leftContainerElem, 'scrolling--middle');
         } else {
-          (0, _dom.removeClass)(leftContainer, 'scrolling--middle');
+          (0, _dom.removeClass)(leftContainerElem, 'scrolling--middle');
         }
       }
-      if (rightContainer) {
+      if (rightContainerElem) {
         if (bodtTargetEl.clientWidth < bodtTargetEl.scrollWidth - Math.ceil(bodtTargetEl.scrollLeft)) {
-          (0, _dom.addClass)(rightContainer, 'scrolling--middle');
+          (0, _dom.addClass)(rightContainerElem, 'scrolling--middle');
         } else {
-          (0, _dom.removeClass)(rightContainer, 'scrolling--middle');
+          (0, _dom.removeClass)(rightContainerElem, 'scrolling--middle');
         }
       }
     }
@@ -4002,10 +4187,10 @@ const Methods = {
       actived
     } = editStore;
     const {
-      ctxWrapper,
+      refTableMenu,
       filterWrapper,
       customWrapper,
-      validTip
+      refValidTooltip
     } = $refs;
     // 筛选
     if (filterWrapper) {
@@ -4037,7 +4222,7 @@ const Methods = {
         // 如果是激活状态，点击了单元格之外
         const cell = actived.args.cell;
         if (!cell || !(0, _dom.getEventTargetNode)(evnt, cell).flag) {
-          if (validTip && (0, _dom.getEventTargetNode)(evnt, validTip.$el).flag) {
+          if (refValidTooltip && (0, _dom.getEventTargetNode)(evnt, refValidTooltip.$el).flag) {
             // 如果是激活状态，且点击了校验提示框
           } else if (!this.lastCallTime || this.lastCallTime + 50 < Date.now()) {
             if (!(0, _dom.getEventTargetNode)(evnt, document.body, 'vxe-table--ignore-clear').flag) {
@@ -4085,7 +4270,7 @@ const Methods = {
         }
       }
     } else if (mouseConfig) {
-      if (!(0, _dom.getEventTargetNode)(evnt, $el).flag && !($xegrid && (0, _dom.getEventTargetNode)(evnt, $xegrid.$el).flag) && !(ctxWrapper && (0, _dom.getEventTargetNode)(evnt, ctxWrapper.$el).flag) && !($toolbar && (0, _dom.getEventTargetNode)(evnt, $toolbar.$el).flag)) {
+      if (!(0, _dom.getEventTargetNode)(evnt, $el).flag && !($xegrid && (0, _dom.getEventTargetNode)(evnt, $xegrid.$el).flag) && !(refTableMenu && (0, _dom.getEventTargetNode)(evnt, refTableMenu.$el).flag) && !($toolbar && (0, _dom.getEventTargetNode)(evnt, $toolbar.$el).flag)) {
         if (this.clearSelected) {
           this.clearSelected();
         }
@@ -4106,7 +4291,7 @@ const Methods = {
       }
     }
     // 如果配置了快捷菜单且，点击了其他地方则关闭
-    if (ctxMenuStore.visible && ctxWrapper && !(0, _dom.getEventTargetNode)(evnt, ctxWrapper.$el).flag) {
+    if (ctxMenuStore.visible && refTableMenu && !(0, _dom.getEventTargetNode)(evnt, refTableMenu.$el).flag) {
       this.closeMenu();
     }
     const isActivated = (0, _dom.getEventTargetNode)(evnt, ($xegrid || this).$el).flag;
@@ -4272,8 +4457,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);
         } else if (isEnter && !hasAltKey && keyboardConfig && keyboardOpts.isEnter && (selected.row || actived.row || treeConfig && (rowOpts.isCurrent || highlightCurrentRow) && currentRow)) {
@@ -4689,6 +4874,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,
@@ -4728,7 +4917,7 @@ const Methods = {
     const {
       $refs
     } = this;
-    const commTip = $refs.commTip;
+    const commTip = $refs.refCommTooltip;
     if (commTip) {
       return commTip.open(target, content);
     }
@@ -4743,7 +4932,7 @@ const Methods = {
       tooltipStore
     } = this;
     const tooltip = $refs.tooltip;
-    const commTip = $refs.commTip;
+    const commTip = $refs.refCommTooltip;
     if (tooltipStore.visible) {
       Object.assign(tooltipStore, {
         row: null,
@@ -6175,6 +6364,7 @@ const Methods = {
     this.emitEvent('cell-dblclick', params, evnt);
   },
   handleDefaultSort() {
+    const $xeTable = this;
     const {
       sortConfig,
       sortOpts
@@ -6201,7 +6391,7 @@ const Methods = {
           }
         });
         if (!sortOpts.remote) {
-          this.handleTableData(true).then(this.updateStyle);
+          this.handleTableData(true).then(() => updateStyle($xeTable));
         }
       }
     }
@@ -6714,8 +6904,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');
     });
@@ -6965,15 +7155,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;
@@ -7105,6 +7295,7 @@ const Methods = {
     return this.$nextTick();
   },
   sort(sortConfs, sortOrder) {
+    const $xeTable = this;
     const {
       sortOpts
     } = this;
@@ -7157,7 +7348,7 @@ const Methods = {
       }
       return this.$nextTick().then(() => {
         this.updateCellAreas();
-        return this.updateStyle();
+        return updateStyle($xeTable);
       });
     }
     return this.$nextTick();
@@ -7209,7 +7400,7 @@ const Methods = {
       }
       return $xeTable.$nextTick().then(() => {
         $xeTable.updateCellAreas();
-        return $xeTable.updateStyle();
+        return updateStyle($xeTable);
       });
     }
     return $xeTable.$nextTick();
@@ -7220,6 +7411,7 @@ const Methods = {
    * @param {String} column 列或字段名
    */
   clearSort(fieldOrColumn) {
+    const $xeTable = this;
     const {
       sortOpts
     } = this;
@@ -7234,7 +7426,7 @@ const Methods = {
     if (!sortOpts.remote) {
       this.handleTableData(true);
     }
-    return this.$nextTick().then(this.updateStyle);
+    return this.$nextTick().then(() => updateStyle($xeTable));
   },
   // 在 v3 中废弃
   getSortColumn() {
@@ -8132,7 +8324,7 @@ const Methods = {
       scrollXLoad,
       scrollYLoad
     } = this;
-    const bodyElem = $refs.tableBody.$el;
+    const bodyElem = $refs.refTableBody.$el;
     return {
       virtualX: scrollXLoad,
       virtualY: scrollYLoad,
@@ -8152,15 +8344,18 @@ const Methods = {
       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;
@@ -8231,10 +8426,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) {
@@ -8253,7 +8448,7 @@ const Methods = {
     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);
     }
@@ -8269,7 +8464,11 @@ const Methods = {
   },
   lazyScrollYData() {
     const $xeTable = this;
+    const props = $xeTable;
     const internalData = $xeTable;
+    const {
+      showOverflow
+    } = props;
     const {
       lyTimeout,
       lyRunTime,
@@ -8278,7 +8477,7 @@ const Methods = {
     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);
     }
@@ -8316,35 +8515,285 @@ const Methods = {
       $xeTable.lazyScrollYData();
     }
   },
-  scrollXEvent(evnt) {
+  triggerBodyScrollEvent(evnt, fixedType) {
     const $xeTable = this;
     const internalData = $xeTable;
     const {
-      intoRunScroll,
-      inFooterScroll,
+      elemStore,
+      lastScrollTop,
+      lastScrollLeft,
+      inWheelScroll,
+      inVirtualScroll,
+      inHeaderScroll,
       inBodyScroll,
-      lastScrollTop
+      scrollRenderType,
+      inFooterScroll
     } = internalData;
-    if (!intoRunScroll) {
-      if (inFooterScroll) {
+    const xHandleEl = $xeTable.$refs.refScrollXHandleElem;
+    const yHandleEl = $xeTable.$refs.refScrollYHandleElem;
+    const leftScrollElem = (0, _util.getRefElem)(elemStore['left-body-scroll']);
+    const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
+    const rightScrollElem = (0, _util.getRefElem)(elemStore['right-body-scroll']);
+    const headerScrollElem = (0, _util.getRefElem)(elemStore['main-header-scroll']);
+    const footerScrollElem = (0, _util.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') {
+        (0, _dom.setScrollTop)(bodyScrollElem, scrollTop);
+        (0, _dom.setScrollTop)(rightScrollElem, scrollTop);
+      } else if (fixedType === 'right') {
+        (0, _dom.setScrollTop)(bodyScrollElem, scrollTop);
+        (0, _dom.setScrollTop)(leftScrollElem, scrollTop);
+      } else {
+        (0, _dom.setScrollTop)(leftScrollElem, scrollTop);
+        (0, _dom.setScrollTop)(rightScrollElem, scrollTop);
       }
+      (0, _dom.setScrollTop)(yHandleEl, scrollTop);
+      $xeTable.triggerScrollYEvent(evnt);
+    }
+    if (isRollX) {
+      (0, _dom.setScrollLeft)(xHandleEl, scrollLeft);
+      (0, _dom.setScrollLeft)(headerScrollElem, scrollLeft);
+      (0, _dom.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 = (0, _util.getRefElem)(elemStore['main-body-scroll']);
+    const headerScrollElem = (0, _util.getRefElem)(elemStore['main-header-scroll']);
+    const footerScrollElem = (0, _util.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;
+    (0, _dom.setScrollLeft)(xHandleEl, scrollLeft);
+    (0, _dom.setScrollLeft)(footerScrollElem, scrollLeft);
+    (0, _dom.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 = (0, _util.getRefElem)(elemStore['main-body-scroll']);
+    const headerScrollElem = (0, _util.getRefElem)(elemStore['main-header-scroll']);
+    const footerScrollElem = (0, _util.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;
+    (0, _dom.setScrollLeft)(xHandleEl, scrollLeft);
+    (0, _dom.setScrollLeft)(headerScrollElem, scrollLeft);
+    (0, _dom.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 = (0, _util.getRefElem)(elemStore['left-body-scroll']);
+    const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
+    const rightScrollElem = (0, _util.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;
+      (0, _dom.setScrollTop)(yHandleEl, scrollTop);
+      (0, _dom.setScrollTop)(bodyScrollElem, scrollTop);
+      (0, _dom.setScrollTop)(leftScrollElem, scrollTop);
+      (0, _dom.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 = (0, _util.getRefElem)(elemStore['main-header-scroll']);
+    const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
+    const footerScrollElem = (0, _util.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;
@@ -8352,9 +8801,9 @@ const Methods = {
     const isRollX = true;
     const isRollY = scrollTop !== lastScrollTop;
     internalData.inVirtualScroll = true;
-    (0, _dom.setScrollLeft)(bodyElem, scrollLeft);
-    (0, _dom.setScrollLeft)(headerElem, scrollLeft);
-    (0, _dom.setScrollLeft)(footerElem, scrollLeft);
+    (0, _dom.setScrollLeft)(bodyScrollElem, scrollLeft);
+    (0, _dom.setScrollLeft)(headerScrollElem, scrollLeft);
+    (0, _dom.setScrollLeft)(footerScrollElem, scrollLeft);
     $xeTable.triggerScrollXEvent(evnt);
     $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
       type: 'table',
@@ -8365,31 +8814,28 @@ const Methods = {
     const $xeTable = this;
     const internalData = $xeTable;
     const {
-      intoRunScroll,
-      inFooterScroll,
+      elemStore,
+      inWheelScroll,
+      lastScrollLeft,
+      inHeaderScroll,
       inBodyScroll,
-      lastScrollLeft
+      inFooterScroll
     } = internalData;
-    if (!intoRunScroll) {
-      if (inFooterScroll) {
-        return;
-      }
-      if (inBodyScroll) {
-        return;
-      }
+    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 = (0, _util.getRefElem)(elemStore['left-body-scroll']);
+    const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
+    const rightScrollElem = (0, _util.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;
@@ -8397,52 +8843,26 @@ const Methods = {
     const isRollX = scrollLeft !== lastScrollLeft;
     const isRollY = true;
     internalData.inVirtualScroll = true;
-    (0, _dom.setScrollTop)(bodyElem, scrollTop);
-    (0, _dom.setScrollTop)(leftElem, scrollTop);
-    (0, _dom.setScrollTop)(rightElem, scrollTop);
+    (0, _dom.setScrollTop)(bodyScrollElem, scrollTop);
+    (0, _dom.setScrollTop)(leftScrollElem, scrollTop);
+    (0, _dom.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.default.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();
@@ -8452,21 +8872,21 @@ const Methods = {
   // 更新横向 X 可视渲染上下剩余空间大小
   updateScrollXSpace() {
     const $xeTable = this;
+    const reactData = $xeTable;
+    const internalData = $xeTable;
     const {
-      $refs,
       isGroup,
-      elemStore,
+      scrollXLoad
+    } = reactData;
+    const {
       visibleColumn,
       scrollXStore,
-      scrollXLoad,
-      tableWidth,
-      scrollbarWidth
-    } = $xeTable;
-    const {
-      tableHeader,
-      tableBody,
-      tableFooter
-    } = $refs;
+      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;
@@ -8490,25 +8910,27 @@ const Methods = {
       containerList.forEach(name => {
         const layoutList = ['header', 'body', 'footer'];
         layoutList.forEach(layout => {
-          const xSpaceElem = elemStore[`${name}-${layout}-xSpace`];
+          const xSpaceElem = (0, _util.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();
     });
@@ -8516,26 +8938,32 @@ const Methods = {
   // 更新纵向 Y 可视渲染上下剩余空间大小
   updateScrollYSpace() {
     const $xeTable = this;
+    const props = $xeTable;
+    const reactData = $xeTable;
+    const internalData = $xeTable;
+    const {
+      showOverflow
+    } = props;
     const {
-      showOverflow,
-      elemStore,
-      scrollYStore,
       scrollYLoad,
+      rowHeight
+    } = reactData;
+    const {
+      scrollYStore,
+      elemStore,
       afterFullData,
       fullAllDataRowIdData
-    } = this;
+    } = internalData;
     const {
-      startIndex,
-      rowHeight
+      startIndex
     } = scrollYStore;
-    let bodyHeight = 0;
-    let topSpaceHeight = 0;
+    const bodyTableElem = (0, _util.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 {
         for (let i = 0; i < afterFullData.length; i++) {
@@ -8543,7 +8971,7 @@ const Methods = {
           const rowid = (0, _util.getRowid)($xeTable, row);
           const rowRest = fullAllDataRowIdData[rowid];
           if (rowRest) {
-            bodyHeight += rowRest.height || rowHeight;
+            ySpaceHeight += rowRest.height || rowHeight;
           }
         }
         for (let i = 0; i < startIndex; i++) {
@@ -8555,27 +8983,31 @@ 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 = (0, _util.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 = (0, _util.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;
@@ -8593,17 +9025,17 @@ const Methods = {
       $refs
     } = this;
     const {
-      tableBody,
-      tableHeader,
+      refTableBody,
+      refTableHeader,
       leftBody,
       rightBody,
-      tableFooter
+      refTableFooter
     } = $refs;
-    const tableBodyElem = tableBody ? tableBody.$el : null;
+    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.default.isNumber(scrollLeft)) {
       const xHandleEl = $xeTable.$refs.refScrollXHandleElem;
@@ -8717,46 +9149,36 @@ const Methods = {
     const $xeTable = this;
     const internalData = $xeTable;
     const {
+      elemStore,
       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 headerScrollElem = (0, _util.getRefElem)(elemStore['main-header-scroll']);
+    const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
+    const footerScrollElem = (0, _util.getRefElem)(elemStore['main-footer-scroll']);
+    const leftScrollElem = (0, _util.getRefElem)(elemStore['left-body-scroll']);
+    const rightScrollElem = (0, _util.getRefElem)(elemStore['right-body-scroll']);
     const xHandleEl = $xeTable.$refs.refScrollXHandleElem;
-    if (xHandleEl) {
-      (0, _dom.setScrollLeft)(xHandleEl, 0);
-    } else {
-      (0, _dom.setScrollLeft)(tableBodyElem, 0);
-      (0, _dom.setScrollLeft)(tableHeaderElem, 0);
-      (0, _dom.setScrollLeft)(tableFooterElem, 0);
-    }
     const yHandleEl = $xeTable.$refs.refScrollYHandleElem;
-    if (yHandleEl) {
-      (0, _dom.setScrollTop)(yHandleEl, 0);
-    } else {
-      (0, _dom.setScrollTop)(tableBodyElem, 0);
-      (0, _dom.setScrollTop)(leftBodyElem, 0);
-      (0, _dom.setScrollTop)(rightBodyElem, 0);
-    }
+    internalData.intoRunScroll = true;
+    (0, _dom.setScrollLeft)(xHandleEl, 0);
+    (0, _dom.setScrollLeft)(bodyScrollElem, 0);
+    (0, _dom.setScrollLeft)(headerScrollElem, 0);
+    (0, _dom.setScrollLeft)(footerScrollElem, 0);
+    (0, _dom.setScrollTop)(yHandleEl, 0);
+    (0, _dom.setScrollTop)(bodyScrollElem, 0);
+    (0, _dom.setScrollTop)(leftScrollElem, 0);
+    (0, _dom.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(() => {
-      (0, _dom.setScrollLeft)(tableBodyElem, 0);
-      (0, _dom.setScrollLeft)(tableHeaderElem, 0);
-      (0, _dom.setScrollLeft)(tableFooterElem, 0);
-      (0, _dom.setScrollTop)(tableBodyElem, 0);
-      (0, _dom.setScrollTop)(leftBodyElem, 0);
-      (0, _dom.setScrollTop)(rightBodyElem, 0);
+      internalData.intoRunScroll = false;
     });
   },
   /**
@@ -8796,8 +9218,8 @@ const Methods = {
         editRules,
         validStore
       } = this;
-      const tableBody = $refs.tableBody;
-      if (slotParams && tableBody && editRules) {
+      const refTableBody = $refs.refTableBody;
+      if (slotParams && refTableBody && editRules) {
         const {
           row,
           column
@@ -8839,13 +9261,14 @@ const Methods = {
    * @param {TableMergeConfig[]} merges { row: Row|number, column: ColumnInfo|number, rowspan: number, colspan: number }
    */
   setMergeCells(merges) {
+    const $xeTable = this;
     if (this.spanMethod) {
       (0, _log.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);
     });
   },
   /**
@@ -8853,13 +9276,14 @@ const Methods = {
    * @param {TableMergeConfig[]} merges 多个或数组 [{row:Row|number, col:ColumnInfo|number}]
    */
   removeMergeCells(merges) {
+    const $xeTable = this;
     if (this.spanMethod) {
       (0, _log.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;
     });
   },
@@ -8873,32 +9297,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) {
       (0, _log.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) {
       (0, _log.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;
     });
   },
@@ -8912,9 +9339,10 @@ const Methods = {
    * 清除所有表尾合并
    */
   clearMergeFooterItems() {
+    const $xeTable = this;
     this.mergeFooterList = [];
     return this.$nextTick().then(() => {
-      return this.updateStyle();
+      return updateStyle($xeTable);
     });
   },
   updateZindex() {