vxe-table 3.13.15 → 3.14.0-beta.0

package/packages/table/src/methods.ts

@@ -12,6 +12,8 @@ import type { VxeTableDefines, VxeColumnPropTypes, VxeTableEmits, ValueOf, Table
 const { getConfig, getI18n, renderer, formats, interceptor, createEvent } = VxeUI
 
 const customStorageKey = 'VXE_CUSTOM_STORE'
+const maxYHeight = 5e6
+const maxXWidth = 5e6
 
 function eqCellValue (row1: any, row2: any, field: any) {
   const val1 = XEUtils.get(row1, field)
@@ -74,29 +76,44 @@ function handleReserveRow ($xeTable: VxeTableConstructor & VxeTablePrivateMethod
 }
 
 function handleVirtualXVisible ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
+  const reactData = $xeTable as unknown as TableReactData
   const internalData = $xeTable as unknown as TableInternalData
 
-  const { elemStore, visibleColumn } = internalData
+  const { isScrollXBig, scrollXWidth } = reactData
+  const { elemStore, visibleColumn, fullColumnIdData } = 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 && startWidth < cWidth) {
-        toVisibleIndex = colIndex
+    const clientWidth = bodyScrollElem.clientWidth
+    let scrollLeft = bodyScrollElem.scrollLeft
+    if (isScrollXBig) {
+      scrollLeft = Math.ceil((scrollXWidth - clientWidth) * Math.min(1, (scrollLeft / (maxXWidth - clientWidth))))
+    }
+    const startLeft = scrollLeft + leftFixedWidth
+    const endLeft = scrollLeft + clientWidth - rightFixedWidth
+    let leftIndex = 0
+    let rightIndex = visibleColumn.length
+    while (leftIndex < rightIndex) {
+      const cIndex = Math.floor((leftIndex + rightIndex) / 2)
+      const column = visibleColumn[cIndex]
+      const colid = column.id
+      const colRest = fullColumnIdData[colid] || {}
+      if (colRest.oLeft <= startLeft) {
+        leftIndex = cIndex + 1
+      } else {
+        rightIndex = cIndex
       }
-      if (toVisibleIndex >= 0) {
-        visibleSize++
-        if (cWidth > endWidth) {
-          break
-        }
+    }
+    let visibleSize = 0
+    const toVisibleIndex = Math.max(0, leftIndex < visibleColumn.length ? leftIndex - 2 : 0)
+    for (let cIndex = toVisibleIndex, cLen = visibleColumn.length; cIndex < cLen; cIndex++) {
+      const column = visibleColumn[cIndex]
+      const colid = column.id
+      const colRest = fullColumnIdData[colid] || {}
+      visibleSize++
+      if (colRest.oLeft > endLeft || visibleSize >= 60) {
+        break
       }
     }
     return { toVisibleIndex: Math.max(0, toVisibleIndex), visibleSize: Math.max(1, visibleSize) }
@@ -425,8 +442,8 @@ function updateStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
   const internalData = $xeTable as unknown as TableInternalData
 
   const { border, showHeaderOverflow: allColumnHeaderOverflow, showFooterOverflow: allColumnFooterOverflow, mouseConfig, spanMethod, footerSpanMethod } = props
-  const { isGroup, currentRow, tableColumn, scrollXLoad, scrollYLoad, overflowX, scrollbarWidth, overflowY, scrollbarHeight, columnStore, editStore, isAllOverflow, expandColumn } = reactData
-  const { visibleColumn, fullColumnIdData, tableHeight, tableWidth, headerHeight, footerHeight, elemStore, customHeight, customMinHeight, customMaxHeight } = internalData
+  const { isGroup, currentRow, tableColumn, scrollXLoad, scrollYLoad, overflowX, scrollbarWidth, overflowY, scrollbarHeight, scrollXWidth, columnStore, editStore, isAllOverflow, expandColumn } = reactData
+  const { visibleColumn, fullColumnIdData, tableHeight, headerHeight, footerHeight, elemStore, customHeight, customMinHeight, customMaxHeight } = internalData
   const el = $xeTable.$refs.refElem as HTMLDivElement
   if (!el) {
     return
@@ -466,9 +483,10 @@ function updateStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
     bodyHeight = Math.max(bodyMinHeight, bodyHeight)
   }
 
+  const scrollbarXToTop = $xeTable.$refs.computeScrollbarXToTop
+
   const xLeftCornerEl = $xeTable.$refs.refScrollXLeftCornerElem as HTMLDivElement
   const xRightCornerEl = $xeTable.$refs.refScrollXRightCornerElem as HTMLDivElement
-  const scrollbarXToTop = $xeTable.computeScrollbarXToTop
   const scrollXVirtualEl = $xeTable.$refs.refScrollXVirtualElem as HTMLDivElement
   if (scrollXVirtualEl) {
     scrollXVirtualEl.style.height = `${osbHeight}px`
@@ -563,7 +581,7 @@ function updateStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
         if (fixedType) {
           if (isGroup) {
             if (wrapperElem) {
-              wrapperElem.style.width = tableWidth ? `${tableWidth}px` : ''
+              wrapperElem.style.width = scrollXWidth ? `${scrollXWidth}px` : ''
             }
           } else {
             if (isOptimizeMode) {
@@ -572,7 +590,7 @@ function updateStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
               }
             } else {
               if (wrapperElem) {
-                wrapperElem.style.width = tableWidth ? `${tableWidth}px` : ''
+                wrapperElem.style.width = scrollXWidth ? `${scrollXWidth}px` : ''
               }
             }
           }
@@ -586,11 +604,6 @@ function updateStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
           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) => {
@@ -661,7 +674,7 @@ function updateStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
             }
           } else {
             if (wrapperElem) {
-              wrapperElem.style.width = tableWidth ? `${tableWidth}px` : ''
+              wrapperElem.style.width = scrollXWidth ? `${scrollXWidth}px` : ''
             }
           }
         }
@@ -703,7 +716,7 @@ function updateStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
             }
           } else {
             if (wrapperElem) {
-              wrapperElem.style.width = tableWidth ? `${tableWidth}px` : ''
+              wrapperElem.style.width = scrollXWidth ? `${scrollXWidth}px` : ''
             }
           }
         }
