vxe-table 4.11.16 → 4.12.0-beta.1

package/packages/table/src/table.ts

@@ -24,6 +24,8 @@ import type { VxeGridConstructor, VxeGridPrivateMethods, VxeTableConstructor, Ta
 const { getConfig, getIcon, getI18n, renderer, formats, createEvent, globalResize, interceptor, hooks, globalEvents, GLOBAL_EVENT_KEYS, useFns, renderEmptyElement } = VxeUI
 
 const customStorageKey = 'VXE_CUSTOM_STORE'
+const maxYHeight = 5e6
+const maxXWidth = 5e6
 
 export default defineComponent({
   name: 'VxeTable',
@@ -939,27 +941,41 @@ export default defineComponent({
     }
 
     const handleVirtualXVisible = () => {
-      const { elemStore, visibleColumn } = internalData
+      const { isScrollXBig, scrollXWidth } = reactData
+      const { elemStore, visibleColumn, fullColumnIdData } = internalData
       const leftFixedWidth = computeLeftFixedWidth.value
       const rightFixedWidth = computeRightFixedWidth.value
       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) }
@@ -1003,43 +1019,49 @@ export default defineComponent({
       return Math.max(18, rowHeight)
     }
 
-    const handleVirtualYVisible = (currScrollTop?: number) => {
-      const { isAllOverflow, expandColumn, rowExpandedMaps } = reactData
+    const handleVirtualYVisible = () => {
+      const { isAllOverflow, expandColumn, isScrollYBig, scrollYHeight } = reactData
       const { elemStore, isResizeCellHeight, afterFullData, fullAllDataRowIdData } = internalData
-      const expandOpts = computeExpandOpts.value
       const rowOpts = computeRowOpts.value
       const cellOpts = computeCellOpts.value
       const defaultRowHeight = computeDefaultRowHeight.value
       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
             }
           }
         }
@@ -1426,7 +1448,7 @@ export default defineComponent({
       if (!xHandleEl) {
         return
       }
-      let tableWidth = 0
+      let tWidth = 0
       const minCellWidth = 40 // 列宽最少限制 40px
       const bodyWidth = bodyElem.clientWidth
       let remainWidth = bodyWidth
@@ -1437,51 +1459,51 @@ export default defineComponent({
       // 最小宽
       pxMinList.forEach((column) => {
         const minWidth = XEUtils.toInteger(column.minWidth)
-        tableWidth += minWidth
+        tWidth += minWidth
         column.renderWidth = minWidth
       })
       // 最小自适应
       autoMinList.forEach((column) => {
         const caWidth = Math.max(60, XEUtils.toInteger(column.renderAutoWidth))
-        tableWidth += caWidth
+        tWidth += caWidth
         column.renderWidth = caWidth
       })
       // 最小百分比
       scaleMinList.forEach((column) => {
         const smWidth = Math.floor(XEUtils.toInteger(column.minWidth) * meanWidth)
-        tableWidth += smWidth
+        tWidth += smWidth
         column.renderWidth = smWidth
       })
       // 固定百分比
       scaleList.forEach((column) => {
         const sfWidth = Math.floor(XEUtils.toInteger(column.width) * meanWidth)
-        tableWidth += sfWidth
+        tWidth += sfWidth
         column.renderWidth = sfWidth
       })
       // 固定宽
       pxList.forEach((column) => {
         const pWidth = XEUtils.toInteger(column.width)
-        tableWidth += pWidth
+        tWidth += pWidth
         column.renderWidth = pWidth
       })
       // 自适应宽
       autoList.forEach((column) => {
         const aWidth = Math.max(60, XEUtils.toInteger(column.renderAutoWidth))
-        tableWidth += aWidth
+        tWidth += aWidth
         column.renderWidth = aWidth
       })
       // 调整了列宽
       resizeList.forEach((column) => {
         const reWidth = XEUtils.toInteger(column.resizeWidth)
-        tableWidth += reWidth
+        tWidth += reWidth
         column.renderWidth = reWidth
       })
-      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
           })
         }
@@ -1492,7 +1514,7 @@ export default defineComponent({
       remainList.forEach((column) => {
         const width = Math.max(meanWidth, minCellWidth)
         column.renderWidth = width
-        tableWidth += width
+        tWidth += width
       })
       if (fit) {
         /**
@@ -1502,13 +1524,13 @@ export default defineComponent({
         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
           }
         }
       }
@@ -1516,18 +1538,19 @@ export default defineComponent({
       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()
       updateHeight()
       reactData.parentHeight = Math.max(internalData.headerHeight + footerHeight + 20, $xeTable.getParentHeight())
       if (overflowX) {
@@ -1832,8 +1855,8 @@ export default defineComponent({
 
     const updateStyle = () => {
       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 = refElem.value
       if (!el) {
         return
@@ -1873,9 +1896,10 @@ export default defineComponent({
         bodyHeight = Math.max(bodyMinHeight, bodyHeight)
       }
 
+      const scrollbarXToTop = computeScrollbarXToTop.value
+
       const xLeftCornerEl = refScrollXLeftCornerElem.value
       const xRightCornerEl = refScrollXRightCornerElem.value
-      const scrollbarXToTop = computeScrollbarXToTop.value
       const scrollXVirtualEl = refScrollXVirtualElem.value
       if (scrollXVirtualEl) {
         scrollXVirtualEl.style.height = `${osbHeight}px`
@@ -1970,7 +1994,7 @@ export default defineComponent({
             if (fixedType) {
               if (isGroup) {
                 if (wrapperElem) {
-                  wrapperElem.style.width = tableWidth ? `${tableWidth}px` : ''
+                  wrapperElem.style.width = scrollXWidth ? `${scrollXWidth}px` : ''
                 }
               } else {
                 if (isOptimizeMode) {
@@ -1979,7 +2003,7 @@ export default defineComponent({
                   }
                 } else {
                   if (wrapperElem) {
-                    wrapperElem.style.width = tableWidth ? `${tableWidth}px` : ''
+                    wrapperElem.style.width = scrollXWidth ? `${scrollXWidth}px` : ''
                   }
                 }
               }
@@ -2063,7 +2087,7 @@ export default defineComponent({
                 }
               } else {
                 if (wrapperElem) {
-                  wrapperElem.style.width = tableWidth ? `${tableWidth}px` : ''
+                  wrapperElem.style.width = scrollXWidth ? `${scrollXWidth}px` : ''
                 }
               }
             }
@@ -2105,7 +2129,7 @@ export default defineComponent({
                 }
               } else {
                 if (wrapperElem) {
-                  wrapperElem.style.width = tableWidth ? `${tableWidth}px` : ''
+                  wrapperElem.style.width = scrollXWidth ? `${scrollXWidth}px` : ''
                 }
               }
             }
@@ -2727,6 +2751,9 @@ export default defineComponent({
       calcCellWidth()
       autoCellWidth()
       updateStyle()
+      if (reFull) {
+        updateRowOffsetTop()
+      }
       updateRowExpandStyle()
       return computeScrollLoad().then(() => {
         if (reFull === true) {
@@ -2734,6 +2761,9 @@ export default defineComponent({
           calcCellWidth()
           autoCellWidth()
           updateStyle()
+          if (reFull) {
+            updateRowOffsetTop()
+          }
           updateRowExpandStyle()
           return computeScrollLoad()
         }
@@ -2875,6 +2905,7 @@ export default defineComponent({
               }
               reactData.isRowLoading = false
               calcCellHeight()
+              updateRowOffsetTop()
               // 是否变更虚拟滚动
               if (oldScrollYLoad === sYLoad) {
                 restoreScrollLocation($xeTable, targetScrollLeft, targetScrollTop)
@@ -2939,16 +2970,16 @@ export default defineComponent({
     }
 
     const loadScrollXData = () => {
-      const { mergeList, mergeFooterList } = reactData
+      const { mergeList, mergeFooterList, isScrollXBig } = reactData
       const { scrollXStore } = internalData
       const { preloadSize, startIndex, endIndex, offsetSize } = scrollXStore
       const { toVisibleIndex, visibleSize } = handleVirtualXVisible()
       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) {
@@ -3085,6 +3116,7 @@ export default defineComponent({
       internalData.visibleColumn = visibleColumn
       handleTableColumn()
       if (isReset) {
+        updateColumnOffsetLeft()
         return $xeTable.updateFooter().then(() => {
           return $xeTable.recalculate()
         }).then(() => {
@@ -3260,18 +3292,18 @@ export default defineComponent({
     /**
      * 纵向 Y 可视渲染处理
      */
-    const loadScrollYData = (scrollTop?: number) => {
-      const { mergeList, isAllOverflow } = reactData
+    const loadScrollYData = () => {
+      const { mergeList, isAllOverflow, isScrollYBig } = reactData
       const { scrollYStore } = internalData
       const { preloadSize, startIndex, endIndex, offsetSize } = scrollYStore
       const autoOffsetYSize = isAllOverflow ? offsetSize : offsetSize + 1
-      const { toVisibleIndex, visibleSize } = handleVirtualYVisible(scrollTop)
+      const { toVisibleIndex, visibleSize } = handleVirtualYVisible()
       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) {
@@ -3373,6 +3405,7 @@ export default defineComponent({
             $xeTable.updateScrollYSpace()
           })
         }
+        updateRowExpandStyle()
         $xeTable.updateCellAreas()
       }, 200)
     }
@@ -3463,47 +3496,76 @@ export default defineComponent({
       })
     }
 
+    const updateColumnOffsetLeft = () => {
+      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
+      }
+    }
+
+    const updateRowOffsetTop = () => {
+      const { expandColumn, rowExpandedMaps } = reactData
+      const { afterFullData, fullAllDataRowIdData } = internalData
+      const expandOpts = computeExpandOpts.value
+      const rowOpts = computeRowOpts.value
+      const cellOpts = computeCellOpts.value
+      const defaultRowHeight = computeDefaultRowHeight.value
+      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
+        }
+      }
+    }
+
     const updateRowExpandStyle = () => {
-      const { expandColumn, scrollYLoad, rowExpandedMaps } = reactData
+      const { expandColumn, scrollYLoad, scrollYTop, isScrollYBig } = reactData
       const expandOpts = computeExpandOpts.value
       const rowOpts = computeRowOpts.value
       const cellOpts = computeCellOpts.value
       const defaultRowHeight = computeDefaultRowHeight.value
       const { mode } = expandOpts
       if (expandColumn && mode === 'fixed') {
-        const { elemStore, afterFullData, fullAllDataRowIdData } = internalData
+        const { elemStore, fullAllDataRowIdData } = internalData
         const rowExpandEl = refRowExpandElem.value
         const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
         if (rowExpandEl && bodyScrollElem) {
           let isUpdateHeight = false
-          if (scrollYLoad) {
-            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
-              }
-            }
-          }
           XEUtils.arrayEach(rowExpandEl.children, reEl => {
             const expandEl = reEl as HTMLDivElement
             const rowid = expandEl.getAttribute('rowid') || ''
             const rowRest = fullAllDataRowIdData[rowid]
             if (rowRest) {
               const expandHeight = expandEl.offsetHeight + 1
+              const trEl = bodyScrollElem.querySelector(`.vxe-body--row[rowid="${rowid}"]`) as HTMLTableCellElement
+              let offsetTop = 0
               if (scrollYLoad) {
-                expandEl.style.top = toCssUnit(rowRest.oTop + (rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight))
+                if (isScrollYBig && trEl) {
+                  offsetTop = trEl.offsetTop + trEl.offsetHeight
+                } else {
+                  offsetTop = rowRest.oTop + (rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight)
+                }
               } else {
-                const trEl = bodyScrollElem.querySelector(`.vxe-body--row[rowid="${rowid}"]`) as HTMLTableCellElement
                 if (trEl) {
-                  expandEl.style.top = toCssUnit(trEl.offsetTop + trEl.offsetHeight)
+                  offsetTop = trEl.offsetTop + trEl.offsetHeight
                 }
               }
+              if (isScrollYBig) {
+                offsetTop += scrollYTop
+              }
+              expandEl.style.top = toCssUnit(offsetTop)
+
               if (!isUpdateHeight) {
                 if (rowRest.expandHeight !== expandHeight) {
                   isUpdateHeight = true
@@ -3514,6 +3576,9 @@ export default defineComponent({
           })
           if (isUpdateHeight) {
             reactData.rowExpandHeightFlag++
+            nextTick(() => {
+              updateRowOffsetTop()
+            })
           }
         }
       }
@@ -4422,6 +4487,7 @@ export default defineComponent({
           }
         }
         return nextTick().then(() => {
+          updateRowOffsetTop()
           return { status }
         })
       },
@@ -5289,12 +5355,12 @@ export default defineComponent({
         }
         reactData.rowExpandedMaps = rExpandedMaps
         return Promise.all(lazyRests)
-          .then(() => $xeTable.recalculate())
+          .then(() => nextTick())
+          .then(() => $xeTable.recalculate(true))
           .then(() => {
-            if (expandColumn) {
-              updateRowExpandStyle()
-              handleRowExpandScroll()
-            }
+            updateRowOffsetTop()
+            updateRowExpandStyle()
+            handleRowExpandScroll()
             return $xeTable.updateCellAreas()
           })
       },
@@ -5321,16 +5387,21 @@ export default defineComponent({
         const { tableFullData } = internalData
         const expandOpts = computeExpandOpts.value
         const { reserve } = expandOpts
-        const expList = tableMethods.getRowExpandRecords()
+        const expList = $xeTable.getRowExpandRecords()
         reactData.rowExpandedMaps = {}
         if (reserve) {
           tableFullData.forEach((row) => handleRowExpandReserve(row, false))
         }
         return nextTick().then(() => {
           if (expList.length) {
-            tableMethods.recalculate()
+            return $xeTable.recalculate(true)
           }
-        }).then(() => $xeTable.updateCellAreas())
+        }).then(() => {
+          updateRowOffsetTop()
+          updateRowExpandStyle()
+          handleRowExpandScroll()
+          return $xeTable.updateCellAreas()
+        })
       },
       clearRowExpandReserve () {
         internalData.rowExpandedReserveRowMap = {}
@@ -6524,8 +6595,8 @@ export default defineComponent({
       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 = refDragRowLineElem.value
         if (rdLineEl) {
@@ -6534,14 +6605,14 @@ export default defineComponent({
             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 {
@@ -6566,7 +6637,7 @@ export default defineComponent({
               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
             }
@@ -6577,7 +6648,7 @@ export default defineComponent({
             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')
@@ -6965,7 +7036,7 @@ export default defineComponent({
           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
@@ -6973,8 +7044,8 @@ export default defineComponent({
             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`
@@ -7110,7 +7181,7 @@ export default defineComponent({
         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) {
@@ -7120,15 +7191,15 @@ export default defineComponent({
           }
           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)
@@ -7161,6 +7232,7 @@ export default defineComponent({
             } else {
               rowRest.resizeHeight = resizeHeight
               handleUpdateRowResize(evnt, resizeParams)
+              updateRowOffsetTop()
             }
           }
           removeClass(tableEl, 'row-drag--resize')
@@ -7388,8 +7460,8 @@ export default defineComponent({
         const { treeConfig } = props
         const { selectCheckboxMaps, treeIndeterminateMaps } = reactData
         const checkboxOpts = computeCheckboxOpts.value
-        const { checkField, checkMethod } = checkboxOpts
-        const { afterFullData, afterTreeFullData } = internalData
+        const { checkField, checkMethod, showReserveStatus } = checkboxOpts
+        const { afterFullData, afterTreeFullData, checkboxReserveRowMap } = internalData
 
         let sLen = 0 // 已选
         let hLen = 0 // 半选
@@ -7427,7 +7499,12 @@ export default defineComponent({
           })
 
         const isSelected = rootList.length > 0 ? (vLen > 0 ? (sLen >= vLen) : (sLen >= rootList.length)) : false
-        const halfSelect = !isSelected && (sLen >= 1 || hLen >= 1)
+        let halfSelect = !isSelected && (sLen >= 1 || hLen >= 1)
+
+        // 如果复选框启用保留记录，当保留数据存在时显示半选
+        if (!isSelected && !halfSelect && showReserveStatus) {
+          halfSelect = !XEUtils.isEmpty(checkboxReserveRowMap)
+        }
 
         reactData.isAllSelected = isSelected
         reactData.isIndeterminate = halfSelect
@@ -8604,21 +8681,21 @@ export default defineComponent({
           const scrollTargetEl = xHandleEl || tableBodyElem
           if (scrollTargetEl) {
             const wrapperRect = el.getBoundingClientRect()
-            const tableWidth = el.clientWidth
+            const tableWrapperWidth = el.clientWidth
             const leftContainerElem = refLeftContainer.value
             const leftContainerWidth = leftContainerElem ? leftContainerElem.clientWidth : 0
             const rightContainerElem = refRightContainer.value
             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)
             }
           }
@@ -9118,43 +9195,70 @@ export default defineComponent({
       updateScrollYStatus,
       // 更新横向 X 可视渲染上下剩余空间大小
       updateScrollXSpace () {
-        const { isGroup, scrollXLoad, overflowX } = reactData
-        const { visibleColumn, scrollXStore, elemStore, tableWidth } = internalData
-        const tableHeader = refTableHeader.value
+        const { isGroup, scrollXLoad, overflowX, scrollXWidth } = reactData
+        const { visibleColumn, scrollXStore, elemStore, fullColumnIdData } = internalData
         const tableBody = refTableBody.value
-        const tableFooter = refTableFooter.value
         const tableBodyElem = tableBody ? tableBody.$el as HTMLDivElement : null
         if (tableBodyElem) {
-          const tableHeaderElem = tableHeader ? tableHeader.$el as HTMLDivElement : null
-          const tableFooterElem = tableFooter ? tableFooter.$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 && overflowX) {
-            marginLeft = `${leftSpaceWidth}px`
+            marginLeft = `${xSpaceLeft}px`
+          }
+          if (headerTableElem) {
+            headerTableElem.style.marginLeft = isGroup ? '' : marginLeft
           }
-          if (headerElem) {
-            headerElem.style.marginLeft = isGroup ? '' : marginLeft
+          if (bodyTableElem) {
+            bodyTableElem.style.marginLeft = marginLeft
           }
-          bodyElem.style.marginLeft = marginLeft
-          if (footerElem) {
-            footerElem.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 = refScrollXSpaceElem.value
           if (scrollXSpaceEl) {
-            scrollXSpaceEl.style.width = `${tableWidth}px`
+            scrollXSpaceEl.style.width = `${ySpaceWidth}px`
           }
           nextTick(() => {
             updateStyle()
@@ -9170,48 +9274,64 @@ export default defineComponent({
         const rowOpts = computeRowOpts.value
         const cellOpts = computeCellOpts.value
         const defaultRowHeight = computeDefaultRowHeight.value
+        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`])
@@ -9228,6 +9348,9 @@ export default defineComponent({
         if (rowExpandYSpaceEl) {
           rowExpandYSpaceEl.style.height = ySpaceHeight ? `${ySpaceHeight}px` : ''
         }
+        reactData.scrollYTop = scrollYTop
+        reactData.scrollYHeight = scrollYHeight
+        reactData.isScrollYBig = isScrollYBig
         return nextTick().then(() => {
           updateStyle()
         })
@@ -10192,10 +10315,10 @@ export default defineComponent({
         }
         // 检查导入导出类型，如果自定义导入导出方法，则不校验类型
         if (importConfig && importOpts.types && !importOpts.importMethod && !XEUtils.includeArrays(XEUtils.keys(importOpts._typeMaps), importOpts.types)) {
-          warnLog('vxe.error.errProp', [`export-config.types=${importOpts.types.join(',')}`, importOpts.types.filter((type: string) => XEUtils.includes(XEUtils.keys(importOpts._typeMaps), type)).join(',') || XEUtils.keys(importOpts._typeMaps).join(',')])
+          warnLog('vxe.error.errProp', [`export-config.types=${importOpts.types.join(',')}`, importOpts.types.filter((type) => XEUtils.includes(XEUtils.keys(importOpts._typeMaps), type)).join(',') || XEUtils.keys(importOpts._typeMaps).join(',')])
         }
         if (exportConfig && exportOpts.types && !exportOpts.exportMethod && !XEUtils.includeArrays(XEUtils.keys(exportOpts._typeMaps), exportOpts.types)) {
-          warnLog('vxe.error.errProp', [`export-config.types=${exportOpts.types.join(',')}`, exportOpts.types.filter((type: string) => XEUtils.includes(XEUtils.keys(exportOpts._typeMaps), type)).join(',') || XEUtils.keys(exportOpts._typeMaps).join(',')])
+          warnLog('vxe.error.errProp', [`export-config.types=${exportOpts.types.join(',')}`, exportOpts.types.filter((type) => XEUtils.includes(XEUtils.keys(exportOpts._typeMaps), type)).join(',') || XEUtils.keys(exportOpts._typeMaps).join(',')])
         }
 
         if (!props.id) {
@@ -10209,7 +10332,7 @@ export default defineComponent({
         if (rowOpts.height && !props.showOverflow) {
           warnLog('vxe.error.notProp', ['table.show-overflow'])
         }
-        if (!($xeTable as any).handleMousedownCellAreaEvent) {
+        if (!$xeTable.handleCellAreaMousedownEvent) {
           if (props.areaConfig) {
             warnLog('vxe.error.notProp', ['area-config'])
           }
@@ -10225,7 +10348,7 @@ export default defineComponent({
           }
         }
         if (treeConfig && rowOpts.drag && !treeOpts.transform) {
-          warnLog('vxe.error.notSupportProp', ['column-config.drag', 'tree-config.transform=false', 'tree-config.transform=true'])
+          errLog('vxe.error.notSupportProp', ['column-config.drag', 'tree-config.transform=false', 'tree-config.transform=true'])
         }
         if (props.dragConfig) {
           warnLog('vxe.error.delProp', ['drag-config', 'row-drag-config'])