vxe-table 3.12.8 → 3.12.10-beta.0

package/packages/table/src/methods.ts

@@ -1,27 +1,18 @@
 import XEUtils from 'xe-utils'
-import { browse, getTpImg, isPx, isScale, hasClass, addClass, removeClass, getEventTargetNode, getPaddingTopBottomSize, setScrollTop, setScrollLeft, isNodeElement } from '../../ui/src/dom'
+import { browse, getTpImg, isPx, isScale, hasClass, addClass, removeClass, getEventTargetNode, getPaddingTopBottomSize, setScrollTop, setScrollLeft } from '../../ui/src/dom'
 import { getLastZIndex, nextZIndex, hasChildrenList, getFuncText, isEnableConf, formatText, eqEmptyValue } from '../../ui/src/utils'
 import { VxeUI } from '../../ui'
 import Cell from './cell'
-import { getRowUniqueId, clearTableAllStatus, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, getRootColumn, getColReMinWidth } from './util'
+import { getRowUniqueId, clearTableAllStatus, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, getRootColumn, getColReMinWidth, getRefElem } from './util'
 import { getSlotVNs } from '../../ui/src/vn'
 import { warnLog, errLog } from '../../ui/src/log'
 
-import type { VxeTableDefines, VxeColumnPropTypes, VxeTableEmits, ValueOf, TableReactData, VxeTableConstructor, TableInternalData, VxeTablePrivateMethods } from '../../../types'
+import type { VxeTableDefines, VxeColumnPropTypes, VxeTableEmits, ValueOf, TableReactData, VxeTableConstructor, VxeToolbarConstructor, TableInternalData, VxeTablePrivateMethods, VxeTooltipInstance } from '../../../types'
 
 const { getConfig, getI18n, renderer, formats, interceptor, createEvent } = VxeUI
 
 const customStorageKey = 'VXE_CUSTOM_STORE'
 