@@ -1033,46 +1046,52 @@ function computeRowHeight ($xeTable: VxeTableConstructor) {
   return Math.max(18, rowHeight)
 }
 
-function handleVirtualYVisible ($xeTable: VxeTableConstructor, currScrollTop?: number) {
+function handleVirtualYVisible ($xeTable: VxeTableConstructor) {
   const reactData = $xeTable as unknown as TableReactData
   const internalData = $xeTable as unknown as TableInternalData
 
-  const { isAllOverflow, expandColumn, rowExpandedMaps } = reactData
+  const { isAllOverflow, expandColumn, isScrollYBig, scrollYHeight } = reactData
   const { elemStore, isResizeCellHeight, afterFullData, fullAllDataRowIdData } = internalData
-  const expandOpts = $xeTable.computeExpandOpts
   const rowOpts = $xeTable.computeRowOpts
   const cellOpts = $xeTable.computeCellOpts
   const defaultRowHeight = $xeTable.computeDefaultRowHeight
   const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
   if (bodyScrollElem) {
     const clientHeight = bodyScrollElem.clientHeight
-    const scrollTop = XEUtils.isNumber(currScrollTop) ? currScrollTop : bodyScrollElem.scrollTop
-    const endHeight = scrollTop + clientHeight
+    let scrollTop = bodyScrollElem.scrollTop
+    if (isScrollYBig) {
+      scrollTop = Math.ceil((scrollYHeight - clientHeight) * Math.min(1, (scrollTop / (maxYHeight - clientHeight))))
+    }
+    const startTop = scrollTop
+    const endTop = scrollTop + clientHeight
     let toVisibleIndex = -1
-    let offsetTop = 0
     let visibleSize = 0
     const isCustomCellHeight = isResizeCellHeight || cellOpts.height || rowOpts.height
     if (!isCustomCellHeight && !expandColumn && isAllOverflow) {
-      toVisibleIndex = Math.floor(scrollTop / defaultRowHeight)
+      toVisibleIndex = Math.floor(startTop / defaultRowHeight) - 1
       visibleSize = Math.ceil(clientHeight / defaultRowHeight) + 1
     } else {
-      for (let rIndex = 0, rLen = afterFullData.length; rIndex < rLen; rIndex++) {
+      let leftIndex = 0
+      let rightIndex = afterFullData.length
+      while (leftIndex < rightIndex) {
+        const rIndex = Math.floor((leftIndex + rightIndex) / 2)
         const row = afterFullData[rIndex]
         const rowid = getRowid($xeTable, row)
         const rowRest = fullAllDataRowIdData[rowid] || {}
-        offsetTop += rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight
-        if (toVisibleIndex === -1 && scrollTop < offsetTop) {
-          toVisibleIndex = rIndex
-        }
-        if (toVisibleIndex >= 0) {
-          visibleSize++
-          if (offsetTop > endHeight) {
-            break
-          }
+        if (rowRest.oTop <= startTop) {
+          leftIndex = rIndex + 1
+        } else {
+          rightIndex = rIndex
         }
-        // 是否展开行
-        if (expandColumn && rowExpandedMaps[rowid]) {
-          offsetTop += rowRest.expandHeight || expandOpts.height || 0
+      }
+      toVisibleIndex = Math.max(0, leftIndex < afterFullData.length ? leftIndex - 2 : 0)
+      for (let rIndex = toVisibleIndex, rLen = afterFullData.length; rIndex < rLen; rIndex++) {
+        const row = afterFullData[rIndex]
+        const rowid = getRowid($xeTable, row)
+        const rowRest = fullAllDataRowIdData[rowid] || {}
+        visibleSize++
+        if (rowRest.oTop > endTop || visibleSize >= 100) {
+          break
         }
       }
     }
@@ -1232,7 +1251,7 @@ function autoCellWidth ($xeTable: VxeTableConstructor & VxeTablePrivateMethods)
   if (!xHandleEl) {
     return
   }
-  let tableWidth = 0
+  let tWidth = 0
   const minCellWidth = 40 // 列宽最少限制 40px
   const bodyWidth = bodyElem.clientWidth
   let remainWidth = bodyWidth
@@ -1243,51 +1262,51 @@ function autoCellWidth ($xeTable: VxeTableConstructor & VxeTablePrivateMethods)
   // 最小宽
   pxMinList.forEach((column) => {
     const minWidth = XEUtils.toInteger(column.minWidth)
-    tableWidth += minWidth
+    tWidth += minWidth
     column.renderWidth = minWidth
   })
   // 最小自适应
   autoMinList.forEach((column) => {
     const scaleWidth = Math.max(60, XEUtils.toInteger(column.renderAutoWidth))
-    tableWidth += scaleWidth
+    tWidth += scaleWidth
     column.renderWidth = scaleWidth
   })
   // 最小百分比
   scaleMinList.forEach((column) => {
     const scaleWidth = Math.floor(XEUtils.toInteger(column.minWidth) * meanWidth)
-    tableWidth += scaleWidth
+    tWidth += scaleWidth
     column.renderWidth = scaleWidth
   })
   // 固定百分比
   scaleList.forEach((column) => {
     const scaleWidth = Math.floor(XEUtils.toInteger(column.width) * meanWidth)
-    tableWidth += scaleWidth
+    tWidth += scaleWidth
     column.renderWidth = scaleWidth
   })
   // 固定宽
   pxList.forEach((column) => {
     const width = XEUtils.toInteger(column.width)
-    tableWidth += width
+    tWidth += width
     column.renderWidth = width
   })
   // 自适应宽
   autoList.forEach((column) => {
     const width = Math.max(60, XEUtils.toInteger(column.renderAutoWidth))
-    tableWidth += width
+    tWidth += width
     column.renderWidth = width
   })
   // 调整了列宽
   resizeList.forEach((column) => {
     const width = XEUtils.toInteger(column.resizeWidth)
-    tableWidth += width
+    tWidth += width
     column.renderWidth = width
   })
-  remainWidth -= tableWidth
+  remainWidth -= tWidth
   meanWidth = remainWidth > 0 ? Math.floor(remainWidth / (scaleMinList.length + pxMinList.length + autoMinList.length + remainList.length)) : 0
   if (fit) {
     if (remainWidth > 0) {
       scaleMinList.concat(pxMinList).concat(autoMinList).forEach((column) => {
-        tableWidth += meanWidth
+        tWidth += meanWidth
         column.renderWidth += meanWidth
       })
     }
@@ -1298,7 +1317,7 @@ function autoCellWidth ($xeTable: VxeTableConstructor & VxeTablePrivateMethods)
   remainList.forEach((column) => {
     const width = Math.max(meanWidth, minCellWidth)
     column.renderWidth = width
-    tableWidth += width
+    tWidth += width
   })
   if (fit) {
     /**
@@ -1308,13 +1327,13 @@ function autoCellWidth ($xeTable: VxeTableConstructor & VxeTablePrivateMethods)
     const dynamicList = scaleList.concat(scaleMinList).concat(pxMinList).concat(autoMinList).concat(remainList)
     let dynamicSize = dynamicList.length - 1
     if (dynamicSize > 0) {
-      let i = bodyWidth - tableWidth
+      let i = bodyWidth - tWidth
       if (i > 0) {
         while (i > 0 && dynamicSize >= 0) {
           i--
           dynamicList[dynamicSize--].renderWidth++
         }
-        tableWidth = bodyWidth
+        tWidth = bodyWidth
       }
     }
   }
@@ -1322,18 +1341,19 @@ function autoCellWidth ($xeTable: VxeTableConstructor & VxeTablePrivateMethods)
   const overflowY = yHandleEl.scrollHeight > yHandleEl.clientHeight
   reactData.scrollbarWidth = Math.max(scrollbarOpts.width || 0, yHandleEl.offsetWidth - yHandleEl.clientWidth)
   reactData.overflowY = overflowY
-  internalData.tableWidth = tableWidth
+  reactData.scrollXWidth = tWidth
   internalData.tableHeight = tableHeight
 
   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 overflowX = tWidth > bodyWidth
   const footerHeight = footerTableElem ? footerTableElem.clientHeight : 0
   reactData.scrollbarHeight = Math.max(scrollbarOpts.height || 0, xHandleEl.offsetHeight - xHandleEl.clientHeight)
   internalData.headerHeight = headerHeight
   internalData.footerHeight = footerHeight
   reactData.overflowX = overflowX
+  updateColumnOffsetLeft($xeTable)
   updateHeight($xeTable)
   reactData.parentHeight = Math.max(internalData.headerHeight + footerHeight + 20, $xeTable.getParentHeight())
   if (overflowX) {
@@ -1521,8 +1541,8 @@ function showDropTip ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, ev
   const wrapperRect = el.getBoundingClientRect()
   const osbWidth = overflowY ? scrollbarWidth : 0
   const osbHeight = overflowX ? scrollbarHeight : 0
-  const tableWidth = el.clientWidth
-  const tableHeight = el.clientHeight
+  const tableWrapperWidth = el.clientWidth
+  const tableWrapperHeight = el.clientHeight
   if (trEl) {
     const rdLineEl = $xeTable.$refs.refDragRowLineElem as HTMLElement
     if (rdLineEl) {
@@ -1531,14 +1551,14 @@ function showDropTip ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, ev
         const trRect = trEl.getBoundingClientRect()
         let trHeight = trEl.clientHeight
         const offsetTop = Math.max(1, trRect.y - wrapperRect.y)
-        if (offsetTop + trHeight > tableHeight - osbHeight) {
-          trHeight = tableHeight - offsetTop - osbHeight
+        if (offsetTop + trHeight > tableWrapperHeight - osbHeight) {
+          trHeight = tableWrapperHeight - offsetTop - osbHeight
         }
         rdLineEl.style.display = 'block'
         rdLineEl.style.left = `${scrollbarYToLeft ? osbWidth : 0}px`
         rdLineEl.style.top = `${offsetTop}px`
         rdLineEl.style.height = `${trHeight}px`
-        rdLineEl.style.width = `${tableWidth - osbWidth}px`
+        rdLineEl.style.width = `${tableWrapperWidth - osbWidth}px`
         rdLineEl.setAttribute('drag-pos', dragPos)
         rdLineEl.setAttribute('drag-to-child', prevDragToChild ? 'y' : 'n')
       } else {
@@ -1563,7 +1583,7 @@ function showDropTip ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, ev
           thWidth -= startX - offsetLeft
           offsetLeft = startX
         }
-        const endX = tableWidth - rightContainerWidth - (rightContainerWidth ? 0 : osbWidth)
+        const endX = tableWrapperWidth - rightContainerWidth - (rightContainerWidth ? 0 : osbWidth)
         if (offsetLeft + thWidth > endX) {
           thWidth = endX - offsetLeft
         }
@@ -1574,7 +1594,7 @@ function showDropTip ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, ev
         if (prevDragToChild) {
           cdLineEl.style.height = `${thRect.height}px`
         } else {
-          cdLineEl.style.height = `${tableHeight - offsetTop - (scrollbarXToTop ? 0 : osbHeight)}px`
+          cdLineEl.style.height = `${tableWrapperHeight - offsetTop - (scrollbarXToTop ? 0 : osbHeight)}px`
         }
         cdLineEl.setAttribute('drag-pos', dragPos)
         cdLineEl.setAttribute('drag-to-child', prevDragToChild ? 'y' : 'n')
@@ -1655,6 +1675,21 @@ function handleScrollToRowColumn ($xeTable: VxeTableConstructor & VxeTablePrivat
   return $xeTable.$nextTick()
 }
 
+const handleRowExpandReserve = ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, row: any, expanded: boolean) => {
+  const internalData = $xeTable as unknown as TableInternalData
+
+  const { rowExpandedReserveRowMap } = internalData
+  const expandOpts = $xeTable.computeExpandOpts
+  if (expandOpts.reserve) {
+    const rowid = getRowid($xeTable, row)
+    if (expanded) {
+      rowExpandedReserveRowMap[rowid] = row
+    } else if (rowExpandedReserveRowMap[rowid]) {
+      delete rowExpandedReserveRowMap[rowid]
+    }
+  }
+}
+
 // 计算可视渲染相关数据
 function computeScrollLoad ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
   const reactData = $xeTable as unknown as TableReactData
@@ -1725,14 +1760,19 @@ function handleRecalculateLayout ($xeTable: VxeTableConstructor & VxeTablePrivat
   calcCellWidth($xeTable)
   autoCellWidth($xeTable)
   updateStyle($xeTable)
+  if (reFull) {
+    updateRowOffsetTop($xeTable)
+  }
   updateRowExpandStyle($xeTable)
   return computeScrollLoad($xeTable).then(() => {
     if (reFull === true) {
       // 初始化时需要在列计算之后再执行优化运算，达到最优显示效果
-      calcCellHeight($xeTable)
       calcCellWidth($xeTable)
       autoCellWidth($xeTable)
       updateStyle($xeTable)
+      if (reFull) {
+        updateRowOffsetTop($xeTable)
+      }
       updateRowExpandStyle($xeTable)
       return computeScrollLoad($xeTable)
     }
@@ -1770,16 +1810,16 @@ function loadScrollXData ($xeTable: VxeTableConstructor & VxeTablePrivateMethods
   const reactData = $xeTable as unknown as TableReactData
   const internalData = $xeTable as unknown as TableInternalData
 
-  const { mergeList, mergeFooterList } = reactData
+  const { mergeList, mergeFooterList, isScrollXBig } = reactData
   const { scrollXStore } = internalData
   const { preloadSize, startIndex, endIndex, offsetSize } = scrollXStore
   const { toVisibleIndex, visibleSize } = handleVirtualXVisible($xeTable)
   const offsetItem = {
-    startIndex: Math.max(0, toVisibleIndex - 1 - offsetSize - preloadSize),
-    endIndex: toVisibleIndex + visibleSize + offsetSize + preloadSize
+    startIndex: Math.max(0, isScrollXBig ? toVisibleIndex - 1 : toVisibleIndex - 1 - offsetSize - preloadSize),
+    endIndex: isScrollXBig ? toVisibleIndex + visibleSize : toVisibleIndex + visibleSize + offsetSize + preloadSize
   }
-  scrollXStore.visibleStartIndex = toVisibleIndex
-  scrollXStore.visibleEndIndex = toVisibleIndex + visibleSize
+  scrollXStore.visibleStartIndex = toVisibleIndex - 1
+  scrollXStore.visibleEndIndex = toVisibleIndex + visibleSize + 1
   calculateMergerOffsetIndex(mergeList.concat(mergeFooterList), offsetItem, 'col')
   const { startIndex: offsetStartIndex, endIndex: offsetEndIndex } = offsetItem
   if (toVisibleIndex <= startIndex || toVisibleIndex >= endIndex - visibleSize - 1) {
@@ -1990,21 +2030,21 @@ function handleColumn ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, c
 /**
  * 纵向 Y 可视渲染处理
  */
-function loadScrollYData ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, scrollTop?: number) {
+function loadScrollYData ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
   const reactData = $xeTable as unknown as TableReactData
   const internalData = $xeTable as unknown as TableInternalData
 
-  const { mergeList, isAllOverflow } = reactData
+  const { mergeList, isAllOverflow, isScrollYBig } = reactData
   const { scrollYStore } = internalData
   const { preloadSize, startIndex, endIndex, offsetSize } = scrollYStore
   const autoOffsetYSize = isAllOverflow ? offsetSize : offsetSize + 1
-  const { toVisibleIndex, visibleSize } = handleVirtualYVisible($xeTable, scrollTop)
+  const { toVisibleIndex, visibleSize } = handleVirtualYVisible($xeTable)
   const offsetItem = {
-    startIndex: Math.max(0, toVisibleIndex - 1 - offsetSize - preloadSize),
-    endIndex: toVisibleIndex + visibleSize + autoOffsetYSize + preloadSize
+    startIndex: Math.max(0, isScrollYBig ? toVisibleIndex - 1 : toVisibleIndex - 1 - offsetSize - preloadSize),
+    endIndex: isScrollYBig ? (toVisibleIndex + visibleSize) : (toVisibleIndex + visibleSize + autoOffsetYSize + preloadSize)
   }
-  scrollYStore.visibleStartIndex = toVisibleIndex
-  scrollYStore.visibleEndIndex = toVisibleIndex + visibleSize
+  scrollYStore.visibleStartIndex = toVisibleIndex - 1
+  scrollYStore.visibleEndIndex = toVisibleIndex + visibleSize + 1
   calculateMergerOffsetIndex(mergeList, offsetItem, 'row')
   const { startIndex: offsetStartIndex, endIndex: offsetEndIndex } = offsetItem
   if (toVisibleIndex <= startIndex || toVisibleIndex >= endIndex - visibleSize - 1) {
@@ -2203,6 +2243,44 @@ function handleUpdateRowResize ($xeTable: VxeTableConstructor & VxeTablePrivateM
   })
 }
 
+function updateColumnOffsetLeft ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
+  const internalData = $xeTable as unknown as TableInternalData
+
+  const { visibleColumn, fullColumnIdData } = internalData
+  let offsetLeft = 0
+  for (let cIndex = 0, rLen = visibleColumn.length; cIndex < rLen; cIndex++) {
+    const column = visibleColumn[cIndex]
+    const colid = column.id
+    const colRest = fullColumnIdData[colid]
+    colRest.oLeft = offsetLeft
+    offsetLeft += column.renderWidth
+  }
+}
+
+function updateRowOffsetTop ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
+  const reactData = $xeTable as unknown as TableReactData
+  const internalData = $xeTable as unknown as TableInternalData
+
+  const { expandColumn, rowExpandedMaps } = reactData
+  const { afterFullData, fullAllDataRowIdData } = internalData
+  const expandOpts = $xeTable.computeExpandOpts
+  const rowOpts = $xeTable.computeRowOpts
+  const cellOpts = $xeTable.computeCellOpts
+  const defaultRowHeight = $xeTable.computeDefaultRowHeight
+  let offsetTop = 0
+  for (let rIndex = 0, rLen = afterFullData.length; rIndex < rLen; rIndex++) {
+    const row = afterFullData[rIndex]
+    const rowid = getRowid($xeTable, row)
+    const rowRest = fullAllDataRowIdData[rowid] || {}
+    rowRest.oTop = offsetTop
+    offsetTop += rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight
+    // 是否展开行
+    if (expandColumn && rowExpandedMaps[rowid]) {
+      offsetTop += rowRest.expandHeight || expandOpts.height || 0
+    }
+  }
+}
+
 function updateRowExpandStyle ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
   const reactData = $xeTable as unknown as TableReactData
   const internalData = $xeTable as unknown as TableInternalData
@@ -4163,7 +4241,7 @@ const Methods = {
       resizeBarElem.style.height = `${scrollbarXToTop ? tableHeight - osbHeight : tableHeight}px`
       if (resizableOpts.showDragTip && resizeTipElem) {
         resizeTipElem.textContent = getI18n('vxe.table.resizeColTip', [resizeColumn.renderWidth + (isRightFixed ? dragPosLeft - dragLeft : dragLeft - dragPosLeft)])
-        const tableWidth = tableEl.clientWidth
+        const tableWrapperWidth = tableEl.clientWidth
         const wrapperRect = wrapperElem.getBoundingClientRect()
         const resizeBarWidth = resizeBarElem.clientWidth
         const resizeTipWidth = resizeTipElem.clientWidth
@@ -4171,8 +4249,8 @@ const Methods = {
         let resizeTipLeft = -resizeTipWidth
         if (resizeBarLeft < resizeTipWidth + resizeBarWidth) {
           resizeTipLeft = 0
-        } else if (resizeBarLeft > tableWidth) {
-          resizeTipLeft += tableWidth - resizeBarLeft
+        } else if (resizeBarLeft > tableWrapperWidth) {
+          resizeTipLeft += tableWrapperWidth - resizeBarLeft
         }
         resizeTipElem.style.left = `${resizeTipLeft}px`
         resizeTipElem.style.top = `${Math.min(tableHeight - resizeTipHeight, Math.max(0, evnt.clientY - wrapperRect.y - resizeTipHeight / 2))}px`
@@ -4316,7 +4394,7 @@ const Methods = {
     const updateEvent = (evnt: MouseEvent) => {
       evnt.stopPropagation()
       evnt.preventDefault()
-      const tableWidth = tableEl.clientWidth - osbWidth
+      const rtWidth = tableEl.clientWidth - osbWidth
       const tableHeight = tableEl.clientHeight - osbHeight
       let dragTop = evnt.clientY - tableRect.y - targetOffsetY
       if (dragTop < minTop) {
@@ -4326,15 +4404,15 @@ const Methods = {
       }
       resizeBarElem.style.left = `${scrollbarYToLeft ? osbWidth : 0}px`
       resizeBarElem.style.top = `${dragTop}px`
-      resizeBarElem.style.width = `${tableWidth}px`
+      resizeBarElem.style.width = `${rtWidth}px`
       if (resizableOpts.showDragTip && resizeTipElem) {
         resizeTipElem.textContent = getI18n('vxe.table.resizeRowTip', [resizeHeight])
         const resizeTipWidth = resizeTipElem.clientWidth
         const resizeTipHeight = resizeTipElem.clientHeight
         let resizeBarLeft = Math.max(2, evnt.clientX - tableRect.x)
         let resizeBarTop = 0
-        if (resizeBarLeft + resizeTipWidth >= tableWidth - 2) {
-          resizeBarLeft = tableWidth - resizeTipWidth - 2
+        if (resizeBarLeft + resizeTipWidth >= rtWidth - 2) {
+          resizeBarLeft = rtWidth - resizeTipWidth - 2
         }
         if (dragTop + resizeTipHeight >= tableHeight) {
           resizeBarTop = tableHeight - (dragTop + resizeTipHeight)
@@ -4367,6 +4445,7 @@ const Methods = {
         } else {
           rowRest.resizeHeight = resizeHeight
           handleUpdateRowResize($xeTable, evnt, resizeParams)
+          updateRowOffsetTop($xeTable)
         }
       }
       removeClass(tableEl, 'row-drag--resize')
@@ -7043,21 +7122,21 @@ const Methods = {
       const scrollTargetEl = xHandleEl || tableBodyElem
       if (scrollTargetEl) {
         const wrapperRect = el.getBoundingClientRect()
-        const tableWidth = el.clientWidth
+        const tableWrapperWidth = el.clientWidth
         const leftContainerElem = $xeTable.$refs.refLeftContainer as HTMLDivElement
         const leftContainerWidth = leftContainerElem ? leftContainerElem.clientWidth : 0
         const rightContainerElem = $xeTable.$refs.refRightContainer as HTMLDivElement
         const rightContainerWidth = rightContainerElem ? rightContainerElem.clientWidth : 0
         const srartX = wrapperRect.x + leftContainerWidth
-        const endX = wrapperRect.x + tableWidth - rightContainerWidth
+        const endX = wrapperRect.x + tableWrapperWidth - rightContainerWidth
         const distSize = 28
         const startDistSize = clientX - srartX
         const endDistSize = endX - clientX
         if (startDistSize > 0 && startDistSize <= distSize) {
-          const scrollRatio = Math.floor(tableWidth / (startDistSize > distSize / 2 ? 240 : 120))
+          const scrollRatio = Math.floor(tableWrapperWidth / (startDistSize > distSize / 2 ? 240 : 120))
           scrollTargetEl.scrollLeft -= scrollRatio * (distSize - startDistSize)
         } else if (endDistSize > 0 && endDistSize <= distSize) {
-          const scrollRatio = Math.floor(tableWidth / (endDistSize > distSize / 2 ? 240 : 120))
+          const scrollRatio = Math.floor(tableWrapperWidth / (endDistSize > distSize / 2 ? 240 : 120))
           scrollTargetEl.scrollLeft += scrollRatio * (distSize - endDistSize)
         }
       }
@@ -7558,17 +7637,17 @@ const Methods = {
         })
       }
       if (reserve) {
-        validRows.forEach((row) => this.handleRowExpandReserve(row, expanded))
+        validRows.forEach((row) => handleRowExpandReserve($xeTable, row, expanded))
       }
     }
     this.rowExpandedMaps = rExpandedMaps
     return Promise.all(lazyRests)
-      .then(() => $xeTable.recalculate())
+      .then(() => $xeTable.$nextTick())
+      .then(() => $xeTable.recalculate(true))
       .then(() => {
-        if (expandColumn) {
-          updateRowExpandStyle($xeTable)
-          handleRowExpandScroll($xeTable)
-        }
+        updateRowOffsetTop($xeTable)
+        updateRowExpandStyle($xeTable)
+        handleRowExpandScroll($xeTable)
         return $xeTable.updateCellAreas()
       })
   },
@@ -7592,36 +7671,33 @@ const Methods = {
    * 手动清空展开行状态，数据会恢复成未展开的状态
    */
   clearRowExpand () {
-    const $xeTable = this
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+    const reactData = $xeTable as unknown as TableReactData
+    const internalData = $xeTable as unknown as TableInternalData
 
-    const { expandOpts, tableFullData } = this
+    const { tableFullData } = internalData
+    const expandOpts = $xeTable.computeExpandOpts
     const { reserve } = expandOpts
-    const expList = this.getRowExpandRecords()
-    this.rowExpandedMaps = {}
+    const expList = $xeTable.getRowExpandRecords()
+    reactData.rowExpandedMaps = {}
     if (reserve) {
-      tableFullData.forEach((row: any) => this.handleRowExpandReserve(row, false))
+      tableFullData.forEach((row) => handleRowExpandReserve($xeTable, row, false))
     }
-    return this.$nextTick().then(() => {
+    return $xeTable.$nextTick().then(() => {
       if (expList.length) {
-        this.recalculate()
+        return $xeTable.recalculate(true)
       }
-    }).then(() => $xeTable.updateCellAreas())
+    }).then(() => {
+      updateRowOffsetTop($xeTable)
+      updateRowExpandStyle($xeTable)
+      handleRowExpandScroll($xeTable)
+      return $xeTable.updateCellAreas()
+    })
   },
   clearRowExpandReserve () {
     this.rowExpandedReserveRowMap = {}
     return this.$nextTick()
   },
-  handleRowExpandReserve (row: any, expanded: any) {
-    const { rowExpandedReserveRowMap, expandOpts } = this
-    if (expandOpts.reserve) {
-      const rowid = getRowid(this, row)
-      if (expanded) {
-        rowExpandedReserveRowMap[rowid] = row
-      } else if (rowExpandedReserveRowMap[rowid]) {
-        delete rowExpandedReserveRowMap[rowid]
-      }
-    }
-  },
   getRowExpandRecords () {
     const rest: any[] = []
     XEUtils.each(this.rowExpandedMaps, item => {
@@ -7657,7 +7733,7 @@ const Methods = {
    * @param {Row} row 行对象
    */
   isTreeExpandLoaded (row: any) {
-    const $xeTable = this
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
 
     const { fullAllDataRowIdData } = this
     const rowRest = fullAllDataRowIdData[getRowid($xeTable, row)]
@@ -8523,43 +8599,70 @@ const Methods = {
     const reactData = $xeTable as unknown as TableReactData
     const internalData = $xeTable as unknown as TableInternalData
 
-    const { isGroup, scrollXLoad } = reactData
-    const { visibleColumn, scrollXStore, elemStore, tableWidth } = internalData
-    const tableHeader = $xeTable.$refs.refTableHeader
+    const { isGroup, scrollXLoad, overflowX, scrollXWidth } = reactData
+    const { visibleColumn, scrollXStore, elemStore, fullColumnIdData } = internalData
     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 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)
+      const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
+      const bodyTableElem = getRefElem(elemStore['main-body-table'])
+      const headerTableElem = getRefElem(elemStore['main-header-table'])
+      const footerTableElem = getRefElem(elemStore['main-footer-table'])
+
+      let xSpaceLeft = 0
+      const firstColumn = visibleColumn[scrollXStore.startIndex]
+      if (firstColumn) {
+        const colRest = fullColumnIdData[firstColumn.id] || {}
+        xSpaceLeft = colRest.oLeft
+      }
+
+      let clientWidth = 0
+      if (bodyScrollElem) {
+        clientWidth = bodyScrollElem.clientWidth
+      }
+      // 虚拟渲染
+      let isScrollXBig = false
+      let ySpaceWidth = scrollXWidth
+      if (scrollXWidth > maxXWidth) {
+        // 触右
+        if (bodyScrollElem && bodyTableElem && bodyScrollElem.scrollLeft + clientWidth >= maxXWidth) {
+          xSpaceLeft = maxXWidth - bodyTableElem.clientWidth
+        } else {
+          xSpaceLeft = (maxXWidth - clientWidth) * (xSpaceLeft / (scrollXWidth - clientWidth))
+        }
+        ySpaceWidth = maxXWidth
+        isScrollXBig = true
+      }
+
       let marginLeft = ''
-      if (scrollXLoad) {
-        marginLeft = `${leftSpaceWidth}px`
+      if (scrollXLoad && overflowX) {
+        marginLeft = `${xSpaceLeft}px`
       }
-      if (headerElem) {
-        headerElem.style.marginLeft = isGroup ? '' : marginLeft
+      if (headerTableElem) {
+        headerTableElem.style.marginLeft = isGroup ? '' : marginLeft
       }
-      bodyElem.style.marginLeft = marginLeft
-      if (footerElem) {
-        footerElem.style.marginLeft = marginLeft
+      if (bodyTableElem) {
+        bodyTableElem.style.marginLeft = marginLeft
       }
+      if (footerTableElem) {
+        footerTableElem.style.marginLeft = marginLeft
+      }
+
+      reactData.isScrollXBig = isScrollXBig
+
       const containerList = ['main']
       containerList.forEach(name => {
         const layoutList = ['header', 'body', 'footer']
         layoutList.forEach(layout => {
           const xSpaceElem = getRefElem(elemStore[`${name}-${layout}-xSpace`])
           if (xSpaceElem) {
-            xSpaceElem.style.width = scrollXLoad ? `${tableWidth}px` : ''
+            xSpaceElem.style.width = scrollXLoad ? `${ySpaceWidth}px` : ''
           }
         })
       })
       const scrollXSpaceEl = $xeTable.$refs.refScrollXSpaceElem as HTMLDivElement
       if (scrollXSpaceEl) {
-        scrollXSpaceEl.style.width = `${tableWidth}px`
+        scrollXSpaceEl.style.width = `${ySpaceWidth}px`
       }
       $xeTable.$nextTick(() => {
         updateStyle($xeTable)
@@ -8589,48 +8692,64 @@ const Methods = {
     const rowOpts = $xeTable.computeRowOpts
     const cellOpts = $xeTable.computeCellOpts
     const defaultRowHeight = $xeTable.computeDefaultRowHeight
+    const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
     const bodyTableElem = getRefElem(elemStore['main-body-table'])
     const containerList = ['main', 'left', 'right']
-    let topSpaceHeight = 0
-    let ySpaceHeight = 0
-
+    let ySpaceTop = 0
+    let scrollYHeight = 0
+    let isScrollYBig = false
     if (scrollYLoad) {
       const isCustomCellHeight = isResizeCellHeight || cellOpts.height || rowOpts.height
       if (!isCustomCellHeight && !expandColumn && isAllOverflow) {
-        ySpaceHeight = afterFullData.length * defaultRowHeight
-        topSpaceHeight = Math.max(0, startIndex * defaultRowHeight)
+        scrollYHeight = afterFullData.length * defaultRowHeight
+        if (scrollYHeight > maxYHeight) {
+          isScrollYBig = true
+        }
+        ySpaceTop = Math.max(0, startIndex * defaultRowHeight)
       } else {
-        for (let i = 0; i < afterFullData.length; i++) {
-          const row = afterFullData[i]
-          const rowid = getRowid($xeTable, row)
-          const rowRest = fullAllDataRowIdData[rowid] || {}
-          ySpaceHeight += rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight
-          // 是否展开行
-          if (expandColumn && rowExpandedMaps[rowid]) {
-            ySpaceHeight += rowRest.expandHeight || expandOpts.height || 0
-          }
+        const firstRow = afterFullData[startIndex]
+        let rowid = getRowid($xeTable, firstRow)
+        let rowRest = fullAllDataRowIdData[rowid] || {}
+        ySpaceTop = rowRest.oTop
+
+        const lastRow = afterFullData[afterFullData.length - 1]
+        rowid = getRowid($xeTable, lastRow)
+        rowRest = fullAllDataRowIdData[rowid] || {}
+        scrollYHeight = rowRest.oTop + (rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight)
+        // 是否展开行
+        if (expandColumn && rowExpandedMaps[rowid]) {
+          scrollYHeight += rowRest.expandHeight || expandOpts.height || 0
         }
-        for (let i = 0; i < startIndex; i++) {
-          const row = afterFullData[i]
-          const rowid = getRowid($xeTable, row)
-          const rowRest = fullAllDataRowIdData[rowid] || {}
-          topSpaceHeight += rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight
-          // 是否展开行
-          if (expandColumn && rowExpandedMaps[rowid]) {
-            topSpaceHeight += rowRest.expandHeight || expandOpts.height || 0
-          }
+        if (scrollYHeight > maxYHeight) {
+          isScrollYBig = true
         }
       }
     } else {
       if (bodyTableElem) {
-        ySpaceHeight = bodyTableElem.clientHeight
+        scrollYHeight = bodyTableElem.clientHeight
+      }
+    }
+    let clientHeight = 0
+    if (bodyScrollElem) {
+      clientHeight = bodyScrollElem.clientHeight
+    }
+    // 虚拟渲染
+    let ySpaceHeight = scrollYHeight
+    let scrollYTop = ySpaceTop
+    if (isScrollYBig) {
+      // 触底
+      if (bodyScrollElem && bodyTableElem && bodyScrollElem.scrollTop + clientHeight >= maxYHeight) {
+        scrollYTop = maxYHeight - bodyTableElem.clientHeight
+      } else {
+        scrollYTop = (maxYHeight - clientHeight) * (ySpaceTop / (scrollYHeight - clientHeight))
       }
+      ySpaceHeight = maxYHeight
     }
     containerList.forEach(name => {
       const layoutList = ['header', 'body', 'footer']
       const tableElem = getRefElem(elemStore[`${name}-body-table`])
       if (tableElem) {
-        tableElem.style.marginTop = topSpaceHeight ? `${topSpaceHeight}px` : ''
+        tableElem.style.marginTop = scrollYTop ? `${scrollYTop}px` : ''
       }
       layoutList.forEach(layout => {
         const ySpaceElem = getRefElem(elemStore[`${name}-${layout}-ySpace`])
@@ -8647,6 +8766,9 @@ const Methods = {
     if (rowExpandYSpaceEl) {
       rowExpandYSpaceEl.style.height = ySpaceHeight ? `${ySpaceHeight}px` : ''
     }
+    reactData.scrollYTop = scrollYTop
+    reactData.scrollYHeight = scrollYHeight
+    reactData.isScrollYBig = isScrollYBig
     return $xeTable.$nextTick().then(() => {
       updateStyle($xeTable)
     })