-// 获取所有的列，排除分组
-const getColumnList = (columns: any[]) => {
-  const result: any[] = []
-  columns.forEach((column) => {
-    result.push(...(column.children && column.children.length ? getColumnList(column.children) : [column]))
-  })
-  return result
-}
-
 function eqCellValue (row1: any, row2: any, field: any) {
   const val1 = XEUtils.get(row1, field)
   const val2 = XEUtils.get(row2, field)
@@ -78,21 +69,23 @@ function handleReserveRow (_vm: any, reserveRowMap: any) {
   return reserveList
 }
 
-function handleVirtualXVisible ($xeTable: any) {
-  const internalData = $xeTable
+function handleVirtualXVisible ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
+  const internalData = $xeTable as unknown as TableInternalData
 
-  const { visibleColumn } = internalData
-  const tableBody = $xeTable.$refs.tableBody
-  const tableBodyElem = tableBody ? tableBody.$el as HTMLDivElement : null
-  if (tableBodyElem) {
-    const { scrollLeft, clientWidth } = tableBodyElem
-    const endWidth = scrollLeft + clientWidth
+  const { elemStore, visibleColumn } = internalData
+  const leftFixedWidth = $xeTable.computeLeftFixedWidth
+  const rightFixedWidth = $xeTable.computeRightFixedWidth
+  const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
+  if (bodyScrollElem) {
+    const { scrollLeft, clientWidth } = bodyScrollElem
+    const startWidth = scrollLeft + leftFixedWidth
+    const endWidth = scrollLeft + clientWidth - rightFixedWidth
     let toVisibleIndex = -1
     let cWidth = 0
     let visibleSize = 0
     for (let colIndex = 0, colLen = visibleColumn.length; colIndex < colLen; colIndex++) {
       cWidth += visibleColumn[colIndex].renderWidth
-      if (toVisibleIndex === -1 && scrollLeft < cWidth) {
+      if (toVisibleIndex === -1 && startWidth < cWidth) {
         toVisibleIndex = colIndex
       }
       if (toVisibleIndex >= 0) {
@@ -102,15 +95,92 @@ function handleVirtualXVisible ($xeTable: any) {
         }
       }
     }
-    return { toVisibleIndex: Math.max(0, toVisibleIndex), visibleSize: Math.max(6, visibleSize) }
+    return { toVisibleIndex: Math.max(0, toVisibleIndex), visibleSize: Math.max(1, visibleSize) }
   }
   return { toVisibleIndex: 0, visibleSize: 6 }
 }
 
+function handleCustomRestore ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, storeData: VxeTableDefines.CustomStoreData) {
+  const reactData = $xeTable as unknown as TableReactData
+  const internalData = $xeTable as unknown as TableInternalData
+
+  let { collectColumn } = internalData
+  const { resizableData, sortData, visibleData, fixedData } = storeData
+  let hasCustomSort = false
+  // 处理还原
+  if (resizableData || sortData || visibleData || fixedData) {
+    XEUtils.eachTree(collectColumn, (column, index, items, path, parentColumn) => {
+      const colKey = column.getKey()
+      // 支持一级
+      if (!parentColumn) {
+        if (fixedData && fixedData[colKey] !== undefined) {
+          column.fixed = fixedData[colKey]
+        }
+        if (sortData && XEUtils.isNumber(sortData[colKey])) {
+          hasCustomSort = true
+          column.renderSortNumber = sortData[colKey]
+        }
+      }
+      if (resizableData && XEUtils.isNumber(resizableData[colKey])) {
+        column.resizeWidth = resizableData[colKey]
+      }
+      if (visibleData && XEUtils.isBoolean(visibleData[colKey])) {
+        column.visible = visibleData[colKey]
+      }
+    })
+    // 如果自定义了顺序
+    if (hasCustomSort) {
+      collectColumn = XEUtils.orderBy(collectColumn, 'renderSortNumber')
+      internalData.collectColumn = collectColumn
+      internalData.tableFullColumn = getColumnList(collectColumn)
+    }
+    reactData.isCustomStatus = true
+  } else {
+    reactData.isCustomStatus = false
+  }
+}
+
 /**
-   * 更新数据列的 Map
-   * 牺牲数据组装的耗时，用来换取使用过程中的流畅
-   */
+ * 还原自定义列操作状态
+ */
+function restoreCustomStorage ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
+  const props = $xeTable
+
+  const { customConfig } = props
+  const tableId = $xeTable.computeTableId
+  const customOpts = $xeTable.computeCustomOpts
+  const { storage, restoreStore } = customOpts
+  const isAllCustom = storage === true
+  const storageOpts: VxeTableDefines.VxeTableCustomStorageObj = isAllCustom ? {} : Object.assign({}, storage || {})
+  const isCustomResizable = isAllCustom || storageOpts.resizable
+  const isCustomVisible = isAllCustom || storageOpts.visible
+  const isCustomFixed = isAllCustom || storageOpts.fixed
+  const isCustomSort = isAllCustom || storageOpts.sort
+  if ((customConfig ? isEnableConf(customOpts) : customOpts.enabled) && (isCustomResizable || isCustomVisible || isCustomFixed || isCustomSort)) {
+    if (!tableId) {
+      errLog('vxe.error.reqProp', ['id'])
+      return
+    }
+    const storeData: VxeTableDefines.CustomStoreData = 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: VxeTableConstructor) {
   const props = $xeTable
   const reactData = $xeTable as unknown as TableReactData
@@ -143,7 +213,7 @@ function cacheColumnMap ($xeTable: VxeTableConstructor) {
       }
       fullColumnFieldData[field] = rest
     } else {
-      if (storage || isCrossDrag || isSelfToChildDrag) {
+      if (storage || (columnOpts.drag && (isCrossDrag || isSelfToChildDrag))) {
         errLog('vxe.error.reqProp', [`${column.getTitle() || type || ''} -> column.field`])
       }
     }
@@ -284,15 +354,345 @@ function handleVirtualTreeToList ($xeTable: VxeTableConstructor) {
   return internalData.afterFullData
 }
 
-function computeRowHeight ($xeTable: any) {
-  const tableHeader = $xeTable.$refs.tableHeader
-  const tableBody = $xeTable.$refs.tableBody
-  const tableBodyElem = tableBody ? tableBody.$el as HTMLDivElement : null
-  const vSize = $xeTable.computeSize
-  const rowHeightMaps = $xeTable.computeRowHeightMaps
+function updateStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
+  const props = $xeTable
+  const reactData = $xeTable as unknown as TableReactData
+  const internalData = $xeTable as unknown as TableInternalData
+
+  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 as HTMLDivElement
+  if (!el) {
+    return
+  }
+  const containerList = ['main', 'left', 'right']
+  const emptyPlaceholderElem = $xeTable.$refs.refEmptyPlaceholder as HTMLDivElement
+  const cellOffsetWidth = $xeTable.computeCellOffsetWidth
+  const mouseOpts = $xeTable.computeMouseOpts
+  const bodyWrapperElem = getRefElem(elemStore['main-body-wrapper'])
+  const bodyTableElem = getRefElem(elemStore['main-body-table'])
+  if (emptyPlaceholderElem) {
+    emptyPlaceholderElem.style.top = `${headerHeight}px`
+    emptyPlaceholderElem.style.height = bodyWrapperElem ? `${bodyWrapperElem.offsetHeight - scrollbarHeight}px` : ''
+  }
+
+  let bodyHeight = 0
+  let bodyMaxHeight = 0
+  const bodyMinHeight = customMinHeight - headerHeight - footerHeight - scrollbarHeight
+  if (customMaxHeight) {
+    bodyMaxHeight = Math.max(bodyMinHeight, customMaxHeight - headerHeight - footerHeight - scrollbarHeight)
+  }
+  if (customHeight) {
+    bodyHeight = customHeight - headerHeight - footerHeight - scrollbarHeight
+  }
+  if (!bodyHeight) {
+    if (bodyTableElem) {
+      bodyHeight = bodyTableElem.clientHeight
+    }
+  }
+  if (bodyHeight) {
+    if (bodyMaxHeight) {
+      bodyHeight = Math.min(bodyMaxHeight, bodyHeight)
+    }
+    bodyHeight = Math.max(bodyMinHeight, bodyHeight)
+  }
+
+  const scrollXVirtualEl = $xeTable.$refs.refScrollXVirtualElem as HTMLDivElement
+  if (scrollXVirtualEl) {
+    scrollXVirtualEl.style.height = `${scrollbarHeight}px`
+    scrollXVirtualEl.style.visibility = scrollbarHeight ? 'visible' : 'hidden'
+  }
+  const xHandleEl = $xeTable.$refs.refScrollXHandleElem as HTMLDivElement
+  if (xHandleEl) {
+    xHandleEl.style.width = `${el.clientWidth - scrollbarWidth}px`
+  }
+  const xRightCornerEl = $xeTable.$refs.refScrollXRightCornerElem as HTMLDivElement
+  if (xRightCornerEl) {
+    xRightCornerEl.style.width = `${scrollbarWidth}px`
+    xRightCornerEl.style.display = scrollbarWidth && scrollbarHeight ? 'block' : ''
+  }
+
+  const scrollYVirtualEl = $xeTable.$refs.refScrollYVirtualElem as HTMLDivElement
+  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 as HTMLDivElement
+  if (yTopCornerEl) {
+    yTopCornerEl.style.height = `${headerHeight}px`
+    yTopCornerEl.style.display = headerHeight ? 'block' : ''
+  }
+  const yHandleEl = $xeTable.$refs.refScrollYHandleElem as HTMLDivElement
+  if (yHandleEl) {
+    yHandleEl.style.height = `${bodyHeight}px`
+    yHandleEl.style.top = `${headerHeight}px`
+  }
+  const yBottomCornerEl = $xeTable.$refs.refScrollYBottomCornerElem as HTMLDivElement
+  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: VxeTableDefines.ColumnInfo[] = []
+    let fixedWrapperElem: HTMLDivElement
+    if (fixedType) {
+      fixedColumn = isFixedLeft ? columnStore.leftList : columnStore.rightList
+      fixedWrapperElem = (isFixedLeft ? $xeTable.$refs.refLeftContainer : $xeTable.$refs.refRightContainer) as HTMLDivElement
+    }
+    layoutList.forEach(layout => {
+      const wrapperElem = getRefElem(elemStore[`${name}-${layout}-wrapper`])
+      const currScrollElem = getRefElem(elemStore[`${name}-${layout}-scroll`])
+      const tableElem = getRefElem(elemStore[`${name}-${layout}-table`])
+      if (layout === 'header') {
+        // 表头体样式处理
+        // 横向滚动渲染
+        let tWidth = tableWidth
+        let renderColumnList = tableColumn
+        let isOptimizeMode = false
+
+        if (isGroup) {
+          renderColumnList = visibleColumn
+
+          if (fixedType) {
+            if (wrapperElem) {
+              wrapperElem.style.width = tWidth ? `${tWidth}px` : ''
+            }
+          }
+        } else {
+          // 如果是使用优化模式
+          if (scrollXLoad || scrollYLoad || allColumnHeaderOverflow) {
+            if (spanMethod || footerSpanMethod) {
+              // 如果不支持优化模式
+            } else {
+              isOptimizeMode = true
+            }
+          }
+
+          if (fixedType) {
+            renderColumnList = visibleColumn
+            // 如果是使用优化模式
+            if (isOptimizeMode) {
+              renderColumnList = fixedColumn || []
+            }
+
+            if (!isOptimizeMode) {
+              if (wrapperElem) {
+                wrapperElem.style.width = tWidth ? `${tWidth}px` : ''
+              }
+            }
+          }
+        }
+
+        tWidth = renderColumnList.reduce((previous, column) => previous + column.renderWidth, 0)
+
+        if (currScrollElem) {
+          currScrollElem.style.height = `${headerHeight}px`
+        }
+
+        if (tableElem) {
+          tableElem.style.width = tWidth ? `${tWidth}px` : ''
+        }
+
+        const repairElem = getRefElem(elemStore[`${name}-${layout}-repair`])
+        if (repairElem) {
+          repairElem.style.width = `${tableWidth}px`
+        }
+
+        const listElem = getRefElem(elemStore[`${name}-${layout}-list`])
+        if (isGroup && listElem) {
+          XEUtils.arrayEach(listElem.querySelectorAll('.col--group'), (thElem: any) => {
+            const colNode = $xeTable.getColumnNode(thElem)
+            if (colNode) {
+              const column = colNode.item
+              const { showHeaderOverflow } = column
+              const cellOverflow = XEUtils.isBoolean(showHeaderOverflow) ? showHeaderOverflow : allColumnHeaderOverflow
+              const showEllipsis = cellOverflow === 'ellipsis'
+              const showTitle = cellOverflow === 'title'
+              const showTooltip = cellOverflow === true || cellOverflow === 'tooltip'
+              const hasEllipsis = showTitle || showTooltip || showEllipsis
+              let childWidth = 0
+              let countChild = 0
+              if (hasEllipsis) {
+                XEUtils.eachTree(column.children, (item) => {
+                  if (!item.children || !column.children.length) {
+                    countChild++
+                  }
+                  childWidth += item.renderWidth
+                }, { children: 'children' })
+              }
+              thElem.style.width = hasEllipsis ? `${childWidth - countChild - (border ? 2 : 0)}px` : ''
+            }
+          })
+        }
+      } else if (layout === 'body') {
+        if (currScrollElem) {
+          currScrollElem.style.maxHeight = customMaxHeight ? `${bodyMaxHeight}px` : ''
+          currScrollElem.style.height = customHeight ? `${bodyHeight}px` : ''
+          currScrollElem.style.minHeight = `${bodyMinHeight}px`
+        }
+
+        // 如果是固定列
+        if (fixedWrapperElem) {
+          if (wrapperElem) {
+            wrapperElem.style.top = `${headerHeight}px`
+          }
+          fixedWrapperElem.style.height = `${customHeight > 0 ? customHeight : (tableHeight + headerHeight + footerHeight + scrollbarHeight)}px`
+          fixedWrapperElem.style.width = `${fixedColumn.reduce((previous, column) => previous + column.renderWidth, 0)}px`
+        }
+
+        let tWidth = tableWidth
+        let renderColumnList = tableColumn
+
+        let isOptimizeMode = false
+        // 如果是使用优化模式
+        if (scrollXLoad || scrollYLoad || (allColumnOverflow && isAllOverflow)) {
+          if (expandColumn || spanMethod || footerSpanMethod) {
+            // 如果不支持优化模式
+          } else {
+            isOptimizeMode = true
+          }
+        }
+
+        if (fixedType) {
+          renderColumnList = visibleColumn
+          if (isOptimizeMode) {
+            renderColumnList = fixedColumn || []
+          }
+
+          if (!isOptimizeMode) {
+            if (wrapperElem) {
+              wrapperElem.style.width = tWidth ? `${tWidth}px` : ''
+            }
+          }
+        }
+
+        tWidth = renderColumnList.reduce((previous, column) => previous + column.renderWidth, 0)
+
+        if (tableElem) {
+          tableElem.style.width = tWidth ? `${tWidth}px` : ''
+          // 兼容性处理
+          tableElem.style.paddingRight = scrollbarWidth && fixedType && (browse['-moz'] || browse.safari) ? `${scrollbarWidth}px` : ''
+        }
+        const emptyBlockElem = getRefElem(elemStore[`${name}-${layout}-emptyBlock`])
+        if (emptyBlockElem) {
+          emptyBlockElem.style.width = tWidth ? `${tWidth}px` : ''
+        }
+      } else if (layout === 'footer') {
+        let tWidth = tableWidth
+
+        let renderColumnList = tableColumn
+        let isOptimizeMode = false
+        // 如果是使用优化模式
+        if (scrollXLoad || scrollYLoad || allColumnFooterOverflow) {
+          if (spanMethod || footerSpanMethod) {
+            // 如果不支持优化模式
+          } else {
+            isOptimizeMode = true
+          }
+        }
+
+        if (fixedType) {
+          renderColumnList = visibleColumn
+          if (isOptimizeMode) {
+            renderColumnList = fixedColumn || []
+          }
+
+          if (!isOptimizeMode) {
+            if (wrapperElem) {
+              wrapperElem.style.width = tWidth ? `${tWidth}px` : ''
+            }
+          }
+        }
+
+        tWidth = renderColumnList.reduce((previous, column) => previous + column.renderWidth, 0)
+
+        if (currScrollElem) {
+          currScrollElem.style.height = `${footerHeight}px`
+          // 如果是固定列
+          if (fixedWrapperElem) {
+            if (wrapperElem) {
+              wrapperElem.style.top = `${customHeight > 0 ? customHeight - footerHeight - scrollbarHeight : tableHeight + headerHeight}px`
+            }
+          }
+        }
+        if (tableElem) {
+          tableElem.style.width = tWidth ? `${tWidth}px` : ''
+        }
+      }
+      const colgroupElem = getRefElem(elemStore[`${name}-${layout}-colgroup`])
+      if (colgroupElem) {
+        XEUtils.arrayEach(colgroupElem.children, (colElem: any) => {
+          const colid = colElem.getAttribute('name')
+          if (fullColumnIdData[colid]) {
+            const colRest = fullColumnIdData[colid]
+            const column = colRest.column
+            const { showHeaderOverflow, showFooterOverflow, showOverflow } = column
+            let cellOverflow
+            colElem.style.width = `${column.renderWidth}px`
+            if (layout === 'header') {
+              cellOverflow = XEUtils.isUndefined(showHeaderOverflow) || XEUtils.isNull(showHeaderOverflow) ? allColumnHeaderOverflow : showHeaderOverflow
+            } else if (layout === 'footer') {
+              cellOverflow = XEUtils.isUndefined(showFooterOverflow) || XEUtils.isNull(showFooterOverflow) ? allColumnFooterOverflow : showFooterOverflow
+            } else {
+              cellOverflow = XEUtils.isUndefined(showOverflow) || XEUtils.isNull(showOverflow) ? allColumnOverflow : showOverflow
+            }
+            const showEllipsis = cellOverflow === 'ellipsis'
+            const showTitle = cellOverflow === 'title'
+            const showTooltip = cellOverflow === true || cellOverflow === 'tooltip'
+            let hasEllipsis = showTitle || showTooltip || showEllipsis
+            const listElem = getRefElem(elemStore[`${name}-${layout}-list`])
+            // 纵向虚拟滚动不支持动态行高
+            if (scrollYLoad && !hasEllipsis) {
+              hasEllipsis = true
+            }
+            if (listElem) {
+              XEUtils.arrayEach(listElem.querySelectorAll(`.${column.id}`), (elem: any) => {
+                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: VxeTableConstructor) {
+  const tableHeader = $xeTable.$refs.refTableHeader
+  const tableBody = $xeTable.$refs.refTableBody
+  const tableBodyElem = tableBody ? (tableBody as any).$el as HTMLDivElement : null
+  const defaultRowHeight = $xeTable.computeDefaultRowHeight
   let rowHeight = 0
   if (tableBodyElem) {
-    const tableHeaderElem = tableHeader ? tableHeader.$el as HTMLDivElement : null
+    const tableHeaderElem = tableHeader ? (tableHeader as any).$el as HTMLDivElement : null
     let firstTrElem
     firstTrElem = tableBodyElem.querySelector('tr')
     if (!firstTrElem && tableHeaderElem) {
@@ -303,7 +703,7 @@ function computeRowHeight ($xeTable: any) {
     }
   }
   if (!rowHeight) {
-    rowHeight = rowHeightMaps[vSize || 'default']
+    rowHeight = defaultRowHeight
   }
   // 最低支持 18px 行高
   return Math.max(18, rowHeight)
@@ -311,15 +711,15 @@ function computeRowHeight ($xeTable: any) {
 
 function handleVirtualYVisible ($xeTable: VxeTableConstructor) {
   const props = $xeTable
+  const reactData = $xeTable as unknown as TableReactData
   const internalData = $xeTable as unknown as TableInternalData
 
   const { showOverflow } = props
-  const { scrollYStore, afterFullData, fullAllDataRowIdData } = internalData
-  const tableBody = $xeTable.$refs.tableBody
-  const tableBodyElem = tableBody ? (tableBody as any).$el as HTMLDivElement : null
-  const { rowHeight } = scrollYStore
-  if (tableBodyElem) {
-    const { scrollTop, clientHeight } = tableBodyElem
+  const { rowHeight } = reactData
+  const { elemStore, afterFullData, fullAllDataRowIdData } = internalData
+  const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
+  if (bodyScrollElem) {
+    const { scrollTop, clientHeight } = bodyScrollElem
     const endHeight = scrollTop + clientHeight
     let toVisibleIndex = -1
     let offsetTop = 0
@@ -344,9 +744,9 @@ function handleVirtualYVisible ($xeTable: VxeTableConstructor) {
         }
       }
     }
-    return { toVisibleIndex: Math.max(0, toVisibleIndex), visibleSize: Math.max(8, visibleSize) }
+    return { toVisibleIndex: Math.max(0, toVisibleIndex), visibleSize: Math.max(6, visibleSize) }
   }
-  return { toVisibleIndex: 0, visibleSize: 8 }
+  return { toVisibleIndex: 0, visibleSize: 6 }
 }
 
 function calculateMergerOffsetIndex (list: any, offsetItem: any, type: any) {
@@ -485,18 +885,24 @@ function autoCellWidth ($xeTable: VxeTableConstructor & VxeTablePrivateMethods)
   const reactData = $xeTable as unknown as TableReactData
   const internalData = $xeTable as unknown as TableInternalData
 
-  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 as any).$el as HTMLDivElement : null
-  const headerElem = tableHeader ? (tableHeader as any).$el as HTMLDivElement : null
-  const footerElem = tableFooter ? (tableFooter as any).$el as HTMLDivElement : null
   if (!bodyElem) {
     return
   }
+  const yHandleEl = $xeTable.$refs.refScrollYHandleElem as HTMLDivElement
+  if (!yHandleEl) {
+    return
+  }
+  const xHandleEl = $xeTable.$refs.refScrollXHandleElem as HTMLDivElement
+  if (!xHandleEl) {
+    return
+  }
   let tableWidth = 0
   const minCellWidth = 40 // 列宽最少限制 40px
-  const bodyWidth = bodyElem.clientWidth - 1
+  const bodyWidth = bodyElem.clientWidth
   let remainWidth = bodyWidth
   let meanWidth = remainWidth / 100
   const { fit } = props
@@ -564,16 +970,16 @@ function autoCellWidth ($xeTable: VxeTableConstructor & VxeTablePrivateMethods)
   })
   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
@@ -581,40 +987,21 @@ function autoCellWidth ($xeTable: VxeTableConstructor & VxeTablePrivateMethods)
     }
   }
   const tableHeight = bodyElem.offsetHeight
-  const overflowY = bodyElem.scrollHeight > bodyElem.clientHeight
-  let scrollbarWidth = 0
-  if (overflowY) {
-    scrollbarWidth = Math.max(bodyElem.offsetWidth - bodyElem.clientWidth, 0)
-  }
-  reactData.scrollbarWidth = scrollbarWidth
+  const overflowY = yHandleEl.scrollHeight > yHandleEl.clientHeight
+  reactData.scrollbarWidth = overflowY ? Math.max(scrollbarOpts.width || 0, yHandleEl.offsetWidth - yHandleEl.clientWidth) : 0
   reactData.overflowY = overflowY
   internalData.tableWidth = tableWidth
   internalData.tableHeight = tableHeight
-  let headerHeight = 0
-  if (headerElem) {
-    headerHeight = headerElem.clientHeight
-    $xeTable.$nextTick(() => {
-      // 检测是否同步滚动
-      if (headerElem && bodyElem && headerElem.scrollLeft !== bodyElem.scrollLeft) {
-        headerElem.scrollLeft = bodyElem.scrollLeft
-      }
-    })
-  }
+
+  const headerTableElem = getRefElem(elemStore['main-header-table'])
+  const footerTableElem = getRefElem(elemStore['main-footer-table'])
+  const headerHeight = headerTableElem ? headerTableElem.clientHeight : 0
+  const overflowX = tableWidth > bodyWidth
+  const footerHeight = footerTableElem ? footerTableElem.clientHeight : 0
+  reactData.scrollbarHeight = overflowX ? Math.max(scrollbarOpts.height || 0, xHandleEl.offsetHeight - xHandleEl.clientHeight) : 0
   internalData.headerHeight = headerHeight
-  let overflowX = false
-  let footerHeight = 0
-  let scrollbarHeight = 0
-  if (footerElem) {
-    footerHeight = footerElem.offsetHeight
-    overflowX = tableWidth > footerElem.clientWidth
-    scrollbarHeight = Math.max(footerHeight - footerElem.clientHeight, 0)
-  } else {
-    overflowX = tableWidth > bodyWidth
-    scrollbarHeight = Math.max(tableHeight - bodyElem.clientHeight, 0)
-  }
   internalData.footerHeight = footerHeight
   reactData.overflowX = overflowX
-  reactData.scrollbarHeight = scrollbarHeight
   updateHeight($xeTable)
   reactData.parentHeight = Math.max(internalData.headerHeight + footerHeight + 20, $xeTable.getParentHeight())
   if (overflowX) {
@@ -838,9 +1225,9 @@ function showDropTip ($xeTable: any, evnt: DragEvent | MouseEvent, trEl: HTMLEle
     const cdLineEl = $xeTable.$refs.refDragColLineElem as HTMLElement
     if (cdLineEl) {
       if (showLine) {
-        const leftContainerElem = $xeTable.$refs.leftContainer as HTMLDivElement
+        const leftContainerElem = $xeTable.$refs.refLeftContainer as HTMLDivElement
         const leftContainerWidth = leftContainerElem ? leftContainerElem.clientWidth : 0
-        const rightContainerElem = $xeTable.$refs.rightContainer as HTMLDivElement
+        const rightContainerElem = $xeTable.$refs.refRightContainer as HTMLDivElement
         const rightContainerWidth = rightContainerElem ? rightContainerElem.clientWidth : 0
         const thRect = thEl.getBoundingClientRect()
         let thWidth = thEl.clientWidth
@@ -918,11 +1305,14 @@ function computeScrollLoad ($xeTable: VxeTableConstructor & VxeTablePrivateMetho
     const sXOpts = $xeTable.computeSXOpts
     // 计算 X 逻辑
     if (scrollXLoad) {
-      const { visibleSize: visibleXSize } = handleVirtualXVisible($xeTable)
-      const offsetXSize = Math.max(0, sXOpts.oSize ? XEUtils.toNumber(sXOpts.oSize) : (browse.edge ? 5 : 0))
+      const { toVisibleIndex: toXVisibleIndex, visibleSize: visibleXSize } = handleVirtualXVisible($xeTable)
+      const offsetXSize = Math.max(0, sXOpts.oSize ? XEUtils.toNumber(sXOpts.oSize) : 0)
+      scrollXStore.preloadSize = 4
       scrollXStore.offsetSize = offsetXSize
       scrollXStore.visibleSize = visibleXSize
       scrollXStore.endIndex = Math.max(scrollXStore.startIndex + scrollXStore.visibleSize + offsetXSize, scrollXStore.endIndex)
+      scrollXStore.visibleStartIndex = Math.max(scrollXStore.startIndex, toXVisibleIndex)
+      scrollXStore.visibleEndIndex = Math.min(scrollXStore.endIndex, toXVisibleIndex + visibleXSize)
       $xeTable.updateScrollXData().then(() => {
         loadScrollXData($xeTable)
       })
@@ -932,14 +1322,17 @@ function computeScrollLoad ($xeTable: VxeTableConstructor & VxeTablePrivateMetho
     calcCellHeight($xeTable)
     // 计算 Y 逻辑
     const rowHeight = computeRowHeight($xeTable)
-    scrollYStore.rowHeight = rowHeight
+    ;(scrollYStore as any).rowHeight = rowHeight
     reactData.rowHeight = rowHeight
-    const { visibleSize: visibleYSize } = handleVirtualYVisible($xeTable)
+    const { toVisibleIndex: toYVisibleIndex, visibleSize: visibleYSize } = handleVirtualYVisible($xeTable)
     if (scrollYLoad) {
-      const offsetYSize = Math.max(0, sYOpts.oSize ? XEUtils.toNumber(sYOpts.oSize) : (browse.edge ? 10 : 0))
+      const offsetYSize = Math.max(0, sYOpts.oSize ? XEUtils.toNumber(sYOpts.oSize) : 0)
+      scrollYStore.preloadSize = 2
       scrollYStore.offsetSize = offsetYSize
       scrollYStore.visibleSize = visibleYSize
       scrollYStore.endIndex = Math.max(scrollYStore.startIndex + visibleYSize + offsetYSize, scrollYStore.endIndex)
+      scrollYStore.visibleStartIndex = Math.max(scrollYStore.startIndex, toYVisibleIndex)
+      scrollYStore.visibleEndIndex = Math.min(scrollYStore.endIndex, toYVisibleIndex + visibleYSize)
       $xeTable.updateScrollYData().then(() => {
         loadScrollYData($xeTable)
       })
@@ -947,7 +1340,7 @@ function computeScrollLoad ($xeTable: VxeTableConstructor & VxeTablePrivateMetho
       $xeTable.updateScrollYSpace()
     }
     $xeTable.$nextTick(() => {
-      ($xeTable as any).updateStyle()
+      updateStyle($xeTable)
     })
   })
 }
@@ -973,18 +1366,47 @@ function handleRecalculateLayout ($xeTable: VxeTableConstructor & VxeTablePrivat
   })
 }
 
+function handleTableColumn ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
+  const reactData = $xeTable as unknown as TableReactData
+  const internalData = $xeTable as unknown as TableInternalData
+
+  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: VxeTableConstructor & VxeTablePrivateMethods) {
+  const internalData = $xeTable as unknown as TableInternalData
+
+  const columnList = XEUtils.orderBy(internalData.collectColumn, 'renderSortNumber')
+  internalData.collectColumn = columnList
+  const tableFullColumn = getColumnList(columnList)
+  internalData.tableFullColumn = tableFullColumn
+  cacheColumnMap($xeTable)
+}
+
 function loadScrollXData ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
   const reactData = $xeTable as unknown as TableReactData
   const internalData = $xeTable as unknown as TableInternalData
 
   const { mergeList, mergeFooterList } = reactData
   const { scrollXStore } = internalData
-  const { startIndex, endIndex, offsetSize } = scrollXStore
+  const { preloadSize, startIndex, endIndex, offsetSize } = scrollXStore
   const { toVisibleIndex, visibleSize } = handleVirtualXVisible($xeTable)
   const offsetItem = {
-    startIndex: Math.max(0, toVisibleIndex - 1 - offsetSize),
-    endIndex: toVisibleIndex + visibleSize + offsetSize
+    startIndex: Math.max(0, toVisibleIndex - 1 - offsetSize - preloadSize),
+    endIndex: toVisibleIndex + visibleSize + offsetSize + preloadSize
   }
+  scrollXStore.visibleStartIndex = toVisibleIndex
+  scrollXStore.visibleEndIndex = toVisibleIndex + visibleSize
   calculateMergerOffsetIndex(mergeList.concat(mergeFooterList), offsetItem, 'col')
   const { startIndex: offsetStartIndex, endIndex: offsetEndIndex } = offsetItem
   if (toVisibleIndex <= startIndex || toVisibleIndex >= endIndex - visibleSize - 1) {
@@ -993,8 +1415,201 @@ function loadScrollXData ($xeTable: VxeTableConstructor & VxeTablePrivateMethods
       scrollXStore.endIndex = offsetEndIndex
       $xeTable.updateScrollXData()
     }
-  }
-  $xeTable.closeTooltip()
+  }
+  $xeTable.closeTooltip()
+}
+
+// 获取所有的列，排除分组
+function getColumnList (columns: any[]) {
+  const result: any[] = []
+  columns.forEach((column) => {
+    result.push(...(column.children && column.children.length ? getColumnList(column.children) : [column]))
+  })
+  return result
+}
+
+function parseColumns ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, isReset: boolean) {
+  const props = $xeTable
+  const reactData = $xeTable as unknown as TableReactData
+  const internalData = $xeTable as unknown as TableInternalData
+
+  const { showOverflow } = props
+  const rowOpts = $xeTable.computeRowOpts
+  const leftList: VxeTableDefines.ColumnInfo[] = []
+  const centerList: VxeTableDefines.ColumnInfo[] = []
+  const rightList: VxeTableDefines.ColumnInfo[] = []
+  const { isGroup, columnStore } = reactData
+  const sXOpts = $xeTable.computeSXOpts
+  const { collectColumn, tableFullColumn, scrollXStore, fullColumnIdData } = internalData
+  // 如果是分组表头，如果子列全部被隐藏，则根列也隐藏
+  if (isGroup) {
+    const leftGroupList: VxeTableDefines.ColumnInfo[] = []
+    const centerGroupList: VxeTableDefines.ColumnInfo[] = []
+    const rightGroupList: VxeTableDefines.ColumnInfo[] = []
+    XEUtils.eachTree(collectColumn, (column, index, items, path, parentColumn) => {
+      const isColGroup = hasChildrenList(column)
+      // 如果是分组，必须按组设置固定列，不允许给子列设置固定
+      if (parentColumn && parentColumn.fixed) {
+        column.fixed = parentColumn.fixed
+      }
+      if (parentColumn && column.fixed !== parentColumn.fixed) {
+        errLog('vxe.error.groupFixed')
+      }
+      if (isColGroup) {
+        column.visible = !!XEUtils.findTree(column.children, (subColumn) => hasChildrenList(subColumn) ? false : subColumn.visible)
+      } else if (column.visible) {
+        if (column.fixed === 'left') {
+          leftList.push(column)
+        } else if (column.fixed === 'right') {
+          rightList.push(column)
+        } else {
+          centerList.push(column)
+        }
+      }
+    })
+    collectColumn.forEach((column) => {
+      if (column.visible) {
+        if (column.fixed === 'left') {
+          leftGroupList.push(column)
+        } else if (column.fixed === 'right') {
+          rightGroupList.push(column)
+        } else {
+          centerGroupList.push(column)
+        }
+      }
+    })
+    reactData.tableGroupColumn = leftGroupList.concat(centerGroupList).concat(rightGroupList)
+  } else {
+    // 重新分配列
+    tableFullColumn.forEach((column) => {
+      if (column.visible) {
+        if (column.fixed === 'left') {
+          leftList.push(column)
+        } else if (column.fixed === 'right') {
+          rightList.push(column)
+        } else {
+          centerList.push(column)
+        }
+      }
+    })
+  }
+  const visibleColumn = leftList.concat(centerList).concat(rightList)
+  // 如果gt为0，则总是启用
+  const scrollXLoad = !!sXOpts.enabled && sXOpts.gt > -1 && (sXOpts.gt === 0 || sXOpts.gt < tableFullColumn.length)
+  reactData.hasFixedColumn = leftList.length > 0 || rightList.length > 0
+  Object.assign(columnStore, { leftList, centerList, rightList })
+  if (scrollXLoad) {
+    if (showOverflow) {
+      if (!rowOpts.height) {
+        const errColumn = internalData.tableFullColumn.find(column => column.showOverflow === false)
+        if (errColumn) {
+          errLog('vxe.error.errProp', [`column[field="${errColumn.field}"].show-overflow=false`, 'show-overflow=true'])
+        }
+      }
+    }
+    if (process.env.VUE_APP_VXE_ENV === 'development') {
+      // if (props.showHeader && !props.showHeaderOverflow) {
+      //   warnLog('vxe.error.reqProp', ['show-header-overflow'])
+      // }
+      // if (props.showFooter && !props.showFooterOverflow) {
+      //   warnLog('vxe.error.reqProp', ['show-footer-overflow'])
+      // }
+      if (props.spanMethod) {
+        warnLog('vxe.error.scrollErrProp', ['span-method'])
+      }
+      if (props.footerSpanMethod) {
+        warnLog('vxe.error.scrollErrProp', ['footer-span-method'])
+      }
+    }
+    if (isReset) {
+      const { visibleSize } = handleVirtualXVisible($xeTable)
+      scrollXStore.startIndex = 0
+      scrollXStore.endIndex = visibleSize
+      scrollXStore.visibleSize = visibleSize
+      scrollXStore.visibleStartIndex = 0
+      scrollXStore.visibleEndIndex = visibleSize
+    }
+  }
+  // 如果列被显示/隐藏，则清除合并状态
+  // 如果列被设置为固定，则清除合并状态
+  if (visibleColumn.length !== internalData.visibleColumn.length || !internalData.visibleColumn.every((column, index) => column === visibleColumn[index])) {
+    $xeTable.clearMergeCells()
+    $xeTable.clearMergeFooterItems()
+  }
+  reactData.scrollXLoad = scrollXLoad
+  visibleColumn.forEach((column, index) => {
+    const colid = column.id
+    const colRest = fullColumnIdData[colid]
+    if (colRest) {
+      colRest._index = index
+    }
+  })
+  internalData.visibleColumn = visibleColumn
+  handleTableColumn($xeTable)
+  if (isReset) {
+    return $xeTable.updateFooter().then(() => {
+      return $xeTable.recalculate()
+    }).then(() => {
+      $xeTable.updateCellAreas()
+      return $xeTable.recalculate()
+    })
+  }
+  return $xeTable.updateFooter()
+}
+
+function initColumnSort ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
+  const internalData = $xeTable as unknown as TableInternalData
+
+  const { collectColumn } = internalData
+  collectColumn.forEach((column, index) => {
+    const sortIndex = index + 1
+    column.sortNumber = sortIndex
+    column.renderSortNumber = sortIndex
+  })
+}
+
+function handleColumn ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, collectColumn: VxeTableDefines.ColumnInfo[]) {
+  const $xeToolbar = $xeTable.$refs.$xeToolbar as VxeToolbarConstructor
+  const reactData = $xeTable as unknown as TableReactData
+  const internalData = $xeTable as unknown as TableInternalData
+
+  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.VUE_APP_VXE_ENV === 'development') {
+      if ((reactData.scrollXLoad || reactData.scrollYLoad) && reactData.expandColumn) {
+        warnLog('vxe.error.scrollErrProp', ['column.type=expand'])
+      }
+    }
+    return $xeTable.$nextTick().then(() => {
+      if ($xeToolbar) {
+        $xeToolbar.syncUpdate({
+          collectColumn: internalData.collectColumn,
+          $table: $xeTable
+        })
+      }
+      if ($xeTable.handleUpdateCustomColumn) {
+        $xeTable.handleUpdateCustomColumn()
+      }
+      return $xeTable.recalculate()
+    })
+  })
 }
 
 /**
@@ -1007,14 +1622,16 @@ function loadScrollYData ($xeTable: VxeTableConstructor & VxeTablePrivateMethods
 
   const { showOverflow } = props
   const { mergeList } = reactData
-  const { tableHeight, scrollYStore } = internalData
-  const { startIndex, endIndex, offsetSize } = scrollYStore
-  const autoOffsetYSize = showOverflow ? offsetSize : offsetSize + Math.min(8, Math.ceil(tableHeight / 200))
+  const { scrollYStore } = internalData
+  const { preloadSize, startIndex, endIndex, offsetSize } = scrollYStore
+  const autoOffsetYSize = showOverflow ? offsetSize : offsetSize + 1
   const { toVisibleIndex, visibleSize } = handleVirtualYVisible($xeTable)
   const offsetItem = {
-    startIndex: Math.max(0, toVisibleIndex - 1 - offsetSize),
-    endIndex: toVisibleIndex + visibleSize + autoOffsetYSize
+    startIndex: Math.max(0, toVisibleIndex - 1 - offsetSize - preloadSize),
+    endIndex: toVisibleIndex + visibleSize + autoOffsetYSize + preloadSize
   }
+  scrollYStore.visibleStartIndex = toVisibleIndex
+  scrollYStore.visibleEndIndex = toVisibleIndex + visibleSize
   calculateMergerOffsetIndex(mergeList, offsetItem, 'row')
   const { startIndex: offsetStartIndex, endIndex: offsetEndIndex } = offsetItem
   if (toVisibleIndex <= startIndex || toVisibleIndex >= endIndex - visibleSize - 1) {
@@ -1039,16 +1656,20 @@ function checkLastSyncScroll ($xeTable: VxeTableConstructor & VxeTablePrivateMet
     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)
       })
     }
@@ -1323,7 +1944,7 @@ const Methods = {
     this.updateFooter()
     return this.$nextTick().then(() => {
       updateHeight($xeTable)
-      this.updateStyle()
+      updateStyle($xeTable)
     }).then(() => {
       computeScrollLoad($xeTable)
     }).then(() => {
@@ -1333,7 +1954,7 @@ const Methods = {
       }
       this.handleReserveStatus()
       this.checkSelectionStatus()
-      return new Promise(resolve => {
+      return new Promise<void>(resolve => {
         this.$nextTick()
           .then(() => this.recalculate())
           .then(() => {
@@ -1348,9 +1969,17 @@ const Methods = {
             }
             // 是否变更虚拟滚动
             if (oldScrollYLoad === sYLoad) {
-              restoreScrollLocation(this, targetScrollLeft, targetScrollTop).then(resolve)
+              restoreScrollLocation(this, targetScrollLeft, targetScrollTop)
+                .then(() => {
+                  resolve()
+                })
             } else {
-              setTimeout(() => restoreScrollLocation(this, targetScrollLeft, targetScrollTop).then(resolve))
+              setTimeout(() => {
+                restoreScrollLocation(this, targetScrollLeft, targetScrollTop)
+                  .then(() => {
+                    resolve()
+                  })
+              })
             }
           })
       })
@@ -1436,8 +2065,10 @@ const Methods = {
    * @param {ColumnInfo} columns 列配置
    */
   loadColumn (columns: any) {
+    const $xeTable = this
+
     const collectColumn = XEUtils.mapTree(columns, column => Cell.createColumn(this, column), { children: 'children' })
-    return this.handleColumn(collectColumn)
+    return handleColumn($xeTable, collectColumn)
   },
   /**
    * 加载列配置并恢复到初始状态
@@ -1449,54 +2080,10 @@ const Methods = {
       return this.loadColumn(columns)
     })
   },
-  initColumnSort  () {
-    const { collectColumn } = this
-    collectColumn.forEach((column: any, index: any) => {
-      const sortIndex = index + 1
-      column.sortNumber = sortIndex
-      column.renderSortNumber = sortIndex
-    })
-  },
-  handleColumn (collectColumn: any) {
+  handleColumn (collectColumn: any[]) {
     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.VUE_APP_VXE_ENV === 'development') {
-        if ((this.scrollXLoad || this.scrollYLoad) && this.expandColumn) {
-          warnLog('vxe.error.scrollErrProp', ['column.type=expand'])
-        }
-      }
-      return this.$nextTick().then(() => {
-        if (this.$toolbar) {
-          this.$toolbar.syncUpdate({
-            collectColumn: this.collectColumn,
-            $table: this
-          })
-        }
-        if ($xeTable.handleUpdateCustomColumn) {
-          $xeTable.handleUpdateCustomColumn()
-        }
-        return this.recalculate()
-      })
-    })
+    return handleColumn($xeTable, collectColumn)
   },
   /**
    * 更新数据行的 Map
@@ -1955,7 +2542,7 @@ const Methods = {
     const rowid = getRowid(this, row)
     let bodyElem = null
     if (column) {
-      bodyElem = $refs[`${column.fixed || 'table'}Body`] || $refs.tableBody
+      bodyElem = $refs[`${column.fixed || 'table'}Body`] || $refs.refTableBody
     }
     if (bodyElem && bodyElem.$el) {
       return bodyElem.$el.querySelector(`.vxe-body--row[rowid="${rowid}"] .${column.id}`)
@@ -2276,30 +2863,6 @@ const Methods = {
     this.afterTreeFullData = tableTree
     this.updateAfterDataIndex()
   },
-  updateTreeDataIndex () {
-    const $xeTable = this
-    const props = $xeTable
-    const internalData = $xeTable
-
-    const { treeConfig } = props
-    const { afterFullData, fullDataRowIdData, fullAllDataRowIdData } = internalData
-    const treeOpts = $xeTable.computeTreeOpts
-    if (treeConfig) {
-      if (treeOpts.transform) {
-        afterFullData.forEach((row: any, index: number) => {
-          const rowid = getRowid($xeTable, row)
-          const rowRest = fullAllDataRowIdData[rowid]
-          if (rowRest) {
-            rowRest._index = index
-          } else {
-            const rest = { row, rowid, seq: '-1', index: -1, $index: -1, _index: index, items: [], parent: null, level: 0, height: 0, oTop: 0 }
-            fullAllDataRowIdData[rowid] = rest
-            fullDataRowIdData[rowid] = rest
-          }
-        })
-      }
-    }
-  },
   /**
    * 预编译
    * 对渲染中的数据提前解析序号及索引。牺牲提前编译耗时换取渲染中额外损耗，使运行时更加流畅
@@ -2329,7 +2892,6 @@ const Methods = {
         }
         fullMaps[rowid] = row
       }, { children: treeOpts.transform ? treeOpts.mapChildrenField : childrenField })
-      $xeTable.updateTreeDataIndex()
     } else {
       afterFullData.forEach((row: any, index: number) => {
         const rowid = getRowid($xeTable, row)
@@ -2617,8 +3179,8 @@ const Methods = {
         const colWidth = XEUtils.toInteger(width)
         let rdWidth = colWidth
         if (isScale(width)) {
-          const tableBody = $xeTable.$refs.tableBody
-          const bodyElem = tableBody ? tableBody.$el as HTMLDivElement : null
+          const refTableBody = $xeTable.$refs.refTableBody
+          const bodyElem = refTableBody ? refTableBody.$el as HTMLDivElement : null
           const bodyWidth = bodyElem ? bodyElem.clientWidth - 1 : 0
           rdWidth = Math.floor(colWidth * bodyWidth)
         }
@@ -2864,143 +3426,17 @@ const Methods = {
    * 刷新列配置
    */
   refreshColumn (initSort?: boolean) {
+    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: boolean) {
-    const $xeTable = this
-    const props = $xeTable
-    const internalData = $xeTable
-
-    const { showOverflow } = props
-    const rowOpts = $xeTable.computeRowOpts
-    const leftList: any[] = []
-    const centerList: any[] = []
-    const rightList: any[] = []
-    const { collectColumn, tableFullColumn, isGroup, columnStore, sXOpts, scrollXStore, fullColumnIdData } = this
-    // 如果是分组表头，如果子列全部被隐藏，则根列也隐藏
-    if (isGroup) {
-      const leftGroupList: any[] = []
-      const centerGroupList: any[] = []
-      const rightGroupList: any[] = []
-      XEUtils.eachTree(collectColumn, (column, index, items, path, parentColumn) => {
-        const isColGroup = hasChildrenList(column)
-        // 如果是分组，必须按组设置固定列，不允许给子列设置固定
-        if (parentColumn && parentColumn.fixed) {
-          column.fixed = parentColumn.fixed
-        }
-        if (parentColumn && column.fixed !== parentColumn.fixed) {
-          errLog('vxe.error.groupFixed')
-        }
-        if (isColGroup) {
-          column.visible = !!XEUtils.findTree(column.children, (subColumn: any) => 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: any) => {
-        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: any) => {
-        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: any) => column.showOverflow === false)
-          if (errColumn) {
-            errLog('vxe.error.errProp', [`column[field="${errColumn.field}"].show-overflow=false`, 'show-overflow=true'])
-          }
-        }
-      }
-      if (process.env.VUE_APP_VXE_ENV === 'development') {
-        // if (this.showHeader && !this.showHeaderOverflow) {
-        //   warnLog('vxe.error.reqProp', ['show-header-overflow'])
-        // }
-        // if (this.showFooter && !this.showFooterOverflow) {
-        //   warnLog('vxe.error.reqProp', ['show-footer-overflow'])
-        // }
-        if (this.spanMethod) {
-          warnLog('vxe.error.scrollErrProp', ['span-method'])
-        }
-        if (this.footerSpanMethod) {
-          warnLog('vxe.error.scrollErrProp', ['footer-span-method'])
-        }
-      }
-      if (isReset) {
-        const { visibleSize } = handleVirtualXVisible(this)
-        scrollXStore.startIndex = 0
-        scrollXStore.endIndex = visibleSize
-        scrollXStore.visibleSize = visibleSize
-      }
-    }
-    // 如果列被显示/隐藏，则清除合并状态
-    // 如果列被设置为固定，则清除合并状态
-    if (visibleColumn.length !== this.visibleColumn.length || !this.visibleColumn.every((column: any, index: any) => 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()
-  },
   /**
    * 指定列宽的列进行拆分
    */
@@ -3081,408 +3517,112 @@ const Methods = {
    * 刷新滚动操作，手动同步滚动相关位置（对于某些特殊的操作，比如滚动条错位、固定列不同步）
    */
   refreshScroll () {
-    const { lastScrollLeft, lastScrollTop } = this
-    const { $refs } = this
-    const { tableBody, leftBody, rightBody, tableFooter } = $refs
-    const tableBodyElem = tableBody ? tableBody.$el : null
-    const leftBodyElem = leftBody ? leftBody.$el : null
-    const rightBodyElem = rightBody ? rightBody.$el : null
-    const tableFooterElem = tableFooter ? tableFooter.$el : null
-    return new Promise(resolve => {
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+    const internalData = $xeTable as unknown as TableInternalData
+
+    const { elemStore, lastScrollLeft, lastScrollTop } = internalData
+    const headerScrollElem = getRefElem(elemStore['main-header-scroll'])
+    const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
+    const footerScrollElem = getRefElem(elemStore['main-footer-scroll'])
+    const leftScrollElem = getRefElem(elemStore['left-body-scroll'])
+    const rightScrollElem = getRefElem(elemStore['right-body-scroll'])
+    const xHandleEl = $xeTable.$refs.refScrollXHandleElem as HTMLDivElement
+    const yHandleEl = $xeTable.$refs.refScrollYHandleElem as HTMLDivElement
+    return new Promise<void>(resolve => {
       // 还原滚动条位置
       if (lastScrollLeft || lastScrollTop) {
-        return restoreScrollLocation(this, lastScrollLeft, lastScrollTop).then(() => {
+        return restoreScrollLocation($xeTable, lastScrollLeft, lastScrollTop).then().then(() => {
           // 存在滚动行为未结束情况
-          setTimeout(resolve, 30)
-        })
-      }
-      // 重置
-      setScrollTop(tableBodyElem, lastScrollTop)
-      setScrollTop(leftBodyElem, lastScrollTop)
-      setScrollTop(rightBodyElem, lastScrollTop)
-      setScrollLeft(tableFooterElem, lastScrollLeft)
-      // 存在滚动行为未结束情况
-      setTimeout(resolve, 30)
-    })
-  },
-  /**
-   * 重新渲染布局
-   * 刷新布局
-   */
-  recalculate (reFull?: boolean) {
-    const $xeTable = this
-    const internalData = $xeTable
-
-    return new Promise<void>(resolve => {
-      const { rceTimeout, rceRunTime } = internalData
-      const resizeOpts = $xeTable.computeResizeOpts
-      const refreshDelay = resizeOpts.refreshDelay || 20
-      const el = $xeTable.$refs.refElem as HTMLElement
-      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: any, column: any) => previous + column.renderWidth, 0)
-
-          if (tableElem) {
-            tableElem.style.width = tWidth ? `${tWidth + scrollbarWidth}px` : ''
-            // 修复 IE 中高度无法自适应问题
-            if (browse.msie) {
-              XEUtils.arrayEach(tableElem.querySelectorAll('.vxe-resizable'), (resizeElem: any) => {
-                resizeElem.style.height = `${resizeElem.parentNode.offsetHeight}px`
-              })
-            }
-          }
-
-          const repairElem = elemStore[`${name}-${layout}-repair`]
-          if (repairElem) {
-            repairElem.style.width = `${tableWidth}px`
-          }
-
-          const listElem = elemStore[`${name}-${layout}-list`]
-          if (isGroup && listElem) {
-            XEUtils.arrayEach(listElem.querySelectorAll('.col--group'), (thElem: HTMLTableRowElement) => {
-              const colNode = this.getColumnNode(thElem)
-              if (colNode) {
-                const column = colNode.item
-                const { showHeaderOverflow } = column
-                const cellOverflow = XEUtils.isBoolean(showHeaderOverflow) ? showHeaderOverflow : allColumnHeaderOverflow
-                const showEllipsis = cellOverflow === 'ellipsis'
-                const showTitle = cellOverflow === 'title'
-                const showTooltip = cellOverflow === true || cellOverflow === 'tooltip'
-                const hasEllipsis = showTitle || showTooltip || showEllipsis
-                let childWidth = 0
-                let countChild = 0
-                if (hasEllipsis) {
-                  XEUtils.eachTree(column.children, item => {
-                    if (!item.children || !column.children.length) {
-                      countChild++
-                    }
-                    childWidth += item.renderWidth
-                  })
-                }
-                thElem.style.width = hasEllipsis ? `${childWidth - countChild - (border ? 2 : 0)}px` : ''
-              }
-            })
-          }
-        } else if (layout === 'body') {
-          const emptyBlockElem = elemStore[`${name}-${layout}-emptyBlock`]
-          if (isNodeElement(wrapperElem)) {
-            let bodyMaxHeight = 0
-            const bodyMinHeight = customMinHeight - headerHeight - footerHeight
-            if (customMaxHeight) {
-              bodyMaxHeight = customMaxHeight - headerHeight - footerHeight
-              // 如果是固定列
-              if (fixedType) {
-                bodyMaxHeight -= (showFooter ? 0 : scrollbarHeight)
-              }
-              bodyMaxHeight = Math.max(bodyMinHeight, bodyMaxHeight)
-              wrapperElem.style.maxHeight = `${bodyMaxHeight}px`
-            }
-            if (customHeight) {
-              let bodyHeight = customHeight - headerHeight - footerHeight
-              // 如果是固定列
-              if (fixedType) {
-                bodyHeight -= (showFooter ? 0 : scrollbarHeight)
-              }
-              if (bodyMaxHeight) {
-                bodyHeight = Math.min(bodyMaxHeight, bodyHeight)
-              }
-              wrapperElem.style.height = `${Math.max(bodyMinHeight, bodyHeight)}px`
-            } else {
-              wrapperElem.style.height = ''
-            }
-            wrapperElem.style.minHeight = `${bodyMinHeight}px`
-          }
-
-          // 如果是固定列
-          if (fixedWrapperElem) {
-            const isRightFixed = fixedType === 'right'
-            const fixedColumn = columnStore[`${fixedType}List`]
-            if (isNodeElement(wrapperElem)) {
-              wrapperElem.style.top = `${headerHeight}px`
-            }
-            fixedWrapperElem.style.height = `${(customHeight > 0 ? customHeight - headerHeight - footerHeight : tableHeight) + headerHeight + footerHeight - scrollbarHeight * (showFooter ? 2 : 1)}px`
-            fixedWrapperElem.style.width = `${fixedColumn.reduce((previous: any, column: any) => 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: any, column: any) => previous + column.renderWidth, 0)
-
-          if (tableElem) {
-            tableElem.style.width = tWidth ? `${tWidth}px` : ''
-            // 兼容性处理
-            tableElem.style.paddingRight = scrollbarWidth && fixedType && (browse['-moz'] || browse.safari) ? `${scrollbarWidth}px` : ''
-          }
-          if (emptyBlockElem) {
-            emptyBlockElem.style.width = tWidth ? `${tWidth}px` : ''
-          }
-        } else if (layout === 'footer') {
-          let tWidth = tableWidth
-          let renderColumnList = tableColumn
-
-          if (fixedType) {
-            // 如果是使用优化模式
-            if (scrollXLoad || scrollYLoad || allColumnFooterOverflow) {
-              // 如果不支持优化模式
-              if (spanMethod || footerSpanMethod) {
-                renderColumnList = visibleColumn
-              } else {
-                renderColumnList = fixedColumn || []
-              }
-            } else {
-              renderColumnList = visibleColumn
-            }
-          }
-
-          tWidth = renderColumnList.reduce((previous: any, column: any) => previous + column.renderWidth, 0)
-
-          if (isNodeElement(wrapperElem)) {
-            // 如果是固定列
-            if (fixedWrapperElem) {
-              wrapperElem.style.top = `${customHeight > 0 ? customHeight - footerHeight : tableHeight + headerHeight}px`
-            }
-            wrapperElem.style.marginTop = `${-scrollbarHeight}px`
-          }
-          if (tableElem) {
-            tableElem.style.width = tWidth ? `${tWidth + scrollbarWidth}px` : ''
-          }
-        }
-        const colgroupElem = elemStore[`${name}-${layout}-colgroup`]
-        if (colgroupElem) {
-          XEUtils.arrayEach(colgroupElem.children, (colElem: any) => {
-            const colid = colElem.getAttribute('name')
-            if (colid === 'col_gutter') {
-              colElem.style.width = `${scrollbarWidth}px`
-            }
-            if (fullColumnIdData[colid]) {
-              const colRest = fullColumnIdData[colid]
-              const column = colRest.column
-              const { showHeaderOverflow, showFooterOverflow, showOverflow } = column
-              let cellOverflow
-              colElem.style.width = `${column.renderWidth}px`
-              if (layout === 'header') {
-                cellOverflow = XEUtils.isUndefined(showHeaderOverflow) || XEUtils.isNull(showHeaderOverflow) ? allColumnHeaderOverflow : showHeaderOverflow
-              } else if (layout === 'footer') {
-                cellOverflow = XEUtils.isUndefined(showFooterOverflow) || XEUtils.isNull(showFooterOverflow) ? allColumnFooterOverflow : showFooterOverflow
-              } else {
-                cellOverflow = XEUtils.isUndefined(showOverflow) || XEUtils.isNull(showOverflow) ? allColumnOverflow : showOverflow
-              }
-              const showEllipsis = cellOverflow === 'ellipsis'
-              const showTitle = cellOverflow === 'title'
-              const showTooltip = cellOverflow === true || cellOverflow === 'tooltip'
-              let hasEllipsis = showTitle || showTooltip || showEllipsis
-              const listElem = elemStore[`${name}-${layout}-list`]
-              // 滚动的渲染不支持动态行高
-              if (layout === 'header' || layout === 'footer') {
-                if (scrollXLoad && !hasEllipsis) {
-                  hasEllipsis = true
-                }
-              } else {
-                if ((scrollXLoad || scrollYLoad) && !hasEllipsis) {
-                  hasEllipsis = true
-                }
-              }
-              if (listElem) {
-                XEUtils.arrayEach(listElem.querySelectorAll(`.${column.id}`), (elem: any) => {
-                  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` : ''
-                  }
-                })
-              }
-            }
+          setTimeout(resolve, 10)
+        })
+      }
+      internalData.intoRunScroll = true
+      // 重置
+      setScrollTop(yHandleEl, lastScrollTop)
+      setScrollTop(bodyScrollElem, lastScrollTop)
+      setScrollTop(leftScrollElem, lastScrollTop)
+      setScrollTop(rightScrollElem, lastScrollTop)
+
+      setScrollLeft(xHandleEl, lastScrollLeft)
+      setScrollLeft(bodyScrollElem, lastScrollLeft)
+      setScrollLeft(headerScrollElem, lastScrollLeft)
+      setScrollLeft(footerScrollElem, lastScrollLeft)
+      // 存在滚动行为未结束情况
+      setTimeout(() => {
+        internalData.intoRunScroll = false
+        resolve()
+      }, 10)
+    })
+  },
+  /**
+   * 重新渲染布局
+   * 刷新布局
+   */
+  recalculate (reFull?: boolean) {
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+    const internalData = $xeTable as unknown as TableInternalData
+
+    return new Promise<void>(resolve => {
+      const { rceTimeout, rceRunTime } = internalData
+      const resizeOpts = $xeTable.computeResizeOpts
+      const refreshDelay = resizeOpts.refreshDelay || 20
+      const el = $xeTable.$refs.refElem as HTMLElement
+      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 $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+    const internalData = $xeTable as unknown as TableInternalData
 
-    const { tableBody, leftContainer, rightContainer } = $xeTable.$refs
-    const bodyElem = tableBody ? tableBody.$el : null
+    const { elemStore } = internalData
+    const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
+    const leftContainerElem = $xeTable.$refs.refLeftContainer as HTMLDivElement
+    const rightContainerElem = $xeTable.$refs.refRightContainer as HTMLDivElement
     const xHandleEl = $xeTable.$refs.refScrollXHandleElem as HTMLDivElement
-    const bodtTargetEl = xHandleEl || bodyElem
+    const bodtTargetEl = xHandleEl || bodyScrollElem
     if (bodtTargetEl) {
-      if (leftContainer) {
+      if (leftContainerElem) {
         if (bodtTargetEl.scrollLeft > 0) {
-          addClass(leftContainer, 'scrolling--middle')
+          addClass(leftContainerElem, 'scrolling--middle')
         } else {
-          removeClass(leftContainer, 'scrolling--middle')
+          removeClass(leftContainerElem, 'scrolling--middle')
         }
       }
-      if (rightContainer) {
+      if (rightContainerElem) {
         if (bodtTargetEl.clientWidth < bodtTargetEl.scrollWidth - Math.ceil(bodtTargetEl.scrollLeft)) {
-          addClass(rightContainer, 'scrolling--middle')
+          addClass(rightContainerElem, 'scrolling--middle')
         } else {
-          removeClass(rightContainer, 'scrolling--middle')
+          removeClass(rightContainerElem, 'scrolling--middle')
         }
       }
     }
@@ -3518,7 +3658,7 @@ const Methods = {
   handleGlobalMousedownEvent (evnt: any) {
     const { $el, $refs, $xegrid, $toolbar, mouseConfig, editStore, ctxMenuStore, editRules, editOpts, validOpts, areaOpts, filterStore, customStore, getRowNode } = this
     const { actived } = editStore
-    const { ctxWrapper, filterWrapper, customWrapper, validTip } = $refs
+    const { refTableMenu, filterWrapper, customWrapper, refValidTooltip } = $refs
     // 筛选
     if (filterWrapper) {
       if (getEventTargetNode(evnt, $el, 'vxe-cell--filter').flag) {
@@ -3550,7 +3690,7 @@ const Methods = {
         // 如果是激活状态，点击了单元格之外
         const cell = actived.args.cell
         if ((!cell || !getEventTargetNode(evnt, cell).flag)) {
-          if (validTip && getEventTargetNode(evnt, validTip.$el).flag) {
+          if (refValidTooltip && getEventTargetNode(evnt, refValidTooltip.$el).flag) {
             // 如果是激活状态，且点击了校验提示框
           } else if (!this.lastCallTime || this.lastCallTime + 50 < Date.now()) {
             if (!getEventTargetNode(evnt, document.body, 'vxe-table--ignore-clear').flag) {
@@ -3600,7 +3740,7 @@ const Methods = {
         }
       }
     } else if (mouseConfig) {
-      if (!getEventTargetNode(evnt, $el).flag && !($xegrid && getEventTargetNode(evnt, $xegrid.$el).flag) && !(ctxWrapper && getEventTargetNode(evnt, ctxWrapper.$el).flag) && !($toolbar && getEventTargetNode(evnt, $toolbar.$el).flag)) {
+      if (!getEventTargetNode(evnt, $el).flag && !($xegrid && getEventTargetNode(evnt, $xegrid.$el).flag) && !(refTableMenu && getEventTargetNode(evnt, refTableMenu.$el).flag) && !($toolbar && getEventTargetNode(evnt, $toolbar.$el).flag)) {
         if (this.clearSelected) {
           this.clearSelected()
         }
@@ -3619,7 +3759,7 @@ const Methods = {
       }
     }
     // 如果配置了快捷菜单且，点击了其他地方则关闭
-    if (ctxMenuStore.visible && ctxWrapper && !getEventTargetNode(evnt, ctxWrapper.$el).flag) {
+    if (ctxMenuStore.visible && refTableMenu && !getEventTargetNode(evnt, refTableMenu.$el).flag) {
       this.closeMenu()
     }
     const isActivated = getEventTargetNode(evnt, ($xegrid || this).$el).flag
@@ -3750,8 +3890,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))) {
@@ -4096,6 +4236,11 @@ const Methods = {
    * @param {Row} row 行对象
    */
   handleTooltip (evnt: any, cell: any, overflowElem: any, tipElem: any, params: any) {
+    const $xeTable = this
+
+    if (!overflowElem) {
+      return $xeTable.$nextTick()
+    }
     params.cell = cell
     const { $refs, tooltipOpts, tooltipStore } = this
     const { column, row } = params
@@ -4122,7 +4267,7 @@ const Methods = {
   },
   openTooltip (target: any, content: any) {
     const { $refs } = this
-    const commTip = $refs.commTip
+    const commTip = $refs.refCommTooltip
     if (commTip) {
       return commTip.open(target, content)
     }
@@ -4134,7 +4279,7 @@ const Methods = {
   closeTooltip () {
     const { $refs, tooltipStore } = this
     const tooltip = $refs.tooltip
-    const commTip = $refs.commTip
+    const commTip = $refs.refCommTooltip
     if (tooltipStore.visible) {
       Object.assign(tooltipStore, {
         row: null,
@@ -5316,6 +5461,8 @@ const Methods = {
     this.emitEvent('cell-dblclick', params, evnt)
   },
   handleDefaultSort () {
+    const $xeTable = this
+
     const { sortConfig, sortOpts } = this
     let { defaultSort } = sortOpts
     if (defaultSort) {
@@ -5334,7 +5481,7 @@ const Methods = {
           }
         })
         if (!sortOpts.remote) {
-          this.handleTableData(true).then(this.updateStyle)
+          this.handleTableData(true).then(() => updateStyle($xeTable))
         }
       }
     }
@@ -5776,8 +5923,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')
     })
@@ -6019,15 +6166,15 @@ const Methods = {
         return
       }
       const xHandleEl = $xeTable.$refs.refScrollXHandleElem as HTMLDivElement
-      const tableBody = $xeTable.$refs.tableBody
-      const tableBodyElem = tableBody ? tableBody.$el as HTMLDivElement : null
+      const refTableBody = $xeTable.$refs.refTableBody
+      const tableBodyElem = refTableBody ? refTableBody.$el as HTMLDivElement : null
       const scrollTargetEl = xHandleEl || tableBodyElem
       if (scrollTargetEl) {
         const wrapperRect = el.getBoundingClientRect()
         const tableWidth = el.clientWidth
-        const leftContainerElem = $xeTable.$refs.leftContainer as HTMLDivElement
+        const leftContainerElem = $xeTable.$refs.refLeftContainer as HTMLDivElement
         const leftContainerWidth = leftContainerElem ? leftContainerElem.clientWidth : 0
-        const rightContainerElem = $xeTable.$refs.rightContainer as HTMLDivElement
+        const rightContainerElem = $xeTable.$refs.refRightContainer as HTMLDivElement
         const rightContainerWidth = rightContainerElem ? rightContainerElem.clientWidth : 0
         const srartX = wrapperRect.x + leftContainerWidth
         const endX = wrapperRect.x + tableWidth - rightContainerWidth
@@ -6152,6 +6299,8 @@ const Methods = {
     return this.$nextTick()
   },
   sort (sortConfs: any, sortOrder: any) {
+    const $xeTable = this
+
     const { sortOpts } = this
     const { multiple, remote, orders } = sortOpts
     if (sortConfs) {
@@ -6194,7 +6343,7 @@ const Methods = {
       }
       return this.$nextTick().then(() => {
         this.updateCellAreas()
-        return this.updateStyle()
+        return updateStyle($xeTable)
       })
     }
     return this.$nextTick()
@@ -6240,7 +6389,7 @@ const Methods = {
       }
       return $xeTable.$nextTick().then(() => {
         $xeTable.updateCellAreas()
-        return $xeTable.updateStyle()
+        return updateStyle($xeTable)
       })
     }
     return $xeTable.$nextTick()
@@ -6251,6 +6400,8 @@ const Methods = {
    * @param {String} column 列或字段名
    */
   clearSort (fieldOrColumn: any) {
+    const $xeTable = this
+
     const { sortOpts } = this
     if (fieldOrColumn) {
       const column = handleFieldOrColumn(this, fieldOrColumn)
@@ -6263,7 +6414,7 @@ const Methods = {
     if (!sortOpts.remote) {
       this.handleTableData(true)
     }
-    return this.$nextTick().then(this.updateStyle)
+    return this.$nextTick().then(() => updateStyle($xeTable))
   },
   // 在 v3 中废弃
   getSortColumn () {
@@ -6766,7 +6917,7 @@ const Methods = {
               return this.$nextTick().then(() => {
                 if (transform) {
                   this.handleTableData()
-                  this.updateTreeDataIndex()
+                  this.updateAfterDataIndex()
                   return this.$nextTick()
                 }
               })
@@ -6880,7 +7031,7 @@ const Methods = {
     return this.handleBaseTreeExpand(rows, expanded).then(() => {
       handleVirtualTreeToList($xeTable)
       this.handleTableData()
-      this.updateTreeDataIndex()
+      this.updateAfterDataIndex()
     }).then(() => {
       return this.recalculate()
     }).then(() => {
@@ -6967,7 +7118,7 @@ const Methods = {
    */
   getScroll () {
     const { $refs, scrollXLoad, scrollYLoad } = this
-    const bodyElem = $refs.tableBody.$el
+    const bodyElem = $refs.refTableBody.$el
     return {
       virtualX: scrollXLoad,
       virtualY: scrollYLoad,
@@ -6976,22 +7127,25 @@ const Methods = {
     }
   },
   handleScrollEvent (evnt: Event, isRollY: boolean, isRollX: boolean, scrollTop: number, scrollLeft: number, params: any) {
-    const $xeTable = this
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
     const props = $xeTable
-    const reactData = $xeTable
-    const internalData = $xeTable
+    const reactData = $xeTable as unknown as TableReactData
+    const internalData = $xeTable as unknown as TableInternalData
 
     const { highlightHoverRow } = props
     const { lastScrollLeft, lastScrollTop } = internalData
-    const tableBody = $xeTable.$refs.tableBody
-    const bodyElem = tableBody ? tableBody.$el as HTMLDivElement : null
+    const xHandleEl = $xeTable.$refs.refScrollXHandleElem as HTMLDivElement
+    const yHandleEl = $xeTable.$refs.refScrollYHandleElem as HTMLDivElement
+    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 as VxeTooltipInstance
+    const tooltip = $xeTable.$refs.refTooltip as VxeTooltipInstance
+    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
@@ -7063,13 +7217,12 @@ 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) {
       $xeTable.dispatchEvent('scroll-boundary', evntParams, evnt)
     }
@@ -7081,7 +7234,7 @@ const Methods = {
 
     const { lxTimeout, lxRunTime, scrollXStore } = internalData
     const { visibleSize } = scrollXStore
-    const fpsTime = Math.min(80, Math.floor(visibleSize * 3))
+    const fpsTime = Math.max(5, Math.min(80, Math.floor(visibleSize * 3)))
     if (lxTimeout) {
       clearTimeout(lxTimeout)
     }
@@ -7097,11 +7250,13 @@ const Methods = {
   },
   lazyScrollYData () {
     const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+    const props = $xeTable
     const internalData = $xeTable as unknown as TableInternalData
 
+    const { showOverflow } = props
     const { lyTimeout, lyRunTime, scrollYStore } = internalData
     const { visibleSize } = scrollYStore
-    const fpsTime = Math.min(80, Math.floor(visibleSize))
+    const fpsTime = showOverflow ? 5 : Math.max(5, Math.min(80, Math.floor(visibleSize / 2)))
     if (lyTimeout) {
       clearTimeout(lyTimeout)
     }
@@ -7141,29 +7296,258 @@ const Methods = {
       $xeTable.lazyScrollYData()
     }
   },
-  scrollXEvent (evnt: Event) {
-    const $xeTable = this
-    const internalData = $xeTable
+  triggerBodyScrollEvent (evnt: Event, fixedType: '' | 'left' | 'right') {
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+    const internalData = $xeTable as unknown as TableInternalData
 
-    const { intoRunScroll, inFooterScroll, inBodyScroll, lastScrollTop } = internalData
-    if (!intoRunScroll) {
-      if (inFooterScroll) {
+    const { elemStore, lastScrollTop, lastScrollLeft, inWheelScroll, inVirtualScroll, inHeaderScroll, inBodyScroll, scrollRenderType, inFooterScroll } = internalData
+    const xHandleEl = $xeTable.$refs.refScrollXHandleElem as HTMLDivElement
+    const yHandleEl = $xeTable.$refs.refScrollYHandleElem as HTMLDivElement
+    const leftScrollElem = getRefElem(elemStore['left-body-scroll'])
+    const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
+    const rightScrollElem = getRefElem(elemStore['right-body-scroll'])
+    const headerScrollElem = getRefElem(elemStore['main-header-scroll'])
+    const footerScrollElem = getRefElem(elemStore['main-footer-scroll'])
+    if (inWheelScroll || inVirtualScroll || inHeaderScroll || inFooterScroll) {
+      return
+    }
+    if (!bodyScrollElem) {
+      return
+    }
+    if (!xHandleEl) {
+      return
+    }
+    if (!yHandleEl) {
+      return
+    }
+    if (inBodyScroll) {
+      if (scrollRenderType !== fixedType) {
         return
       }
-      if (inBodyScroll) {
-        return
+    }
+    let scrollTop = yHandleEl.scrollTop
+    let scrollLeft = xHandleEl.scrollLeft
+    if (leftScrollElem && fixedType === 'left') {
+      scrollTop = leftScrollElem.scrollTop
+    } else if (rightScrollElem && fixedType === 'right') {
+      scrollTop = rightScrollElem.scrollTop
+    } else {
+      scrollTop = bodyScrollElem.scrollTop
+      scrollLeft = bodyScrollElem.scrollLeft
+    }
+    const isRollX = scrollLeft !== lastScrollLeft
+    const isRollY = scrollTop !== lastScrollTop
+    internalData.inBodyScroll = true
+    internalData.scrollRenderType = fixedType
+    if (isRollY) {
+      if (fixedType === 'left') {
+        setScrollTop(bodyScrollElem, scrollTop)
+        setScrollTop(rightScrollElem, scrollTop)
+      } else if (fixedType === 'right') {
+        setScrollTop(bodyScrollElem, scrollTop)
+        setScrollTop(leftScrollElem, scrollTop)
+      } else {
+        setScrollTop(leftScrollElem, scrollTop)
+        setScrollTop(rightScrollElem, scrollTop)
       }
+      setScrollTop(yHandleEl, scrollTop)
+      $xeTable.triggerScrollYEvent(evnt)
+    }
+    if (isRollX) {
+      setScrollLeft(xHandleEl, scrollLeft)
+      setScrollLeft(headerScrollElem, scrollLeft)
+      setScrollLeft(footerScrollElem, scrollLeft)
+      $xeTable.triggerScrollXEvent(evnt)
+    }
+    $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
+      type: 'body',
+      fixed: fixedType
+    })
+  },
+  triggerHeaderScrollEvent (evnt: Event, fixedType: '' | 'left' | 'right') {
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+    const internalData = $xeTable as unknown as TableInternalData
+
+    const { elemStore, inWheelScroll, inVirtualScroll, inBodyScroll, inFooterScroll } = internalData
+    const xHandleEl = $xeTable.$refs.refScrollXHandleElem as HTMLDivElement
+    const yHandleEl = $xeTable.$refs.refScrollYHandleElem as HTMLDivElement
+    const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
+    const headerScrollElem = getRefElem(elemStore['main-header-scroll'])
+    const footerScrollElem = getRefElem(elemStore['main-footer-scroll'])
+    if (inWheelScroll) {
+      return
+    }
+    if (inVirtualScroll) {
+      return
+    }
+    if (inBodyScroll) {
+      return
+    }
+    if (inFooterScroll) {
+      return
+    }
+    if (!headerScrollElem) {
+      return
+    }
+    if (!xHandleEl) {
+      return
+    }
+    if (!yHandleEl) {
+      return
+    }
+    const scrollTop = yHandleEl.scrollTop
+    const scrollLeft = headerScrollElem.scrollLeft
+    const isRollX = true
+    const isRollY = false
+    internalData.inHeaderScroll = true
+    setScrollLeft(xHandleEl, scrollLeft)
+    setScrollLeft(footerScrollElem, scrollLeft)
+    setScrollLeft(bodyScrollElem, scrollLeft)
+    $xeTable.triggerScrollXEvent(evnt)
+    $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
+      type: 'header',
+      fixed: fixedType
+    })
+  },
+  triggerFooterScrollEvent (evnt: Event, fixedType: '' | 'left' | 'right') {
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+    const internalData = $xeTable as unknown as TableInternalData
+
+    const { elemStore, inWheelScroll, inVirtualScroll, inHeaderScroll, inBodyScroll } = internalData
+    const xHandleEl = $xeTable.$refs.refScrollXHandleElem as HTMLDivElement
+    const yHandleEl = $xeTable.$refs.refScrollYHandleElem as HTMLDivElement
+    const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
+    const headerScrollElem = getRefElem(elemStore['main-header-scroll'])
+    const footerScrollElem = getRefElem(elemStore['main-footer-scroll'])
+    if (inWheelScroll) {
+      return
+    }
+    if (inVirtualScroll) {
+      return
+    }
+    if (inHeaderScroll) {
+      return
+    }
+    if (inBodyScroll) {
+      return
+    }
+    if (!footerScrollElem) {
+      return
+    }
+    if (!xHandleEl) {
+      return
+    }
+    if (!yHandleEl) {
+      return
+    }
+    const scrollTop = yHandleEl.scrollTop
+    const scrollLeft = footerScrollElem.scrollLeft
+    const isRollX = true
+    const isRollY = false
+    internalData.inFooterScroll = true
+    setScrollLeft(xHandleEl, scrollLeft)
+    setScrollLeft(headerScrollElem, scrollLeft)
+    setScrollLeft(bodyScrollElem, scrollLeft)
+    $xeTable.triggerScrollXEvent(evnt)
+    $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
+      type: 'footer',
+      fixed: fixedType
+    })
+  },
+  triggerBodyWheelEvent (evnt: WheelEvent) {
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+    const tableProps = $xeTable
+    const reactData = $xeTable as unknown as TableReactData
+    const internalData = $xeTable as unknown as TableInternalData
+
+    const { deltaY, deltaX } = evnt
+    const { highlightHoverRow } = tableProps
+    const { elemStore, lastScrollTop, lastScrollLeft } = internalData
+    const rowOpts = $xeTable.computeRowOpts
+    const xHandleEl = $xeTable.$refs.refScrollXHandleElem as HTMLDivElement
+    const yHandleEl = $xeTable.$refs.refScrollYHandleElem as HTMLDivElement
+    const leftScrollElem = getRefElem(elemStore['left-body-scroll'])
+    const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
+    const rightScrollElem = getRefElem(elemStore['right-body-scroll'])
+
+    if (!xHandleEl) {
+      return
+    }
+    if (!yHandleEl) {
+      return
+    }
+    if (!bodyScrollElem) {
+      return
+    }
+
+    let multiple = 1
+
+    if (reactData.lastScrollTime + 25 > Date.now()) {
+      multiple = 1.18
+    } else if (reactData.lastScrollTime + 30 > Date.now()) {
+      multiple = 1.15
+    } else if (reactData.lastScrollTime + 40 > Date.now()) {
+      multiple = 1.12
+    } else if (reactData.lastScrollTime + 55 > Date.now()) {
+      multiple = 1.09
+    } else if (reactData.lastScrollTime + 75 > Date.now()) {
+      multiple = 1.06
+    } else if (reactData.lastScrollTime + 100 > Date.now()) {
+      multiple = 1.03
+    }
+
+    const deltaTop = deltaY * multiple
+    const deltaLeft = deltaX * multiple
+
+    const isTopWheel = deltaTop < 0
+    const currScrollTop = yHandleEl.scrollTop
+    // 如果滚动位置已经是顶部或底部，则不需要触发
+    if (isTopWheel ? currScrollTop <= 0 : currScrollTop >= yHandleEl.scrollHeight - yHandleEl.clientHeight) {
+      return
+    }
+
+    const scrollTop = bodyScrollElem.scrollTop + deltaTop
+    const scrollLeft = bodyScrollElem.scrollLeft + deltaLeft
+    const isRollX = scrollLeft !== lastScrollLeft
+    const isRollY = scrollTop !== lastScrollTop
+
+    // 用于鼠标纵向滚轮处理
+    if (isRollY) {
+      evnt.preventDefault()
+      if (rowOpts.isHover || highlightHoverRow) {
+        $xeTable.clearHoverRow()
+      }
+
+      internalData.inWheelScroll = true
+      setScrollTop(yHandleEl, scrollTop)
+      setScrollTop(bodyScrollElem, scrollTop)
+      setScrollTop(leftScrollElem, scrollTop)
+      setScrollTop(rightScrollElem, scrollTop)
+      $xeTable.triggerScrollYEvent(evnt)
+      $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
+        type: 'footer',
+        fixed: ''
+      })
+    }
+  },
+  scrollXEvent (evnt: Event) {
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+    const internalData = $xeTable as unknown as TableInternalData
+
+    const { elemStore, inWheelScroll, lastScrollTop, inHeaderScroll, inBodyScroll, inFooterScroll } = internalData
+    if (inHeaderScroll || inBodyScroll || inFooterScroll) {
+      return
     }
-    const tableHeader = $xeTable.$refs.tableHeader
-    const tableBody = $xeTable.$refs.tableBody
-    const tableFooter = $xeTable.$refs.tableFooter
-    const bodyElem = tableBody.$el as HTMLDivElement
-    const headerElem = tableHeader ? tableHeader.$el as HTMLDivElement : null
-    const footerElem = tableFooter ? tableFooter.$el as HTMLDivElement : null
+    if (inWheelScroll) {
+      return
+    }
+    const headerScrollElem = getRefElem(elemStore['main-header-scroll'])
+    const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
+    const footerScrollElem = getRefElem(elemStore['main-footer-scroll'])
     const yHandleEl = $xeTable.$refs.refScrollYHandleElem as HTMLDivElement
     const wrapperEl = evnt.currentTarget as HTMLDivElement
     const { scrollLeft } = wrapperEl
-    const yBodyEl = yHandleEl || bodyElem
+    const yBodyEl = yHandleEl || bodyScrollElem
     let scrollTop = 0
     if (yBodyEl) {
       scrollTop = yBodyEl.scrollTop
@@ -7172,9 +7556,9 @@ const Methods = {
     const isRollY = scrollTop !== lastScrollTop
 
     internalData.inVirtualScroll = true
-    setScrollLeft(bodyElem, scrollLeft)
-    setScrollLeft(headerElem, scrollLeft)
-    setScrollLeft(footerElem, scrollLeft)
+    setScrollLeft(bodyScrollElem, scrollLeft)
+    setScrollLeft(headerScrollElem, scrollLeft)
+    setScrollLeft(footerScrollElem, scrollLeft)
     $xeTable.triggerScrollXEvent(evnt)
     $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
       type: 'table',
@@ -7182,28 +7566,23 @@ const Methods = {
     })
   },
   scrollYEvent (evnt: Event) {
-    const $xeTable = this
-    const internalData = $xeTable
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+    const internalData = $xeTable as unknown as TableInternalData
 
-    const { intoRunScroll, inFooterScroll, inBodyScroll, lastScrollLeft } = internalData
-    if (!intoRunScroll) {
-      if (inFooterScroll) {
-        return
-      }
-      if (inBodyScroll) {
-        return
-      }
+    const { elemStore, inWheelScroll, lastScrollLeft, inHeaderScroll, inBodyScroll, inFooterScroll } = internalData
+    if (inHeaderScroll || inBodyScroll || inFooterScroll) {
+      return
+    }
+    if (inWheelScroll) {
+      return
     }
-    const tableBody = $xeTable.$refs.tableBody
-    const leftBody = $xeTable.$refs.leftBody
-    const rightBody = $xeTable.$refs.rightBody
-    const bodyElem = tableBody.$el as HTMLDivElement
-    const leftElem = leftBody ? leftBody.$el as HTMLDivElement : null
-    const rightElem = rightBody ? rightBody.$el as HTMLDivElement : null
+    const leftScrollElem = getRefElem(elemStore['left-body-scroll'])
+    const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
+    const rightScrollElem = getRefElem(elemStore['right-body-scroll'])
     const xHandleEl = $xeTable.$refs.refScrollXHandleElem as HTMLDivElement
     const wrapperEl = evnt.currentTarget as HTMLDivElement
     const { scrollTop } = wrapperEl
-    const xBodyEl = xHandleEl || bodyElem
+    const xBodyEl = xHandleEl || bodyScrollElem
     let scrollLeft = 0
     if (xBodyEl) {
       scrollLeft = xBodyEl.scrollLeft
@@ -7212,47 +7591,25 @@ const Methods = {
     const isRollY = true
 
     internalData.inVirtualScroll = true
-    setScrollTop(bodyElem, scrollTop)
-    setScrollTop(leftElem, scrollTop)
-    setScrollTop(rightElem, scrollTop)
+    setScrollTop(bodyScrollElem, scrollTop)
+    setScrollTop(leftScrollElem, scrollTop)
+    setScrollTop(rightScrollElem, scrollTop)
     $xeTable.triggerScrollYEvent(evnt)
     $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
       type: 'table',
       fixed: ''
     })
   },
-  handleTableColumn () {
-    const { scrollXLoad, visibleColumn, scrollXStore, fullColumnIdData } = this
-    const tableColumn: any[] = 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 as VxeTableConstructor
-    const internalData = $xeTable as unknown as TableInternalData
-
-    const columnList = XEUtils.orderBy(internalData.collectColumn, 'renderSortNumber')
-    internalData.collectColumn = columnList
-    const tableFullColumn = getColumnList(columnList)
-    internalData.tableFullColumn = tableFullColumn
-    cacheColumnMap($xeTable)
-  },
   updateScrollXData () {
     const $xeTable = this
     const props = $xeTable
 
     const { showOverflow } = props
-    $xeTable.handleTableColumn()
-    calcCellHeight($xeTable)
+    handleTableColumn($xeTable)
+    // calcCellHeight()
     return $xeTable.$nextTick().then(() => {
-      calcCellHeight($xeTable)
-      $xeTable.handleTableColumn()
+      // calcCellHeight()
+      handleTableColumn($xeTable)
       $xeTable.updateScrollXSpace()
       if (!showOverflow) {
         $xeTable.updateScrollYSpace()
@@ -7261,18 +7618,23 @@ const Methods = {
   },
   // 更新横向 X 可视渲染上下剩余空间大小
   updateScrollXSpace () {
-    const $xeTable = this
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+    const reactData = $xeTable as unknown as TableReactData
+    const internalData = $xeTable as unknown as TableInternalData
 
-    const { $refs, isGroup, elemStore, visibleColumn, scrollXStore, scrollXLoad, tableWidth, scrollbarWidth } = $xeTable
-    const { tableHeader, tableBody, tableFooter } = $refs
-    const tableBodyElem = tableBody ? tableBody.$el : null
+    const { isGroup, scrollXLoad } = reactData
+    const { visibleColumn, scrollXStore, elemStore, tableWidth } = internalData
+    const tableHeader = $xeTable.$refs.refTableHeader
+    const tableBody = $xeTable.$refs.refTableBody
+    const tableFooter = $xeTable.$refs.refTableFooter
+    const tableBodyElem = tableBody ? (tableBody as any).$el as HTMLDivElement : null
     if (tableBodyElem) {
-      const tableHeaderElem = tableHeader ? tableHeader.$el : null
-      const tableFooterElem = tableFooter ? tableFooter.$el : null
-      const headerElem = tableHeaderElem ? tableHeaderElem.querySelector('.vxe-table--header') : null
-      const bodyElem = tableBodyElem.querySelector('.vxe-table--body')
-      const footerElem = tableFooterElem ? tableFooterElem.querySelector('.vxe-table--footer') : null
-      const leftSpaceWidth = visibleColumn.slice(0, scrollXStore.startIndex).reduce((previous: any, column: any) => previous + column.renderWidth, 0)
+      const tableHeaderElem = tableHeader ? (tableHeader as any).$el as HTMLDivElement : null
+      const tableFooterElem = tableFooter ? (tableFooter as any).$el as HTMLDivElement : null
+      const headerElem = tableHeaderElem ? tableHeaderElem.querySelector('.vxe-table--header') as HTMLTableElement : null
+      const bodyElem = tableBodyElem.querySelector('.vxe-table--body') as HTMLTableElement
+      const footerElem = tableFooterElem ? tableFooterElem.querySelector('.vxe-table--footer') as HTMLTableElement : null
+      const leftSpaceWidth = visibleColumn.slice(0, scrollXStore.startIndex).reduce((previous, column) => previous + column.renderWidth, 0)
       let marginLeft = ''
       if (scrollXLoad) {
         marginLeft = `${leftSpaceWidth}px`
@@ -7288,44 +7650,50 @@ const Methods = {
       containerList.forEach(name => {
         const layoutList = ['header', 'body', 'footer']
         layoutList.forEach(layout => {
-          const xSpaceElem = elemStore[`${name}-${layout}-xSpace`]
+          const xSpaceElem = getRefElem(elemStore[`${name}-${layout}-xSpace`])
           if (xSpaceElem) {
-            xSpaceElem.style.width = scrollXLoad ? `${tableWidth + (layout === 'header' ? scrollbarWidth : 0)}px` : ''
+            xSpaceElem.style.width = scrollXLoad ? `${tableWidth}px` : ''
           }
         })
       })
-      const scrollXSpaceEl = $xeTable.$refs.refScrollXSpaceElem
+      const scrollXSpaceEl = $xeTable.$refs.refScrollXSpaceElem as HTMLDivElement
       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()
     })
   },
   // 更新纵向 Y 可视渲染上下剩余空间大小
   updateScrollYSpace () {
-    const $xeTable = this
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+    const props = $xeTable
+    const reactData = $xeTable as unknown as TableReactData
+    const internalData = $xeTable as unknown as TableInternalData
 
-    const { showOverflow, elemStore, scrollYStore, scrollYLoad, afterFullData, fullAllDataRowIdData } = this
-    const { startIndex, rowHeight } = scrollYStore
-    let bodyHeight = 0
-    let topSpaceHeight = 0
+    const { showOverflow } = props
+    const { scrollYLoad, rowHeight } = reactData
+    const { scrollYStore, elemStore, afterFullData, fullAllDataRowIdData } = internalData
+    const { startIndex } = scrollYStore
+    const bodyTableElem = getRefElem(elemStore['main-body-table'])
     const containerList = ['main', 'left', 'right']
-    let marginTop = ''
-    let ySpaceHeight = ''
+    let topSpaceHeight = 0
+    let ySpaceHeight = 0
     if (scrollYLoad) {
       if (showOverflow) {
-        bodyHeight = afterFullData.length * rowHeight
+        ySpaceHeight = afterFullData.length * rowHeight
         topSpaceHeight = Math.max(0, startIndex * rowHeight)
       } else {
         for (let i = 0; i < afterFullData.length; i++) {
@@ -7333,7 +7701,7 @@ const Methods = {
           const rowid = getRowid($xeTable, row)
           const rowRest = fullAllDataRowIdData[rowid]
           if (rowRest) {
-            bodyHeight += rowRest.height || rowHeight
+            ySpaceHeight += rowRest.height || rowHeight
           }
         }
         for (let i = 0; i < startIndex; i++) {
@@ -7345,27 +7713,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 = getRefElem(elemStore[`${name}-body-table`])
       if (tableElem) {
-        tableElem.style.marginTop = marginTop
+        tableElem.style.marginTop = topSpaceHeight ? `${topSpaceHeight}px` : ''
       }
       layoutList.forEach(layout => {
-        const ySpaceElem = elemStore[`${name}-${layout}-ySpace`]
+        const ySpaceElem = getRefElem(elemStore[`${name}-${layout}-ySpace`])
         if (ySpaceElem) {
-          ySpaceElem.style.height = ySpaceHeight
+          ySpaceElem.style.height = ySpaceHeight ? `${ySpaceHeight}px` : ''
         }
       })
     })
-    const scrollYSpaceEl = $xeTable.$refs.refScrollYSpaceElem
+    const scrollYSpaceEl = $xeTable.$refs.refScrollYSpaceElem as HTMLDivElement
     if (scrollYSpaceEl) {
-      scrollYSpaceEl.style.height = ySpaceHeight
+      scrollYSpaceEl.style.height = ySpaceHeight ? `${ySpaceHeight}px` : ''
     }
-    this.$nextTick(this.updateStyle)
+    $xeTable.$nextTick(() => {
+      updateStyle($xeTable)
+    })
   },
   updateScrollYStatus () {
     const $xeTable = this
@@ -7382,12 +7754,12 @@ const Methods = {
     const internalData = $xeTable as unknown as TableInternalData
 
     const { $refs } = this
-    const { tableBody, tableHeader, leftBody, rightBody, tableFooter } = $refs
-    const tableBodyElem = tableBody ? tableBody.$el : null
+    const { refTableBody, refTableHeader, leftBody, rightBody, refTableFooter } = $refs
+    const tableBodyElem = refTableBody ? refTableBody.$el : null
     const leftBodyElem = leftBody ? leftBody.$el : null
     const rightBodyElem = rightBody ? rightBody.$el : null
-    const tableHeaderElem = tableHeader ? tableHeader.$el : null
-    const tableFooterElem = tableFooter ? tableFooter.$el : null
+    const tableHeaderElem = refTableHeader ? refTableHeader.$el : null
+    const tableFooterElem = refTableFooter ? refTableFooter.$el : null
     internalData.intoRunScroll = true
     if (XEUtils.isNumber(scrollLeft)) {
       const xHandleEl = $xeTable.$refs.refScrollXHandleElem as HTMLDivElement
@@ -7492,45 +7864,37 @@ const Methods = {
     const $xeTable = this
     const internalData = $xeTable
 
-    const { scrollXStore, scrollYStore } = internalData
-    const tableBody = $xeTable.$refs.tableBody
-    const tableHeader = $xeTable.$refs.tableHeader
-    const tableFooter = $xeTable.$refs.tableFooter
-    const leftBody = $xeTable.$refs.leftBody
-    const rightBody = $xeTable.$refs.rightBody
-    const leftBodyElem = leftBody ? leftBody.$el as HTMLDivElement : null
-    const tableBodyElem = tableBody ? tableBody.$el as HTMLDivElement : null
-    const rightBodyElem = rightBody ? rightBody.$el as HTMLDivElement : null
-    const tableHeaderElem = tableHeader ? tableHeader.$el as HTMLDivElement : null
-    const tableFooterElem = tableFooter ? tableFooter.$el as HTMLDivElement : null
+    const { elemStore, scrollXStore, scrollYStore } = internalData
+    const headerScrollElem = getRefElem(elemStore['main-header-scroll'])
+    const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
+    const footerScrollElem = getRefElem(elemStore['main-footer-scroll'])
+    const leftScrollElem = getRefElem(elemStore['left-body-scroll'])
+    const rightScrollElem = getRefElem(elemStore['right-body-scroll'])
     const xHandleEl = $xeTable.$refs.refScrollXHandleElem as HTMLDivElement
-    if (xHandleEl) {
-      setScrollLeft(xHandleEl, 0)
-    } else {
-      setScrollLeft(tableBodyElem, 0)
-      setScrollLeft(tableHeaderElem, 0)
-      setScrollLeft(tableFooterElem, 0)
-    }
     const yHandleEl = $xeTable.$refs.refScrollYHandleElem as HTMLDivElement
-    if (yHandleEl) {
-      setScrollTop(yHandleEl, 0)
-    } else {
-      setScrollTop(tableBodyElem, 0)
-      setScrollTop(leftBodyElem, 0)
-      setScrollTop(rightBodyElem, 0)
-    }
+
+    internalData.intoRunScroll = true
+
+    setScrollLeft(xHandleEl, 0)
+    setScrollLeft(bodyScrollElem, 0)
+    setScrollLeft(headerScrollElem, 0)
+    setScrollLeft(footerScrollElem, 0)
+
+    setScrollTop(yHandleEl, 0)
+    setScrollTop(bodyScrollElem, 0)
+    setScrollTop(leftScrollElem, 0)
+    setScrollTop(rightScrollElem, 0)
+
     scrollXStore.startIndex = 0
+    scrollXStore.visibleStartIndex = 0
     scrollXStore.endIndex = scrollXStore.visibleSize
+    scrollXStore.visibleEndIndex = scrollXStore.visibleSize
     scrollYStore.startIndex = 0
+    scrollYStore.visibleStartIndex = 0
     scrollYStore.endIndex = scrollYStore.visibleSize
+    scrollYStore.visibleEndIndex = scrollYStore.visibleSize
     return $xeTable.$nextTick().then(() => {
-      setScrollLeft(tableBodyElem, 0)
-      setScrollLeft(tableHeaderElem, 0)
-      setScrollLeft(tableFooterElem, 0)
-
-      setScrollTop(tableBodyElem, 0)
-      setScrollTop(leftBodyElem, 0)
-      setScrollTop(rightBodyElem, 0)
+      internalData.intoRunScroll = false
     })
   },
   /**
@@ -7556,8 +7920,8 @@ const Methods = {
     const customVal = !XEUtils.isUndefined(cellValue)
     return this.$nextTick().then(() => {
       const { $refs, editRules, validStore } = this
-      const tableBody = $refs.tableBody
-      if (slotParams && tableBody && editRules) {
+      const refTableBody = $refs.refTableBody
+      if (slotParams && refTableBody && editRules) {
         const { row, column } = slotParams
         const type = 'change'
         if (this.hasCellRules) {
@@ -7591,13 +7955,15 @@ const Methods = {
    * @param {TableMergeConfig[]} merges { row: Row|number, column: ColumnInfo|number, rowspan: number, colspan: number }
    */
   setMergeCells (merges: any) {
+    const $xeTable = this
+
     if (this.spanMethod) {
       errLog('vxe.error.errConflicts', ['merge-cells', 'span-method'])
     }
     setMerges(this, merges, this.mergeList, this.afterFullData)
     return this.$nextTick().then(() => {
       this.updateCellAreas()
-      return this.updateStyle()
+      return updateStyle($xeTable)
     })
   },
   /**
@@ -7605,13 +7971,15 @@ const Methods = {
    * @param {TableMergeConfig[]} merges 多个或数组 [{row:Row|number, col:ColumnInfo|number}]
    */
   removeMergeCells (merges: any) {
+    const $xeTable = this
+
     if (this.spanMethod) {
       errLog('vxe.error.errConflicts', ['merge-cells', 'span-method'])
     }
     const rest = removeMerges(this, merges, this.mergeList, this.afterFullData)
     return this.$nextTick().then(() => {
       this.updateCellAreas()
-      this.updateStyle()
+      updateStyle($xeTable)
       return rest
     })
   },
@@ -7625,32 +7993,38 @@ 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: any) {
+    const $xeTable = this
+
     if (this.footerSpanMethod) {
       errLog('vxe.error.errConflicts', ['merge-footer-items', 'footer-span-method'])
     }
     setMerges(this, merges, this.mergeFooterList, null)
     return this.$nextTick().then(() => {
       this.updateCellAreas()
-      return this.updateStyle()
+      return updateStyle($xeTable)
     })
   },
   removeMergeFooterItems (merges: any) {
+    const $xeTable = this
+
     if (this.footerSpanMethod) {
       errLog('vxe.error.errConflicts', ['merge-footer-items', 'footer-span-method'])
     }
     const rest = removeMerges(this, merges, this.mergeFooterList, null)
     return this.$nextTick().then(() => {
       this.updateCellAreas()
-      this.updateStyle()
+      updateStyle($xeTable)
       return rest
     })
   },
@@ -7664,9 +8038,11 @@ const Methods = {
    * 清除所有表尾合并
    */
   clearMergeFooterItems () {
+    const $xeTable = this
+
     this.mergeFooterList = []
     return this.$nextTick().then(() => {
-      return this.updateStyle()
+      return updateStyle($xeTable)
     })
   },
   updateZindex () {