vxe-table 4.10.6-beta.3 → 4.10.6-beta.30

package/packages/table/src/table.ts

@@ -1,6 +1,6 @@
 import { defineComponent, h, ComponentPublicInstance, reactive, ref, Ref, provide, inject, nextTick, onActivated, onDeactivated, onBeforeUnmount, onUnmounted, watch, computed, onMounted } from 'vue'
 import XEUtils from 'xe-utils'
-import { browse, initTpImg, getTpImg, isPx, isScale, hasClass, addClass, removeClass, getEventTargetNode, getPaddingTopBottomSize, setScrollTop, setScrollLeft } from '../../ui/src/dom'
+import { browse, initTpImg, getTpImg, isPx, isScale, hasClass, addClass, removeClass, getEventTargetNode, getPaddingTopBottomSize, getOffsetPos, 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'
@@ -43,7 +43,6 @@ export default defineComponent({
     const { computeSize } = useFns.useSize(props)
 
     const reactData = reactive<TableReactData>({
-      isCalcColumn: false,
       // 低性能的静态列
       staticColumns: [],
       // 渲染的列分组
@@ -258,7 +257,8 @@ export default defineComponent({
 
       scrollVMLoading: false,
 
-      isCalcCellHeight: 0,
+      calcCellHeightFlag: 0,
+      resizeHeightFlag: 0,
 
       isCustomStatus: false,
 
@@ -268,7 +268,7 @@ export default defineComponent({
       dragCol: null,
       dragTipText: '',
 
-      _isResize: false,
+      isDragResize: false,
       isLoading: false
     })
 
@@ -344,10 +344,6 @@ export default defineComponent({
       fullDataRowIdData: {},
       fullColumnIdData: {},
       fullColumnFieldData: {},
-      // 列选取状态
-      columnStatusMaps: {},
-      // 行选取状态
-      rowStatusMaps: {},
       // prevDragRow: null,
 
       inited: false,
@@ -380,8 +376,8 @@ export default defineComponent({
 
     const refLeftContainer = ref() as Ref<HTMLDivElement>
     const refRightContainer = ref() as Ref<HTMLDivElement>
-    const refCellResizeBar = ref() as Ref<HTMLDivElement>
-    const refCellResizeTip = ref() as Ref<HTMLDivElement>
+    const refColResizeBar = ref() as Ref<HTMLDivElement>
+    const refRowResizeBar = ref() as Ref<HTMLDivElement>
     const refEmptyPlaceholder = ref() as Ref<HTMLDivElement>
 
     const refDragTipElem = ref<HTMLDivElement>()
@@ -391,9 +387,12 @@ export default defineComponent({
     const refScrollXVirtualElem = ref<HTMLDivElement>()
     const refScrollYVirtualElem = ref<HTMLDivElement>()
     const refScrollXHandleElem = ref<HTMLDivElement>()
+    const refScrollXLeftCornerElem = ref<HTMLDivElement>()
     const refScrollXRightCornerElem = ref<HTMLDivElement>()
     const refScrollYHandleElem = ref<HTMLDivElement>()
     const refScrollYTopCornerElem = ref<HTMLDivElement>()
+    const refScrollXWrapperElem = ref<HTMLDivElement>()
+    const refScrollYWrapperElem = ref<HTMLDivElement>()
     const refScrollYBottomCornerElem = ref<HTMLDivElement>()
     const refScrollXSpaceElem = ref<HTMLDivElement>()
     const refScrollYSpaceElem = ref<HTMLDivElement>()
@@ -442,17 +441,27 @@ export default defineComponent({
     })
 
     const computeVirtualXOpts = computed(() => {
-      return Object.assign({}, getConfig().table.scrollX, getConfig().table.virtualXConfig, props.scrollX, props.virtualXConfig)
+      return Object.assign({}, getConfig().table.scrollX, getConfig().table.virtualXConfig, props.scrollX, props.virtualXConfig) as VxeTablePropTypes.VirtualXConfig
     })
 
     const computeVirtualYOpts = computed(() => {
-      return Object.assign({}, getConfig().table.scrollY, getConfig().table.virtualYConfig, props.scrollY, props.virtualYConfig)
+      return Object.assign({}, getConfig().table.scrollY, getConfig().table.virtualYConfig, props.scrollY, props.virtualYConfig) as VxeTablePropTypes.VirtualYConfig
     })
 
     const computeScrollbarOpts = computed(() => {
       return Object.assign({}, getConfig().table.scrollbarConfig, props.scrollbarConfig)
     })
 
+    const computeScrollbarXToTop = computed(() => {
+      const scrollbarOpts = computeScrollbarOpts.value
+      return !!(scrollbarOpts.x && scrollbarOpts.x.position === 'top')
+    })
+
+    const computeScrollbarYToLeft = computed(() => {
+      const scrollbarOpts = computeScrollbarOpts.value
+      return !!(scrollbarOpts.y && scrollbarOpts.y.position === 'left')
+    })
+
     const computeScrollYThreshold = computed(() => {
       const sYOpts = computeSYOpts.value
       const { threshold } = sYOpts
@@ -474,7 +483,7 @@ export default defineComponent({
     const computeDefaultRowHeight = computed(() => {
       const vSize = computeSize.value
       const rowHeightMaps = computeRowHeightMaps.value
-      return rowHeightMaps[vSize || 'default']
+      return rowHeightMaps[vSize || 'default'] || 18
     })
 
     const computeColumnOpts = computed(() => {
@@ -482,7 +491,15 @@ export default defineComponent({
     })
 
     const computeCellOpts = computed(() => {
-      return Object.assign({}, getConfig().table.cellConfig, props.cellConfig) as VxeTablePropTypes.CellConfig
+      return Object.assign({}, getConfig().table.cellConfig, props.cellConfig)
+    })
+
+    const computeHeaderCellOpts = computed(() => {
+      return Object.assign({}, getConfig().table.headerCellConfig, props.headerCellConfig)
+    })
+
+    const computeFooterCellOpts = computed(() => {
+      return Object.assign({}, getConfig().table.footerCellConfig, props.footerCellConfig)
     })
 
     const computeRowOpts = computed(() => {
@@ -521,6 +538,17 @@ export default defineComponent({
       return Object.assign({}, getConfig().tooltip, getConfig().table.tooltipConfig, props.tooltipConfig)
     })
 
+    const computeTableTipConfig = computed(() => {
+      const { tooltipStore } = reactData
+      const tooltipOpts = computeTooltipOpts.value
+      return Object.assign({}, tooltipOpts, tooltipStore.currOpts)
+    })
+
+    const computeValidTipConfig = computed(() => {
+      const tooltipOpts = computeTooltipOpts.value
+      return Object.assign({}, tooltipOpts)
+    })
+
     const computeEditOpts = computed(() => {
       return Object.assign({}, getConfig().table.editConfig, props.editConfig) as VxeTablePropTypes.EditOpts
     })
@@ -742,8 +770,8 @@ export default defineComponent({
       refTableRightFooter,
       refLeftContainer,
       refRightContainer,
-      refCellResizeBar,
-      refCellResizeTip,
+      refColResizeBar,
+      refRowResizeBar,
       refScrollXVirtualElem,
       refScrollYVirtualElem,
       refScrollXHandleElem,
@@ -759,11 +787,15 @@ export default defineComponent({
       computeVirtualXOpts,
       computeVirtualYOpts,
       computeScrollbarOpts,
+      computeScrollbarXToTop,
+      computeScrollbarYToLeft,
       computeColumnOpts,
       computeScrollXThreshold,
       computeScrollYThreshold,
       computeDefaultRowHeight,
       computeCellOpts,
+      computeHeaderCellOpts,
+      computeFooterCellOpts,
       computeRowOpts,
       computeRowDragOpts,
       computeColumnDragOpts,
@@ -905,49 +937,58 @@ export default defineComponent({
     }
 
     const computeRowHeight = () => {
+      const { isAllOverflow } = reactData
       const tableHeader = refTableHeader.value
       const tableBody = refTableBody.value
       const tableBodyElem = tableBody ? tableBody.$el as HTMLDivElement : null
       const defaultRowHeight = computeDefaultRowHeight.value
       let rowHeight = 0
-      if (tableBodyElem) {
-        const tableHeaderElem = tableHeader ? tableHeader.$el as HTMLDivElement : null
-        let firstTrElem
-        firstTrElem = tableBodyElem.querySelector('tr')
-        if (!firstTrElem && tableHeaderElem) {
-          firstTrElem = tableHeaderElem.querySelector('tr')
+      if (isAllOverflow) {
+        if (tableBodyElem) {
+          const tableHeaderElem = tableHeader ? tableHeader.$el as HTMLDivElement : null
+          let firstTrElem
+          firstTrElem = tableBodyElem.querySelector('tr')
+          if (!firstTrElem && tableHeaderElem) {
+            firstTrElem = tableHeaderElem.querySelector('tr')
+          }
+          if (firstTrElem) {
+            rowHeight = firstTrElem.clientHeight
+          }
         }
-        if (firstTrElem) {
-          rowHeight = firstTrElem.clientHeight
+        if (!rowHeight) {
+          rowHeight = defaultRowHeight
         }
-      }
-      if (!rowHeight) {
+      } else {
         rowHeight = defaultRowHeight
       }
       // 最低支持 18px 行高
       return Math.max(18, rowHeight)
     }
 
-    const handleVirtualYVisible = () => {
-      const { showOverflow } = props
-      const { rowHeight } = reactData
-      const { elemStore, afterFullData, fullAllDataRowIdData } = internalData
+    const handleVirtualYVisible = (currScrollTop?: number) => {
+      const { isAllOverflow } = reactData
+      const { elemStore, isResizeCellHeight, afterFullData, fullAllDataRowIdData } = internalData
+      const rowOpts = computeRowOpts.value
+      const cellOpts = computeCellOpts.value
+      const defaultRowHeight = computeDefaultRowHeight.value
       const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
       if (bodyScrollElem) {
-        const { scrollTop, clientHeight } = bodyScrollElem
+        const clientHeight = bodyScrollElem.clientHeight
+        const scrollTop = XEUtils.isNumber(currScrollTop) ? currScrollTop : bodyScrollElem.scrollTop
         const endHeight = scrollTop + clientHeight
         let toVisibleIndex = -1
         let offsetTop = 0
         let visibleSize = 0
-        if (showOverflow) {
-          toVisibleIndex = Math.floor(scrollTop / rowHeight)
-          visibleSize = Math.ceil(clientHeight / rowHeight) + 1
+        const isCustomCellHeight = isResizeCellHeight || cellOpts.height || rowOpts.height
+        if (!isCustomCellHeight && isAllOverflow) {
+          toVisibleIndex = Math.floor(scrollTop / defaultRowHeight)
+          visibleSize = Math.ceil(clientHeight / defaultRowHeight) + 1
         } else {
           for (let rIndex = 0, rLen = afterFullData.length; rIndex < rLen; rIndex++) {
             const row = afterFullData[rIndex]
             const rowid = getRowid($xeTable, row)
-            const rowRest = fullAllDataRowIdData[rowid]
-            offsetTop += rowRest ? (rowRest.height || rowHeight) : rowHeight
+            const rowRest = fullAllDataRowIdData[rowid] || {}
+            offsetTop += rowRest.resizeHeight || rowRest.height || cellOpts.height || rowOpts.height || defaultRowHeight
             if (toVisibleIndex === -1 && scrollTop < offsetTop) {
               toVisibleIndex = rIndex
             }
@@ -1192,7 +1233,7 @@ export default defineComponent({
           }
           fullColumnFieldData[field] = rest
         } else {
-          if (storage || (columnOpts.drag && (isCrossDrag || isSelfToChildDrag))) {
+          if ((storage && !type) || (columnOpts.drag && (isCrossDrag || isSelfToChildDrag))) {
             errLog('vxe.error.reqProp', [`${column.getTitle() || type || ''} -> column.field`])
           }
         }
@@ -1285,55 +1326,39 @@ export default defineComponent({
     }
 
     const calcColumnAutoWidth = (column: VxeTableDefines.ColumnInfo, wrapperEl: HTMLDivElement) => {
-      const cellElList = wrapperEl.querySelectorAll(`.vxe-header--column.${column.id}>.vxe-cell,.vxe-body--column.${column.id}>.vxe-cell,.vxe-footer--column.${column.id}>.vxe-cell`)
-      const firstCellEl = cellElList[0]
-      let paddingSize = 0
-      if (firstCellEl) {
-        const cellStyle = getComputedStyle(firstCellEl)
-        paddingSize = Math.floor(XEUtils.toNumber(cellStyle.paddingLeft) + XEUtils.toNumber(cellStyle.paddingRight)) + 2
-      }
-      let colWidth = column.renderAutoWidth - paddingSize
-      XEUtils.arrayEach(cellElList, (itemEl) => {
-        const cellEl = itemEl as HTMLElement
-        const thElem = cellEl.parentElement as HTMLElement
-        let titleWidth = 0
-        if (`${thElem.tagName}`.toLowerCase() === 'th') {
-          XEUtils.arrayEach(cellEl.children, (btnEl) => {
-            titleWidth += (btnEl as HTMLElement).offsetWidth + 1
-          })
-        } else {
-          const labelEl = cellEl.firstElementChild as HTMLElement
-          if (labelEl) {
-            titleWidth = labelEl.offsetWidth
-          }
-        }
-        if (titleWidth) {
-          colWidth = Math.max(colWidth, Math.ceil(titleWidth) + 4)
-        }
-      })
-      return colWidth + paddingSize
+      const cellElemList = wrapperEl.querySelectorAll(`.vxe-cell--wrapper[colid="${column.id}"]`)
+      let leftRightPadding = 0
+      const firstCellEl = cellElemList[0]
+      if (firstCellEl && firstCellEl.parentElement) {
+        const cellStyle = getComputedStyle(firstCellEl.parentElement)
+        leftRightPadding = Math.ceil(XEUtils.toNumber(cellStyle.paddingLeft) + XEUtils.toNumber(cellStyle.paddingRight))
+      }
+      let colWidth = column.renderAutoWidth - leftRightPadding
+      for (let i = 0; i < cellElemList.length; i++) {
+        const celEl = cellElemList[i] as HTMLDivElement
+        colWidth = Math.max(colWidth, celEl ? Math.ceil(celEl.scrollWidth) + 4 : 0)
+      }
+      return colWidth + leftRightPadding
     }
 
     const calcCellWidth = () => {
       const autoWidthColumnList = computeAutoWidthColumnList.value
-      reactData.isCalcColumn = true
-      return nextTick().then(() => {
-        const { fullColumnIdData } = internalData
-        const el = refElem.value
-        if (el) {
-          autoWidthColumnList.forEach(column => {
-            const colid = column.id
-            const colRest = fullColumnIdData[colid]
-            const colWidth = calcColumnAutoWidth(column, el)
-            if (colRest) {
-              colRest.width = Math.max(colWidth, colRest.width)
-            }
-            column.renderAutoWidth = colWidth
-          })
-          $xeTable.analyColumnWidth()
-        }
-        reactData.isCalcColumn = false
-      })
+      const { fullColumnIdData } = internalData
+      const el = refElem.value
+      if (el) {
+        el.setAttribute('data-calc-col', 'Y')
+        autoWidthColumnList.forEach(column => {
+          const colid = column.id
+          const colRest = fullColumnIdData[colid]
+          const colWidth = calcColumnAutoWidth(column, el)
+          if (colRest) {
+            colRest.width = Math.max(colWidth, colRest.width)
+          }
+          column.renderAutoWidth = colWidth
+        })
+        $xeTable.analyColumnWidth()
+        el.removeAttribute('data-calc-col')
+      }
     }
 
     /**
@@ -1375,39 +1400,39 @@ export default defineComponent({
       })
       // 最小自适应
       autoMinList.forEach((column) => {
-        const scaleWidth = Math.max(60, XEUtils.toInteger(column.renderAutoWidth))
-        tableWidth += scaleWidth
-        column.renderWidth = scaleWidth
+        const caWidth = Math.max(60, XEUtils.toInteger(column.renderAutoWidth))
+        tableWidth += caWidth
+        column.renderWidth = caWidth
       })
       // 最小百分比
       scaleMinList.forEach((column) => {
-        const scaleWidth = Math.floor(XEUtils.toInteger(column.minWidth) * meanWidth)
-        tableWidth += scaleWidth
-        column.renderWidth = scaleWidth
+        const smWidth = Math.floor(XEUtils.toInteger(column.minWidth) * meanWidth)
+        tableWidth += smWidth
+        column.renderWidth = smWidth
       })
       // 固定百分比
       scaleList.forEach((column) => {
-        const scaleWidth = Math.floor(XEUtils.toInteger(column.width) * meanWidth)
-        tableWidth += scaleWidth
-        column.renderWidth = scaleWidth
+        const sfWidth = Math.floor(XEUtils.toInteger(column.width) * meanWidth)
+        tableWidth += sfWidth
+        column.renderWidth = sfWidth
       })
       // 固定宽
       pxList.forEach((column) => {
-        const width = XEUtils.toInteger(column.width)
-        tableWidth += width
-        column.renderWidth = width
+        const pWidth = XEUtils.toInteger(column.width)
+        tableWidth += pWidth
+        column.renderWidth = pWidth
       })
       // 自适应宽
       autoList.forEach((column) => {
-        const width = Math.max(60, XEUtils.toInteger(column.renderAutoWidth))
-        tableWidth += width
-        column.renderWidth = width
+        const aWidth = Math.max(60, XEUtils.toInteger(column.renderAutoWidth))
+        tableWidth += aWidth
+        column.renderWidth = aWidth
       })
       // 调整了列宽
       resizeList.forEach((column) => {
-        const width = XEUtils.toInteger(column.resizeWidth)
-        tableWidth += width
-        column.renderWidth = width
+        const reWidth = XEUtils.toInteger(column.resizeWidth)
+        tableWidth += reWidth
+        column.renderWidth = reWidth
       })
       remainWidth -= tableWidth
       meanWidth = remainWidth > 0 ? Math.floor(remainWidth / (scaleMinList.length + pxMinList.length + autoMinList.length + remainList.length)) : 0
@@ -1447,7 +1472,7 @@ export default defineComponent({
       }
       const tableHeight = bodyElem.offsetHeight
       const overflowY = yHandleEl.scrollHeight > yHandleEl.clientHeight
-      reactData.scrollbarWidth = overflowY ? Math.max(scrollbarOpts.width || 0, yHandleEl.offsetWidth - yHandleEl.clientWidth) : 0
+      reactData.scrollbarWidth = Math.max(scrollbarOpts.width || 0, yHandleEl.offsetWidth - yHandleEl.clientWidth)
       reactData.overflowY = overflowY
       internalData.tableWidth = tableWidth
       internalData.tableHeight = tableHeight
@@ -1457,7 +1482,7 @@ export default defineComponent({
       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
+      reactData.scrollbarHeight = Math.max(scrollbarOpts.height || 0, xHandleEl.offsetHeight - xHandleEl.clientHeight)
       internalData.headerHeight = headerHeight
       internalData.footerHeight = footerHeight
       reactData.overflowX = overflowX
@@ -1468,58 +1493,37 @@ export default defineComponent({
       }
     }
 
-    // const updateCellOffset = () => {
-    //   const { chTimeout, chRunTime } = internalData
-    //   if (chTimeout) {
-    //     clearTimeout(chTimeout)
-    //   }
-    //   if (!chRunTime || chRunTime + 10 < Date.now()) {
-    //     internalData.chRunTime = Date.now()
-    //   }
-    //   internalData.chTimeout = setTimeout(() => {
-    //     internalData.chRunTime = undefined
-    //     internalData.chTimeout = undefined
-    //   }, 80)
-    // }
+    const calcCellAutoHeight = (rowRest: VxeTableDefines.RowCacheItem, wrapperEl: HTMLDivElement) => {
+      const cellElemList = wrapperEl.querySelectorAll(`.vxe-cell--wrapper[rowid="${rowRest.rowid}"]`)
+      let colHeight = rowRest.height
+      for (let i = 0; i < cellElemList.length; i++) {
+        const cellElem = cellElemList[i] as HTMLElement
+        const tdEl = cellElem.parentElement as HTMLTableCellElement
+        const topBottomPadding = Math.ceil(XEUtils.toNumber(tdEl.style.paddingTop) + XEUtils.toNumber(tdEl.style.paddingBottom))
+        const cellHeight = cellElem ? cellElem.clientHeight : 0
+        colHeight = Math.max(colHeight - topBottomPadding, Math.ceil(cellHeight))
+      }
+      return colHeight
+    }
 
     const calcCellHeight = () => {
-      const { showOverflow } = props
-      const { tableData, scrollXLoad } = reactData
+      const { tableData, isAllOverflow, scrollYLoad, scrollXLoad } = reactData
       const { fullAllDataRowIdData } = internalData
+      const defaultRowHeight = computeDefaultRowHeight.value
       const el = refElem.value
-      if (!showOverflow && el) {
-        let paddingTop = 0
-        let paddingBottom = 0
-        let calcPadding = false
+      if (!isAllOverflow && scrollYLoad && el) {
+        el.setAttribute('data-calc-row', 'Y')
         tableData.forEach(row => {
           const rowid = getRowid($xeTable, row)
           const rowRest = fullAllDataRowIdData[rowid]
-          const cellList = el.querySelectorAll(`.vxe-body--row[rowid="${rowid}"]>.vxe-body--column>.vxe-cell`)
-          if (rowRest && cellList.length) {
-            let height = 0
-            for (let i = 0; i < cellList.length; i++) {
-              const cellElem = cellList[i] as HTMLElement
-              const tdEl = cellElem.parentElement as HTMLTableCellElement
-              if (!tdEl || !tdEl.clientWidth) {
-                break
-              }
-              if (!calcPadding) {
-                paddingTop = XEUtils.toNumber(getComputedStyle(tdEl).paddingTop)
-                paddingBottom = XEUtils.toNumber(getComputedStyle(tdEl).paddingBottom)
-                calcPadding = true
-              }
-              let cellHeight = paddingTop + paddingBottom
-              if (cellElem) {
-                cellHeight += cellElem.clientHeight
-              }
-              height = Math.max(height, cellHeight)
-            }
-            rowRest.height = scrollXLoad ? Math.max(rowRest.height, height) : height
+          if (rowRest) {
+            const reHeight = calcCellAutoHeight(rowRest, el)
+            rowRest.height = Math.max(defaultRowHeight, scrollXLoad ? Math.max(rowRest.height, reHeight) : reHeight)
           }
+          el.removeAttribute('data-calc-row')
         })
-        reactData.isCalcCellHeight++
+        reactData.calcCellHeightFlag++
       }
-      // updateCellOffset()
     }
 
     const getOrderField = (column: VxeTableDefines.ColumnInfo) => {
@@ -1542,14 +1546,35 @@ export default defineComponent({
       }
     }
 
+    const updateAfterListIndex = () => {
+      const { afterFullData, fullDataRowIdData, fullAllDataRowIdData } = internalData
+      const fullMaps: Record<string, any> = {}
+      afterFullData.forEach((row, index) => {
+        const rowid = getRowid($xeTable, row)
+        const rowRest = fullAllDataRowIdData[rowid]
+        const seq = index + 1
+        if (rowRest) {
+          rowRest.seq = seq
+          rowRest._index = index
+        } else {
+          const rest = { row, rowid, seq, index: -1, $index: -1, _index: index, treeIndex: -1, items: [], parent: null, level: 0, height: 0, resizeHeight: 0, oTop: 0 }
+          fullAllDataRowIdData[rowid] = rest
+          fullDataRowIdData[rowid] = rest
+        }
+        fullMaps[rowid] = row
+      })
+      internalData.afterFullRowMaps = fullMaps
+    }
+
     /**
      * 预编译
      * 对渲染中的数据提前解析序号及索引。牺牲提前编译耗时换取渲染中额外损耗，使运行时更加流畅
      */
     const updateAfterDataIndex = () => {
       const { treeConfig } = props
-      const { afterFullData, fullDataRowIdData, fullAllDataRowIdData, afterTreeFullData } = internalData
+      const { fullDataRowIdData, fullAllDataRowIdData, afterTreeFullData } = internalData
       const treeOpts = computeTreeOpts.value
+      const { transform } = treeOpts
       const childrenField = treeOpts.children || treeOpts.childrenField
       const fullMaps: Record<string, any> = {}
       if (treeConfig) {
@@ -1559,31 +1584,19 @@ export default defineComponent({
           const seq = path.map((num, i) => i % 2 === 0 ? (Number(num) + 1) : '.').join('')
           if (rowRest) {
             rowRest.seq = seq
-            rowRest._index = index
+            rowRest.treeIndex = index
           } else {
-            const rest = { row, rowid, seq, index: -1, $index: -1, _index: -1, items: [], parent: null, level: 0, height: 0, oTop: 0 }
+            const rest = { row, rowid, seq, index: -1, $index: -1, _index: -1, treeIndex: -1, items: [], parent: null, level: 0, height: 0, resizeHeight: 0, oTop: 0 }
             fullAllDataRowIdData[rowid] = rest
             fullDataRowIdData[rowid] = rest
           }
           fullMaps[rowid] = row
-        }, { children: treeOpts.transform ? treeOpts.mapChildrenField : childrenField })
+        }, { children: transform ? treeOpts.mapChildrenField : childrenField })
+        internalData.afterFullRowMaps = fullMaps
+        updateAfterListIndex()
       } else {
-        afterFullData.forEach((row, index) => {
-          const rowid = getRowid($xeTable, row)
-          const rowRest = fullAllDataRowIdData[rowid]
-          const seq = index + 1
-          if (rowRest) {
-            rowRest.seq = seq
-            rowRest._index = index
-          } else {
-            const rest = { row, rowid, seq, index: -1, $index: -1, _index: index, items: [], parent: null, level: 0, height: 0, oTop: 0 }
-            fullAllDataRowIdData[rowid] = rest
-            fullDataRowIdData[rowid] = rest
-          }
-          fullMaps[rowid] = row
-        })
+        updateAfterListIndex()
       }
-      internalData.afterFullRowMaps = fullMaps
     }
 
     /**
@@ -1762,14 +1775,16 @@ export default defineComponent({
     }
 
     const updateStyle = () => {
-      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 { 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 el = refElem.value
       if (!el) {
         return
       }
       const containerList = ['main', 'left', 'right']
+      const osbWidth = overflowY ? scrollbarWidth : 0
+      const osbHeight = overflowX ? scrollbarHeight : 0
       const emptyPlaceholderElem = refEmptyPlaceholder.value
       const cellOffsetWidth = computeCellOffsetWidth.value
       const mouseOpts = computeMouseOpts.value
@@ -1777,17 +1792,17 @@ export default defineComponent({
       const bodyTableElem = getRefElem(elemStore['main-body-table'])
       if (emptyPlaceholderElem) {
         emptyPlaceholderElem.style.top = `${headerHeight}px`
-        emptyPlaceholderElem.style.height = bodyWrapperElem ? `${bodyWrapperElem.offsetHeight - scrollbarHeight}px` : ''
+        emptyPlaceholderElem.style.height = bodyWrapperElem ? `${bodyWrapperElem.offsetHeight - osbHeight}px` : ''
       }
 
       let bodyHeight = 0
       let bodyMaxHeight = 0
-      const bodyMinHeight = customMinHeight - headerHeight - footerHeight - scrollbarHeight
+      const bodyMinHeight = customMinHeight - headerHeight - footerHeight - osbHeight
       if (customMaxHeight) {
-        bodyMaxHeight = Math.max(bodyMinHeight, customMaxHeight - headerHeight - footerHeight - scrollbarHeight)
+        bodyMaxHeight = Math.max(bodyMinHeight, customMaxHeight - headerHeight - footerHeight - osbHeight)
       }
       if (customHeight) {
-        bodyHeight = customHeight - headerHeight - footerHeight - scrollbarHeight
+        bodyHeight = customHeight - headerHeight - footerHeight - osbHeight
       }
       if (!bodyHeight) {
         if (bodyTableElem) {
@@ -1801,36 +1816,43 @@ export default defineComponent({
         bodyHeight = Math.max(bodyMinHeight, bodyHeight)
       }
 
+      const xLeftCornerEl = refScrollXLeftCornerElem.value
+      const xRightCornerEl = refScrollXRightCornerElem.value
+      const scrollbarXToTop = computeScrollbarXToTop.value
       const scrollXVirtualEl = refScrollXVirtualElem.value
       if (scrollXVirtualEl) {
-        scrollXVirtualEl.style.height = `${scrollbarHeight}px`
-        scrollXVirtualEl.style.visibility = scrollbarHeight ? 'visible' : 'hidden'
+        scrollXVirtualEl.style.height = `${osbHeight}px`
+        scrollXVirtualEl.style.visibility = overflowX ? 'visible' : 'hidden'
       }
-      const xHandleEl = refScrollXHandleElem.value
-      if (xHandleEl) {
-        xHandleEl.style.width = `${el.clientWidth - scrollbarWidth}px`
+      const xWrapperEl = refScrollXWrapperElem.value
+      if (xWrapperEl) {
+        xWrapperEl.style.left = scrollbarXToTop ? `${osbWidth}px` : ''
+        xWrapperEl.style.width = `${el.clientWidth - osbWidth}px`
+      }
+      if (xLeftCornerEl) {
+        xLeftCornerEl.style.width = scrollbarXToTop ? `${osbWidth}px` : ''
+        xLeftCornerEl.style.display = scrollbarXToTop ? (osbWidth && osbHeight ? 'block' : '') : ''
       }
-      const xRightCornerEl = refScrollXRightCornerElem.value
       if (xRightCornerEl) {
-        xRightCornerEl.style.width = `${scrollbarWidth}px`
-        xRightCornerEl.style.display = scrollbarWidth && scrollbarHeight ? 'block' : ''
+        xRightCornerEl.style.width = scrollbarXToTop ? '' : `${osbWidth}px`
+        xRightCornerEl.style.display = scrollbarXToTop ? '' : (osbWidth && osbHeight ? 'block' : '')
       }
 
       const scrollYVirtualEl = refScrollYVirtualElem.value
       if (scrollYVirtualEl) {
-        scrollYVirtualEl.style.width = `${scrollbarWidth}px`
+        scrollYVirtualEl.style.width = `${osbWidth}px`
         scrollYVirtualEl.style.height = `${bodyHeight + headerHeight + footerHeight}px`
-        scrollYVirtualEl.style.visibility = scrollbarWidth ? 'visible' : 'hidden'
+        scrollYVirtualEl.style.visibility = overflowY ? 'visible' : 'hidden'
       }
       const yTopCornerEl = refScrollYTopCornerElem.value
       if (yTopCornerEl) {
         yTopCornerEl.style.height = `${headerHeight}px`
         yTopCornerEl.style.display = headerHeight ? 'block' : ''
       }
-      const yHandleEl = refScrollYHandleElem.value
-      if (yHandleEl) {
-        yHandleEl.style.height = `${bodyHeight}px`
-        yHandleEl.style.top = `${headerHeight}px`
+      const yWrapperEl = refScrollYWrapperElem.value
+      if (yWrapperEl) {
+        yWrapperEl.style.height = `${bodyHeight}px`
+        yWrapperEl.style.top = `${headerHeight}px`
       }
       const yBottomCornerEl = refScrollYBottomCornerElem.value
       if (yBottomCornerEl) {
@@ -1946,7 +1968,7 @@ export default defineComponent({
               if (wrapperElem) {
                 wrapperElem.style.top = `${headerHeight}px`
               }
-              fixedWrapperElem.style.height = `${customHeight > 0 ? customHeight : (tableHeight + headerHeight + footerHeight + scrollbarHeight)}px`
+              fixedWrapperElem.style.height = `${customHeight > 0 ? customHeight : (tableHeight + headerHeight + footerHeight + osbHeight)}px`
               fixedWrapperElem.style.width = `${fixedColumn.reduce((previous, column) => previous + column.renderWidth, 0)}px`
             }
 
@@ -1955,7 +1977,7 @@ export default defineComponent({
 
             let isOptimizeMode = false
             // 如果是使用优化模式
-            if (scrollXLoad || scrollYLoad || (allColumnOverflow && isAllOverflow)) {
+            if (scrollXLoad || scrollYLoad || isAllOverflow) {
               if (expandColumn || spanMethod || footerSpanMethod) {
                 // 如果不支持优化模式
               } else {
@@ -1981,7 +2003,7 @@ export default defineComponent({
             if (tableElem) {
               tableElem.style.width = tWidth ? `${tWidth}px` : ''
               // 兼容性处理
-              tableElem.style.paddingRight = scrollbarWidth && fixedType && (browse['-moz'] || browse.safari) ? `${scrollbarWidth}px` : ''
+              tableElem.style.paddingRight = osbWidth && fixedType && (browse['-moz'] || browse.safari) ? `${osbWidth}px` : ''
             }
             const emptyBlockElem = getRefElem(elemStore[`${name}-${layout}-emptyBlock`])
             if (emptyBlockElem) {
@@ -2021,7 +2043,7 @@ export default defineComponent({
               // 如果是固定列
               if (fixedWrapperElem) {
                 if (wrapperElem) {
-                  wrapperElem.style.top = `${customHeight > 0 ? customHeight - footerHeight - scrollbarHeight : tableHeight + headerHeight}px`
+                  wrapperElem.style.top = `${customHeight > 0 ? customHeight - footerHeight - osbHeight : tableHeight + headerHeight}px`
                 }
               }
             }
@@ -2044,7 +2066,7 @@ export default defineComponent({
                 } else if (layout === 'footer') {
                   cellOverflow = XEUtils.isUndefined(showFooterOverflow) || XEUtils.isNull(showFooterOverflow) ? allColumnFooterOverflow : showFooterOverflow
                 } else {
-                  cellOverflow = XEUtils.isUndefined(showOverflow) || XEUtils.isNull(showOverflow) ? allColumnOverflow : showOverflow
+                  cellOverflow = XEUtils.isUndefined(showOverflow) || XEUtils.isNull(showOverflow) ? isAllOverflow : showOverflow
                 }
                 const showEllipsis = cellOverflow === 'ellipsis'
                 const showTitle = cellOverflow === 'title'
@@ -2570,13 +2592,13 @@ export default defineComponent({
       return nextTick().then(() => {
         const { scrollXLoad, scrollYLoad } = reactData
         const { scrollXStore, scrollYStore } = internalData
-        const sYOpts = computeSYOpts.value
-        const sXOpts = computeSXOpts.value
+        const virtualYOpts = computeVirtualYOpts.value
+        const virtualXOpts = computeVirtualXOpts.value
         // 计算 X 逻辑
         if (scrollXLoad) {
           const { toVisibleIndex: toXVisibleIndex, visibleSize: visibleXSize } = handleVirtualXVisible()
-          const offsetXSize = Math.max(0, sXOpts.oSize ? XEUtils.toNumber(sXOpts.oSize) : 0)
-          scrollXStore.preloadSize = 4
+          const offsetXSize = Math.max(0, virtualXOpts.oSize ? XEUtils.toNumber(virtualXOpts.oSize) : 0)
+          scrollXStore.preloadSize = XEUtils.toNumber(virtualXOpts.preSize)
           scrollXStore.offsetSize = offsetXSize
           scrollXStore.visibleSize = visibleXSize
           scrollXStore.endIndex = Math.max(scrollXStore.startIndex + scrollXStore.visibleSize + offsetXSize, scrollXStore.endIndex)
@@ -2588,15 +2610,14 @@ export default defineComponent({
         } else {
           $xeTable.updateScrollXSpace()
         }
-        calcCellHeight()
         // 计算 Y 逻辑
         const rowHeight = computeRowHeight()
         ;(scrollYStore as any).rowHeight = rowHeight
         reactData.rowHeight = rowHeight
         const { toVisibleIndex: toYVisibleIndex, visibleSize: visibleYSize } = handleVirtualYVisible()
         if (scrollYLoad) {
-          const offsetYSize = Math.max(0, sYOpts.oSize ? XEUtils.toNumber(sYOpts.oSize) : 0)
-          scrollYStore.preloadSize = 2
+          const offsetYSize = Math.max(0, virtualYOpts.oSize ? XEUtils.toNumber(virtualYOpts.oSize) : 0)
+          scrollYStore.preloadSize = XEUtils.toNumber(virtualYOpts.preSize)
           scrollYStore.offsetSize = offsetYSize
           scrollYStore.visibleSize = visibleYSize
           scrollYStore.endIndex = Math.max(scrollYStore.startIndex + visibleYSize + offsetYSize, scrollYStore.endIndex)
@@ -2622,12 +2643,13 @@ export default defineComponent({
       }
       calcCellWidth()
       autoCellWidth()
+      updateStyle()
       return computeScrollLoad().then(() => {
         if (reFull === true) {
           // 初始化时需要在列计算之后再执行优化运算，达到最优显示效果
-          calcCellHeight()
           calcCellWidth()
           autoCellWidth()
+          updateStyle()
           return computeScrollLoad()
         }
       })
@@ -2637,12 +2659,11 @@ export default defineComponent({
      * 加载表格数据
      * @param {Array} datas 数据
      */
-    const loadTableData = (datas: any[]) => {
-      const { keepSource, treeConfig, showOverflow } = props
+    const loadTableData = (datas: any[], isReset: boolean) => {
+      const { keepSource, treeConfig } = props
       const { editStore, scrollYLoad: oldScrollYLoad } = reactData
       const { scrollYStore, scrollXStore, lastScrollLeft, lastScrollTop } = internalData
       const treeOpts = computeTreeOpts.value
-      const rowOpts = computeRowOpts.value
       const { transform } = treeOpts
       const childrenField = treeOpts.children || treeOpts.childrenField
       let treeData = []
@@ -2696,35 +2717,20 @@ export default defineComponent({
       internalData.tableFullData = fullData
       internalData.tableFullTreeData = treeData
       // 缓存数据
-      tablePrivateMethods.cacheRowMap(true)
+      tablePrivateMethods.cacheRowMap(true, isReset)
       // 原始数据
       internalData.tableSynchData = datas
+      if (isReset) {
+        internalData.isResizeCellHeight = false
+        reactData.rowExpandedMaps = {}
+        reactData.rowExpandLazyLoadedMaps = {}
+        reactData.treeExpandedMaps = {}
+        reactData.treeExpandLazyLoadedMaps = {}
+      }
       // 克隆原数据，用于显示编辑状态，与编辑值做对比
       if (keepSource) {
         tablePrivateMethods.cacheSourceMap(fullData)
       }
-      if (sYLoad) {
-        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.height || props.maxHeight)) {
-            errLog('vxe.error.reqProp', ['table.height | table.max-height | table.scroll-y={enabled: false}'])
-          }
-          // if (!props.showOverflow) {
-          //   warnLog('vxe.error.reqProp', ['table.show-overflow'])
-          // }
-          if (props.spanMethod) {
-            warnLog('vxe.error.scrollErrProp', ['table.span-method'])
-          }
-        }
-      }
       if ($xeTable.clearCellAreas && props.mouseConfig) {
         $xeTable.clearCellAreas()
         $xeTable.clearCopyCellArea()
@@ -2743,6 +2749,30 @@ export default defineComponent({
         if (sYLoad) {
           scrollYStore.endIndex = scrollYStore.visibleSize
         }
+
+        if (sYLoad) {
+          // 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.height || props.maxHeight)) {
+              errLog('vxe.error.reqProp', ['table.height | table.max-height | table.scroll-y={enabled: false}'])
+            }
+            // if (!props.showOverflow) {
+            //   warnLog('vxe.error.reqProp', ['table.show-overflow'])
+            // }
+            if (props.spanMethod) {
+              warnLog('vxe.error.scrollErrProp', ['table.span-method'])
+            }
+          }
+        }
+
         handleReserveStatus()
         tablePrivateMethods.checkSelectionStatus()
         return new Promise<void>(resolve => {
@@ -2760,6 +2790,7 @@ export default defineComponent({
               if (sYOpts.scrollToTopOnChange) {
                 targetScrollTop = 0
               }
+              calcCellHeight()
               // 是否变更虚拟滚动
               if (oldScrollYLoad === sYLoad) {
                 restoreScrollLocation($xeTable, targetScrollLeft, targetScrollTop)
@@ -3118,8 +3149,9 @@ export default defineComponent({
         handleVirtualTreeToList()
         tablePrivateMethods.handleTableData()
         updateAfterDataIndex()
+        return nextTick()
       }).then(() => {
-        return tableMethods.recalculate()
+        return tableMethods.recalculate(true)
       }).then(() => {
         setTimeout(() => {
           tableMethods.updateCellAreas()
@@ -3142,13 +3174,12 @@ export default defineComponent({
     /**
      * 纵向 Y 可视渲染处理
      */
-    const loadScrollYData = () => {
-      const { showOverflow } = props
-      const { mergeList } = reactData
+    const loadScrollYData = (scrollTop?: number) => {
+      const { mergeList, isAllOverflow } = reactData
       const { scrollYStore } = internalData
       const { preloadSize, startIndex, endIndex, offsetSize } = scrollYStore
-      const autoOffsetYSize = showOverflow ? offsetSize : offsetSize + 1
-      const { toVisibleIndex, visibleSize } = handleVirtualYVisible()
+      const autoOffsetYSize = isAllOverflow ? offsetSize : offsetSize + 1
+      const { toVisibleIndex, visibleSize } = handleVirtualYVisible(scrollTop)
       const offsetItem = {
         startIndex: Math.max(0, toVisibleIndex - 1 - offsetSize - preloadSize),
         endIndex: toVisibleIndex + visibleSize + autoOffsetYSize + preloadSize
@@ -3196,7 +3227,7 @@ export default defineComponent({
     const lazyScrollXData = () => {
       const { lxTimeout, lxRunTime, scrollXStore } = internalData
       const { visibleSize } = scrollXStore
-      const fpsTime = Math.max(5, Math.min(80, Math.floor(visibleSize * 3)))
+      const fpsTime = Math.max(5, Math.min(10, Math.floor(visibleSize / 3)))
       if (lxTimeout) {
         clearTimeout(lxTimeout)
       }
@@ -3212,10 +3243,9 @@ export default defineComponent({
     }
 
     const lazyScrollYData = () => {
-      const { showOverflow } = props
       const { lyTimeout, lyRunTime, scrollYStore } = internalData
       const { visibleSize } = scrollYStore
-      const fpsTime = showOverflow ? 5 : Math.max(5, Math.min(80, Math.floor(visibleSize / 2)))
+      const fpsTime = Math.floor(Math.max(4, Math.min(10, visibleSize / 3)))
       if (lyTimeout) {
         clearTimeout(lyTimeout)
       }
@@ -3230,72 +3260,6 @@ export default defineComponent({
       }, fpsTime)
     }
 
-    const scrollXEvent = (evnt: Event) => {
-      const { elemStore, inWheelScroll, lastScrollTop, inHeaderScroll, inBodyScroll, inFooterScroll } = internalData
-      if (inHeaderScroll || inBodyScroll || inFooterScroll) {
-        return
-      }
-      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 = refScrollYHandleElem.value
-      const wrapperEl = evnt.currentTarget as HTMLDivElement
-      const { scrollLeft } = wrapperEl
-      const yBodyEl = yHandleEl || bodyScrollElem
-      let scrollTop = 0
-      if (yBodyEl) {
-        scrollTop = yBodyEl.scrollTop
-      }
-      const isRollX = true
-      const isRollY = scrollTop !== lastScrollTop
-
-      internalData.inVirtualScroll = true
-      setScrollLeft(bodyScrollElem, scrollLeft)
-      setScrollLeft(headerScrollElem, scrollLeft)
-      setScrollLeft(footerScrollElem, scrollLeft)
-      $xeTable.triggerScrollXEvent(evnt)
-      $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
-        type: 'table',
-        fixed: ''
-      })
-    }
-
-    const scrollYEvent = (evnt: Event) => {
-      const { elemStore, inWheelScroll, lastScrollLeft, inHeaderScroll, inBodyScroll, inFooterScroll } = internalData
-      if (inHeaderScroll || inBodyScroll || inFooterScroll) {
-        return
-      }
-      if (inWheelScroll) {
-        return
-      }
-      const leftScrollElem = getRefElem(elemStore['left-body-scroll'])
-      const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
-      const rightScrollElem = getRefElem(elemStore['right-body-scroll'])
-      const xHandleEl = refScrollXHandleElem.value
-      const wrapperEl = evnt.currentTarget as HTMLDivElement
-      const { scrollTop } = wrapperEl
-      const xBodyEl = xHandleEl || bodyScrollElem
-      let scrollLeft = 0
-      if (xBodyEl) {
-        scrollLeft = xBodyEl.scrollLeft
-      }
-      const isRollX = scrollLeft !== lastScrollLeft
-      const isRollY = true
-
-      internalData.inVirtualScroll = true
-      setScrollTop(bodyScrollElem, scrollTop)
-      setScrollTop(leftScrollElem, scrollTop)
-      setScrollTop(rightScrollElem, scrollTop)
-      $xeTable.triggerScrollYEvent(evnt)
-      $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
-        type: 'table',
-        fixed: ''
-      })
-    }
-
     const checkLastSyncScroll = (isRollX: boolean, isRollY: boolean) => {
       const { scrollXLoad, scrollYLoad } = reactData
       const { lcsTimeout } = internalData
@@ -3305,28 +3269,67 @@ export default defineComponent({
       internalData.lcsTimeout = setTimeout(() => {
         internalData.lcsRunTime = Date.now()
         internalData.lcsTimeout = undefined
+        internalData.intoRunScroll = false
         internalData.inVirtualScroll = false
         internalData.inWheelScroll = false
         internalData.inHeaderScroll = false
         internalData.inBodyScroll = false
         internalData.inFooterScroll = false
         internalData.scrollRenderType = ''
+
+        calcCellHeight()
         if (isRollX && scrollXLoad) {
-          $xeTable.updateScrollXData().then(() => {
-            calcCellHeight()
-            loadScrollXData()
-          })
+          $xeTable.updateScrollXData()
         }
         if (isRollY && scrollYLoad) {
           $xeTable.updateScrollYData().then(() => {
             calcCellHeight()
-            loadScrollYData()
+            $xeTable.updateScrollYSpace()
           })
         }
         $xeTable.updateCellAreas()
       }, 200)
     }
 
+    const getWheelSpeed = (lastScrollTime: number) => {
+      let multiple = 1
+      const currTime = Date.now()
+      if (lastScrollTime + 25 > currTime) {
+        multiple = 1.18
+      } else if (lastScrollTime + 30 > currTime) {
+        multiple = 1.15
+      } else if (lastScrollTime + 40 > currTime) {
+        multiple = 1.12
+      } else if (lastScrollTime + 55 > currTime) {
+        multiple = 1.09
+      } else if (lastScrollTime + 75 > currTime) {
+        multiple = 1.06
+      } else if (lastScrollTime + 100 > currTime) {
+        multiple = 1.03
+      }
+      return multiple
+    }
+
+    const wheelScrollTo = (diffNum: number, cb: (progress: number) => void) => {
+      const duration = Math.abs(diffNum)
+      const startTime = performance.now()
+      let countTop = 0
+      const step = (timestamp: number) => {
+        let progress = (timestamp - startTime) / duration
+        if (progress > 1) {
+          progress = 1
+        }
+        const easedProgress = Math.pow(progress, 2)
+        const offsetTop = Math.floor((diffNum * easedProgress)) - countTop
+        countTop += offsetTop
+        cb(offsetTop)
+        if (progress < 1) {
+          requestAnimationFrame(step)
+        }
+      }
+      requestAnimationFrame(step)
+    }
+
     const dispatchEvent = (type: ValueOf<VxeTableEmits>, params: Record<string, any>, evnt: Event | null) => {
       emit(type, createEvent(evnt, { $table: $xeTable, $grid: $xeGrid }, params))
     }
@@ -3340,6 +3343,34 @@ export default defineComponent({
       return nextTick()
     }
 
+    const handleUpdateResize = () => {
+      const el = refElem.value
+      if (el && el.clientWidth && el.clientHeight) {
+        tableMethods.recalculate()
+      }
+    }
+
+    const handleUpdateColResize = (evnt: MouseEvent, params: any) => {
+      $xeTable.analyColumnWidth()
+      $xeTable.recalculate(true).then(() => {
+        $xeTable.saveCustomStore('update:width')
+        $xeTable.updateCellAreas()
+        $xeTable.dispatchEvent('column-resizable-change', params, evnt)
+        // 已废弃 resizable-change
+        $xeTable.dispatchEvent('resizable-change', params, evnt)
+        setTimeout(() => $xeTable.recalculate(true), 300)
+      })
+    }
+
+    const handleUpdateRowResize = (evnt: MouseEvent, params: any) => {
+      reactData.resizeHeightFlag++
+      $xeTable.recalculate(true).then(() => {
+        $xeTable.updateCellAreas()
+        $xeTable.dispatchEvent('row-resizable-change', params, evnt)
+        setTimeout(() => $xeTable.recalculate(true), 300)
+      })
+    }
+
     tableMethods = {
       dispatchEvent,
       /**
@@ -3392,7 +3423,7 @@ export default defineComponent({
        */
       loadData (datas) {
         const { initStatus } = internalData
-        return loadTableData(datas).then(() => {
+        return loadTableData(datas, false).then(() => {
           internalData.inited = true
           internalData.initStatus = true
           if (!initStatus) {
@@ -3410,7 +3441,7 @@ export default defineComponent({
           .then(() => {
             internalData.inited = true
             internalData.initStatus = true
-            return loadTableData(datas)
+            return loadTableData(datas, true)
           }).then(() => {
             handleLoadDefaults()
             return tableMethods.recalculate()
@@ -3499,7 +3530,7 @@ export default defineComponent({
           XEUtils.eachTree(rows, (childRow, index, items, path, parentItem, nodes) => {
             const rowid = getRowid($xeTable, childRow)
             const parentRow = parentItem || parentRest.row
-            const rest = { row: childRow, rowid, seq: -1, index, _index: -1, $index: -1, items, parent: parentRow, level: parentLevel + nodes.length, height: 0, oTop: 0 }
+            const rest = { row: childRow, rowid, seq: -1, index, _index: -1, $index: -1, treeIndex: -1, items, parent: parentRow, level: parentLevel + nodes.length, height: 0, resizeHeight: 0, oTop: 0 }
             fullDataRowIdData[rowid] = rest
             fullAllDataRowIdData[rowid] = rest
           }, { children: childrenField })
@@ -3724,29 +3755,30 @@ export default defineComponent({
         return nextTick()
       },
       getCellElement (row, fieldOrColumn) {
+        const { elemStore } = internalData
         const column = handleFieldOrColumn($xeTable, fieldOrColumn)
         if (!column) {
           return null
         }
         const rowid = getRowid($xeTable, row)
-        const tableBody = refTableBody.value
-        const leftBody = refTableLeftBody.value
-        const rightBody = refTableRightBody.value
+        const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
+        const leftScrollElem = getRefElem(elemStore['left-body-scroll'])
+        const rightScrollElem = getRefElem(elemStore['right-body-scroll'])
         let bodyElem
         if (column) {
           if (column.fixed) {
             if (column.fixed === 'left') {
-              if (leftBody) {
-                bodyElem = leftBody.$el as HTMLDivElement
+              if (leftScrollElem) {
+                bodyElem = leftScrollElem
               }
             } else {
-              if (rightBody) {
-                bodyElem = rightBody.$el as HTMLDivElement
+              if (rightScrollElem) {
+                bodyElem = rightScrollElem
               }
             }
           }
           if (!bodyElem) {
-            bodyElem = tableBody.$el as HTMLDivElement
+            bodyElem = bodyScrollElem
           }
           if (bodyElem) {
             return bodyElem.querySelector(`.vxe-body--row[rowid="${rowid}"] .${column.id}`)
@@ -4151,29 +4183,34 @@ export default defineComponent({
         return nextTick()
       },
       setColumnWidth (fieldOrColumn, width) {
+        const { elemStore } = internalData
         let status = false
         const cols = XEUtils.isArray(fieldOrColumn) ? fieldOrColumn : [fieldOrColumn]
-        cols.forEach(item => {
-          const column = handleFieldOrColumn($xeTable, item)
-          if (column) {
-            const colWidth = XEUtils.toInteger(width)
-            let rdWidth = colWidth
-            if (isScale(width)) {
-              const tableBody = refTableBody.value
-              const bodyElem = tableBody ? tableBody.$el as HTMLDivElement : null
-              const bodyWidth = bodyElem ? bodyElem.clientWidth - 1 : 0
-              rdWidth = Math.floor(colWidth * bodyWidth)
-            }
-            column.resizeWidth = rdWidth
-            if (!status) {
-              status = true
+        let cWidth = XEUtils.toInteger(width)
+        if (isScale(width)) {
+          const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
+          const bodyWidth = bodyScrollElem ? bodyScrollElem.clientWidth - 1 : 0
+          cWidth = Math.floor(cWidth * bodyWidth)
+        }
+        if (cWidth) {
+          cols.forEach(item => {
+            const column = handleFieldOrColumn($xeTable, item)
+            if (column) {
+              column.resizeWidth = cWidth
+              if (!status) {
+                status = true
+              }
             }
+          })
+          if (status) {
+            return $xeTable.refreshColumn().then(() => {
+              return { status }
+            })
           }
-        })
-        if (status) {
-          return tableMethods.refreshColumn()
         }
-        return nextTick()
+        return nextTick().then(() => {
+          return { status }
+        })
       },
       getColumnWidth (fieldOrColumn) {
         const column = handleFieldOrColumn($xeTable, fieldOrColumn)
@@ -4206,6 +4243,93 @@ export default defineComponent({
           return tableMethods.recalculate()
         })
       },
+      setRowHeightConf (heightConf) {
+        const { fullAllDataRowIdData } = internalData
+        let status = false
+        if (heightConf) {
+          XEUtils.each(heightConf, (height, rowid) => {
+            const rowRest = fullAllDataRowIdData[rowid]
+            if (rowRest) {
+              const rHeight = XEUtils.toInteger(height)
+              if (rHeight) {
+                rowRest.resizeHeight = rHeight
+                if (!status) {
+                  status = true
+                }
+              }
+            }
+          })
+          if (status) {
+            internalData.isResizeCellHeight = true
+            reactData.resizeHeightFlag++
+          }
+        }
+        return nextTick().then(() => {
+          return { status }
+        })
+      },
+      getRowHeightConf (isFull) {
+        const { fullAllDataRowIdData, afterFullData } = internalData
+        const rowOpts = computeRowOpts.value
+        const cellOpts = computeCellOpts.value
+        const defaultRowHeight = computeDefaultRowHeight.value
+        const rest: Record<string, number> = {}
+        afterFullData.forEach(row => {
+          const rowid = getRowid($xeTable, row)
+          const rowRest = fullAllDataRowIdData[rowid]
+          if (rowRest) {
+            const resizeHeight = rowRest.resizeHeight
+            if (resizeHeight || isFull) {
+              const currCellHeight = resizeHeight || rowRest.height || cellOpts.height || rowOpts.height || defaultRowHeight
+              rest[rowid] = currCellHeight
+            }
+          }
+        })
+        return rest
+      },
+      setRowHeight (rowOrId, height) {
+        const { fullAllDataRowIdData } = internalData
+        let status = false
+        const rows = XEUtils.isArray(rowOrId) ? rowOrId : [rowOrId]
+        let rHeight = XEUtils.toInteger(height)
+        if (isScale(height)) {
+          const tableBody = refTableBody.value
+          const bodyElem = tableBody ? tableBody.$el as HTMLDivElement : null
+          const bodyHeight = bodyElem ? bodyElem.clientHeight - 1 : 0
+          rHeight = Math.floor(rHeight * bodyHeight)
+        }
+        if (rHeight) {
+          rows.forEach(row => {
+            const rowid = XEUtils.isString(row) || XEUtils.isNumber(row) ? row : getRowid($xeTable, row)
+            const rowRest = fullAllDataRowIdData[rowid]
+            if (rowRest) {
+              rowRest.resizeHeight = rHeight
+              if (!status) {
+                status = true
+              }
+            }
+          })
+          if (status) {
+            internalData.isResizeCellHeight = true
+            reactData.resizeHeightFlag++
+          }
+        }
+        return nextTick().then(() => {
+          return { status }
+        })
+      },
+      getRowHeight (rowOrId) {
+        const { fullAllDataRowIdData } = internalData
+        const rowOpts = computeRowOpts.value
+        const cellOpts = computeCellOpts.value
+        const defaultRowHeight = computeDefaultRowHeight.value
+        const rowid = XEUtils.isString(rowOrId) || XEUtils.isNumber(rowOrId) ? rowOrId : getRowid($xeTable, rowOrId)
+        const rowRest = fullAllDataRowIdData[rowid]
+        if (rowRest) {
+          return rowRest.resizeHeight || rowRest.height || cellOpts.height || rowOpts.height || defaultRowHeight
+        }
+        return 0
+      },
       /**
        * 刷新滚动操作，手动同步滚动相关位置（对于某些特殊的操作，比如滚动条错位、固定列不同步）
        */
@@ -5226,13 +5350,13 @@ export default defineComponent({
        */
       getScroll () {
         const { scrollXLoad, scrollYLoad } = reactData
-        const tableBody = refTableBody.value
-        const bodyElem = tableBody.$el as HTMLDivElement
+        const { elemStore } = internalData
+        const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
         return {
           virtualX: scrollXLoad,
           virtualY: scrollYLoad,
-          scrollTop: bodyElem.scrollTop,
-          scrollLeft: bodyElem.scrollLeft
+          scrollTop: bodyScrollElem ? bodyScrollElem.scrollTop : 0,
+          scrollLeft: bodyScrollElem ? bodyScrollElem.scrollLeft : 0
         }
       },
       /**
@@ -5282,8 +5406,7 @@ export default defineComponent({
        * @param {ColumnInfo} fieldOrColumn 列配置
        */
       scrollToRow (row, fieldOrColumn) {
-        const { showOverflow } = props
-        const { scrollYLoad, scrollXLoad } = reactData
+        const { isAllOverflow, scrollYLoad, scrollXLoad } = reactData
         const rest = []
         if (row) {
           if (props.treeConfig) {
@@ -5297,7 +5420,7 @@ export default defineComponent({
         }
         return Promise.all(rest).then(() => {
           if (row) {
-            if (!showOverflow && (scrollYLoad || scrollXLoad)) {
+            if (!isAllOverflow && (scrollYLoad || scrollXLoad)) {
               calcCellHeight()
               calcCellWidth()
             }
@@ -6249,25 +6372,29 @@ export default defineComponent({
       if (!el) {
         return
       }
-      const { scrollbarWidth, scrollbarHeight } = reactData
+      const { overflowX, scrollbarWidth, overflowY, scrollbarHeight } = reactData
       const { prevDragToChild } = internalData
       const wrapperRect = el.getBoundingClientRect()
+      const osbWidth = overflowY ? scrollbarWidth : 0
+      const osbHeight = overflowX ? scrollbarHeight : 0
       const tableWidth = el.clientWidth
       const tableHeight = el.clientHeight
       if (trEl) {
         const rdLineEl = refDragRowLineElem.value
         if (rdLineEl) {
           if (showLine) {
+            const scrollbarYToLeft = computeScrollbarYToLeft.value
             const trRect = trEl.getBoundingClientRect()
             let trHeight = trEl.clientHeight
             const offsetTop = Math.max(1, trRect.y - wrapperRect.y)
-            if (offsetTop + trHeight > tableHeight - scrollbarHeight) {
-              trHeight = tableHeight - offsetTop - scrollbarHeight
+            if (offsetTop + trHeight > tableHeight - osbHeight) {
+              trHeight = tableHeight - 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 - scrollbarWidth}px`
+            rdLineEl.style.width = `${tableWidth - osbWidth}px`
             rdLineEl.setAttribute('drag-pos', dragPos)
             rdLineEl.setAttribute('drag-to-child', prevDragToChild ? 'y' : 'n')
           } else {
@@ -6278,6 +6405,7 @@ export default defineComponent({
         const cdLineEl = refDragColLineElem.value
         if (cdLineEl) {
           if (showLine) {
+            const scrollbarXToTop = computeScrollbarXToTop.value
             const leftContainerElem = refLeftContainer.value
             const leftContainerWidth = leftContainerElem ? leftContainerElem.clientWidth : 0
             const rightContainerElem = refRightContainer.value
@@ -6291,7 +6419,7 @@ export default defineComponent({
               thWidth -= startX - offsetLeft
               offsetLeft = startX
             }
-            const endX = tableWidth - rightContainerWidth - (rightContainerWidth ? 0 : scrollbarWidth)
+            const endX = tableWidth - rightContainerWidth - (rightContainerWidth ? 0 : osbWidth)
             if (offsetLeft + thWidth > endX) {
               thWidth = endX - offsetLeft
             }
@@ -6302,7 +6430,7 @@ export default defineComponent({
             if (prevDragToChild) {
               cdLineEl.style.height = `${thRect.height}px`
             } else {
-              cdLineEl.style.height = `${tableHeight - offsetTop - scrollbarHeight}px`
+              cdLineEl.style.height = `${tableHeight - offsetTop - (scrollbarXToTop ? 0 : osbHeight)}px`
             }
             cdLineEl.setAttribute('drag-pos', dragPos)
             cdLineEl.setAttribute('drag-to-child', prevDragToChild ? 'y' : 'n')
@@ -6340,11 +6468,11 @@ export default defineComponent({
      * @param {Event} evnt 事件
      * @param {Row} row 行对象
      */
-    const handleTooltip = (evnt: MouseEvent, cell: HTMLTableCellElement, overflowElem: HTMLElement, tipElem: HTMLElement | null, params: any) => {
+    const handleTooltip = (evnt: MouseEvent, tdEl: HTMLTableCellElement, overflowElem: HTMLElement, tipElem: HTMLElement | null, params: any) => {
       if (!overflowElem) {
         return nextTick()
       }
-      params.cell = cell
+      params.cell = tdEl
       const { tooltipStore } = reactData
       const tooltipOpts = computeTooltipOpts.value
       const { column, row } = params
@@ -6494,9 +6622,8 @@ export default defineComponent({
       },
       /**
        * 更新数据行的 Map
-       * 牺牲数据组装的耗时，用来换取使用过程中的流畅
        */
-      cacheRowMap (isSource) {
+      cacheRowMap (isReset, isSource) {
         const { treeConfig } = props
         const treeOpts = computeTreeOpts.value
         const { fullAllDataRowIdData, tableFullData, tableFullTreeData } = internalData
@@ -6518,8 +6645,8 @@ export default defineComponent({
             row[childrenField] = null
           }
           let cacheItem = fullAllDataRowIdData[rowid]
-          if (!cacheItem) {
-            cacheItem = { row, rowid, seq, index: -1, _index: -1, $index: -1, items, parent: parentRow, level, height: 0, oTop: 0 }
+          if (isReset || !cacheItem) {
+            cacheItem = { row, rowid, seq, index: -1, _index: -1, $index: -1, treeIndex: index, items, parent: parentRow, level, height: 0, resizeHeight: 0, oTop: 0 }
           }
           cacheItem.row = row
           cacheItem.items = items
@@ -6609,33 +6736,329 @@ export default defineComponent({
         })
         Object.assign(reactData.columnStore, { resizeList, pxList, pxMinList, autoMinList, scaleList, scaleMinList, autoList, remainList })
       },
-      handleResizeDblclickEvent (evnt, params) {
+      handleColResizeMousedownEvent (evnt, fixedType, params) {
+        evnt.stopPropagation()
+        evnt.preventDefault()
+        const { column } = params
+        const { overflowX, scrollbarHeight } = reactData
+        const { elemStore, visibleColumn } = internalData
         const resizableOpts = computeResizableOpts.value
-        const { isDblclickAutoWidth } = resizableOpts
-        const el = refElem.value
+        const osbHeight = overflowX ? scrollbarHeight : 0
+        const tableEl = refElem.value
+        const leftContainerElem = refLeftContainer.value
+        const rightContainerElem = refRightContainer.value
+        const resizeBarElem = refColResizeBar.value
+        if (!resizeBarElem) {
+          return
+        }
+        const resizeTipElem = resizeBarElem.firstElementChild as HTMLDivElement
+        const scrollbarXToTop = computeScrollbarXToTop.value
+        const { clientX: dragClientX } = evnt
+        const wrapperElem = refElem.value
+        const dragBtnElem = evnt.target as HTMLDivElement
+        let resizeColumn = column
+        if (column.children && column.children.length) {
+          XEUtils.eachTree(column.children, childColumn => {
+            resizeColumn = childColumn
+          })
+        }
+        const cell = dragBtnElem.parentNode as HTMLTableCellElement
+        const cellParams = Object.assign(params, { cell })
+        let dragLeft = 0
+        const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
+        if (!bodyScrollElem) {
+          return
+        }
+        const pos = getOffsetPos(dragBtnElem, wrapperElem)
+        const dragBtnWidth = dragBtnElem.clientWidth
+        const dragBtnOffsetWidth = Math.floor(dragBtnWidth / 2)
+        const minInterval = getColReMinWidth(cellParams) - dragBtnOffsetWidth // 列之间的最小间距
+        let dragMinLeft = pos.left - cell.clientWidth + dragBtnWidth + minInterval
+        let dragPosLeft = pos.left + dragBtnOffsetWidth
+        const isLeftFixed = fixedType === 'left'
+        const isRightFixed = fixedType === 'right'
+
+        // 计算左右侧固定列偏移量
+        let fixedOffsetWidth = 0
+        if (isLeftFixed || isRightFixed) {
+          const siblingProp = isLeftFixed ? 'nextElementSibling' : 'previousElementSibling'
+          let tempCellElem = cell[siblingProp] as HTMLTableCellElement
+          while (tempCellElem) {
+            if (hasClass(tempCellElem, 'fixed--hidden')) {
+              break
+            } else if (!hasClass(tempCellElem, 'col--group')) {
+              fixedOffsetWidth += tempCellElem.offsetWidth
+            }
+            tempCellElem = tempCellElem[siblingProp] as HTMLTableCellElement
+          }
+          if (isRightFixed && rightContainerElem) {
+            dragPosLeft = rightContainerElem.offsetLeft + fixedOffsetWidth
+          }
+        }
+
+        // 处理拖动事件
+        const updateEvent = (evnt: MouseEvent) => {
+          evnt.stopPropagation()
+          evnt.preventDefault()
+          const tableHeight = tableEl.clientHeight
+          const offsetX = evnt.clientX - dragClientX
+          let left = dragPosLeft + offsetX
+          const scrollLeft = fixedType ? 0 : bodyScrollElem.scrollLeft
+          if (isLeftFixed) {
+          // 左固定列（不允许超过右侧固定列、不允许超过右边距）
+            left = Math.min(left, (rightContainerElem ? rightContainerElem.offsetLeft : bodyScrollElem.clientWidth) - fixedOffsetWidth - minInterval)
+          } else if (isRightFixed) {
+          // 右侧固定列（不允许超过左侧固定列、不允许超过左边距）
+            dragMinLeft = (leftContainerElem ? leftContainerElem.clientWidth : 0) + fixedOffsetWidth + minInterval
+            left = Math.min(left, dragPosLeft + cell.clientWidth - minInterval)
+          } else {
+            dragMinLeft = Math.max(bodyScrollElem.scrollLeft, dragMinLeft)
+          // left = Math.min(left, bodyScrollElem.clientWidth + bodyScrollElem.scrollLeft - 40)
+          }
+          dragLeft = Math.max(left, dragMinLeft)
+          const resizeBarLeft = Math.max(1, dragLeft - scrollLeft)
+          resizeBarElem.style.left = `${resizeBarLeft}px`
+          resizeBarElem.style.top = `${scrollbarXToTop ? osbHeight : 0}px`
+          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 wrapperRect = wrapperElem.getBoundingClientRect()
+            const resizeBarWidth = resizeBarElem.clientWidth
+            const resizeTipWidth = resizeTipElem.clientWidth
+            const resizeTipHeight = resizeTipElem.clientHeight
+            let resizeTipLeft = -resizeTipWidth
+            if (resizeBarLeft < resizeTipWidth + resizeBarWidth) {
+              resizeTipLeft = 0
+            } else if (resizeBarLeft > tableWidth) {
+              resizeTipLeft += tableWidth - resizeBarLeft
+            }
+            resizeTipElem.style.left = `${resizeTipLeft}px`
+            resizeTipElem.style.top = `${Math.min(tableHeight - resizeTipHeight, Math.max(0, evnt.clientY - wrapperRect.y - resizeTipHeight / 2))}px`
+          }
+          reactData.isDragResize = true
+        }
+
+        reactData.isDragResize = true
+        addClass(tableEl, 'col-drag--resize')
+        resizeBarElem.style.display = 'block'
+        document.onmousemove = updateEvent
+        document.onmouseup = function (evnt) {
+          document.onmousemove = null
+          document.onmouseup = null
+          resizeBarElem.style.display = 'none'
+          internalData._lastResizeTime = Date.now()
+
+          setTimeout(() => {
+            reactData.isDragResize = false
+          }, 50)
+
+          const resizeWidth = resizeColumn.renderWidth + (isRightFixed ? dragPosLeft - dragLeft : dragLeft - dragPosLeft)
+          const resizeParams = { ...params, resizeWidth, resizeColumn }
+          if (resizableOpts.dragMode === 'fixed') {
+            visibleColumn.forEach(item => {
+              if (item.id !== resizeColumn.id) {
+                if (!item.resizeWidth) {
+                  item.resizeWidth = item.renderWidth
+                }
+              }
+            })
+          }
+
+          if ($xeTable.handleColResizeCellAreaEvent) {
+            $xeTable.handleColResizeCellAreaEvent(evnt, resizeParams)
+          } else {
+            resizeColumn.resizeWidth = resizeWidth
+            handleUpdateColResize(evnt, resizeParams)
+          }
+          removeClass(tableEl, 'col-drag--resize')
+        }
+        updateEvent(evnt)
+        if ($xeTable.closeMenu) {
+          $xeTable.closeMenu()
+        }
+      },
+      handleColResizeDblclickEvent (evnt, params) {
+        const resizableOpts = computeResizableOpts.value
+        const { isDblclickAutoWidth } = resizableOpts
+        const el = refElem.value
         if (isDblclickAutoWidth && el) {
+          evnt.stopPropagation()
+          evnt.preventDefault()
           const { fullColumnIdData } = internalData
           const { column } = params
-          const colid = column.id
+          let resizeColumn = column
+          if (column.children && column.children.length) {
+            XEUtils.eachTree(column.children, childColumn => {
+              resizeColumn = childColumn
+            })
+          }
+          const colid = resizeColumn.id
           const colRest = fullColumnIdData[colid]
           const dragBtnElem = evnt.target as HTMLDivElement
           const cell = dragBtnElem.parentNode as HTMLTableCellElement
           const cellParams = Object.assign(params, { cell })
           const colMinWidth = getColReMinWidth(cellParams)
-          let resizeWidth = calcColumnAutoWidth(column, el)
+
+          el.setAttribute('data-calc-col', 'Y')
+          let resizeWidth = calcColumnAutoWidth(resizeColumn, el)
+          el.removeAttribute('data-calc-col')
           if (colRest) {
             resizeWidth = Math.max(resizeWidth, colRest.width)
           }
-          column.resizeWidth = Math.max(colMinWidth, resizeWidth)
-          reactData._isResize = false
+          resizeWidth = Math.max(colMinWidth, resizeWidth)
+          const resizeParams = { ...params, resizeWidth, resizeColumn }
+          reactData.isDragResize = false
           internalData._lastResizeTime = Date.now()
-          $xeTable.analyColumnWidth()
-          $xeTable.recalculate(true).then(() => {
-            $xeTable.saveCustomStore('update:visible')
-            $xeTable.updateCellAreas()
-            $xeTable.dispatchEvent('resizable-change', { ...params, resizeWidth }, evnt)
-            setTimeout(() => $xeTable.recalculate(true), 300)
-          })
+
+          if ($xeTable.handleColResizeDblclickCellAreaEvent) {
+            $xeTable.handleColResizeDblclickCellAreaEvent(evnt, resizeParams)
+          } else {
+            resizeColumn.resizeWidth = resizeWidth
+            handleUpdateColResize(evnt, resizeParams)
+          }
+        }
+      },
+      handleRowResizeMousedownEvent (evnt, params) {
+        evnt.stopPropagation()
+        evnt.preventDefault()
+        const { row } = params
+        const { overflowX, scrollbarWidth, overflowY, scrollbarHeight } = reactData
+        const { elemStore, fullAllDataRowIdData } = internalData
+        const osbWidth = overflowY ? scrollbarWidth : 0
+        const osbHeight = overflowX ? scrollbarHeight : 0
+        const scrollbarYToLeft = computeScrollbarYToLeft.value
+        const resizableOpts = computeResizableOpts.value
+        const rowOpts = computeRowOpts.value
+        const cellOpts = computeCellOpts.value
+        const tableEl = refElem.value
+        const resizeBarElem = refRowResizeBar.value
+        if (!resizeBarElem) {
+          return
+        }
+        const { clientY: dragClientY } = evnt
+        const resizeTipElem = resizeBarElem.firstElementChild as HTMLDivElement
+        const dragBtnElem = evnt.currentTarget as HTMLDivElement
+        const tdEl = dragBtnElem.parentNode as HTMLTableCellElement
+        const trEl = tdEl.parentNode as HTMLTableCellElement
+        const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
+        if (!bodyScrollElem) {
+          return
+        }
+        const rowid = getRowid($xeTable, row)
+        const rowRest = fullAllDataRowIdData[rowid]
+        if (!rowRest) {
+          return
+        }
+        const defaultRowHeight = computeDefaultRowHeight.value
+        const currCellHeight = rowRest.resizeHeight || rowRest.height || cellOpts.height || rowOpts.height || defaultRowHeight
+        const tableRect = tableEl.getBoundingClientRect()
+        const trRect = trEl.getBoundingClientRect()
+        const targetOffsetY = dragClientY - trRect.y - trEl.clientHeight
+        let resizeHeight = currCellHeight
+        const cellEl = tdEl.querySelector('.vxe-cell')
+        let cellMinHeight = 0
+        if (cellEl) {
+          const cellStyle = getComputedStyle(cellEl)
+          cellMinHeight = Math.max(1, Math.ceil(XEUtils.toNumber(cellStyle.paddingTop) + XEUtils.toNumber(cellStyle.paddingBottom)))
+        }
+        const minTop = trRect.y - tableRect.y + cellMinHeight
+        // 处理拖动事件
+        const updateEvent = (evnt: MouseEvent) => {
+          evnt.stopPropagation()
+          evnt.preventDefault()
+          const tableWidth = tableEl.clientWidth - osbWidth
+          const tableHeight = tableEl.clientHeight - osbHeight
+          let dragTop = evnt.clientY - tableRect.y - targetOffsetY
+          if (dragTop < minTop) {
+            dragTop = minTop
+          } else {
+            resizeHeight = Math.max(cellMinHeight, currCellHeight + evnt.clientY - dragClientY)
+          }
+          resizeBarElem.style.left = `${scrollbarYToLeft ? osbWidth : 0}px`
+          resizeBarElem.style.top = `${dragTop}px`
+          resizeBarElem.style.width = `${tableWidth}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 (dragTop + resizeTipHeight >= tableHeight) {
+              resizeBarTop = tableHeight - (dragTop + resizeTipHeight)
+            }
+            resizeTipElem.style.left = `${resizeBarLeft}px`
+            resizeTipElem.style.top = `${resizeBarTop}px`
+          }
+          reactData.isDragResize = true
+        }
+
+        reactData.isDragResize = true
+        addClass(tableEl, 'row-drag--resize')
+        resizeBarElem.style.display = 'block'
+        document.onmousemove = updateEvent
+        document.onmouseup = function (evnt) {
+          document.onmousemove = null
+          document.onmouseup = null
+          resizeBarElem.style.display = 'none'
+          internalData._lastResizeTime = Date.now()
+
+          setTimeout(() => {
+            reactData.isDragResize = false
+          }, 50)
+
+          if (resizeHeight !== currCellHeight) {
+            const resizeParams = { ...params, resizeHeight, resizeRow: row }
+            internalData.isResizeCellHeight = true
+            if ($xeTable.handleRowResizeCellAreaEvent) {
+              $xeTable.handleRowResizeCellAreaEvent(evnt, resizeParams)
+            } else {
+              rowRest.resizeHeight = resizeHeight
+              handleUpdateRowResize(evnt, resizeParams)
+            }
+          }
+          removeClass(tableEl, 'row-drag--resize')
+        }
+        updateEvent(evnt)
+      },
+      handleRowResizeDblclickEvent (evnt, params) {
+        const resizableOpts = computeResizableOpts.value
+        const { isDblclickAutoHeight } = resizableOpts
+        const el = refElem.value
+        if (isDblclickAutoHeight && el) {
+          evnt.stopPropagation()
+          evnt.preventDefault()
+          const { editStore } = reactData
+          const { fullAllDataRowIdData } = internalData
+          const { actived } = editStore
+          const { row } = params
+          const rowid = getRowid($xeTable, row)
+          const rowRest = fullAllDataRowIdData[rowid]
+          if (!rowRest) {
+            return
+          }
+          const handleRsHeight = () => {
+            el.setAttribute('data-calc-row', 'Y')
+            const resizeHeight = calcCellAutoHeight(rowRest, el)
+            el.removeAttribute('data-calc-row')
+            const resizeParams = { ...params, resizeHeight, resizeRow: row }
+            reactData.isDragResize = false
+            internalData._lastResizeTime = Date.now()
+            if ($xeTable.handleRowResizeDblclickCellAreaEvent) {
+              $xeTable.handleRowResizeDblclickCellAreaEvent(evnt, resizeParams)
+            } else {
+              rowRest.resizeHeight = resizeHeight
+              handleUpdateRowResize(evnt, resizeParams)
+            }
+          }
+          if (actived.row || actived.column) {
+            $xeTable.clearEdit().then(handleRsHeight)
+          } else {
+            handleRsHeight()
+          }
         }
       },
       saveCustomStore (type) {
@@ -6860,7 +7283,7 @@ export default defineComponent({
             vLen++
           })
 
-        const isSelected = rootList.length > 0 && sLen >= vLen
+        const isSelected = vLen > 0 ? sLen >= vLen : sLen >= rootList.length
         const halfSelect = !isSelected && (sLen >= 1 || hLen >= 1)
 
         reactData.isAllSelected = isSelected
@@ -6982,10 +7405,21 @@ export default defineComponent({
       triggerHeaderTooltipEvent (evnt, params) {
         const { tooltipStore } = reactData
         const { column } = params
-        const titleElem = evnt.currentTarget as HTMLTableCellElement
         handleTargetEnterEvent(true)
+        const titleElem = evnt.currentTarget as HTMLDivElement
+        if (!titleElem) {
+          return
+        }
+        const cellEl = titleElem.parentElement as HTMLDivElement
+        if (!cellEl) {
+          return
+        }
+        const thEl = cellEl.parentElement as HTMLTableCellElement
+        if (!thEl) {
+          return
+        }
         if (tooltipStore.column !== column || !tooltipStore.visible) {
-          handleTooltip(evnt, titleElem, titleElem, null, params)
+          handleTooltip(evnt, thEl, cellEl, null, params)
         }
       },
       /**
@@ -6998,7 +7432,7 @@ export default defineComponent({
         const editOpts = computeEditOpts.value
         const { actived } = editStore
         const { row, column } = params
-        const cell = evnt.currentTarget as HTMLTableCellElement
+        const tdEl = evnt.currentTarget as HTMLTableCellElement
         handleTargetEnterEvent(tooltipStore.column !== column || tooltipStore.row !== row)
         // 单元格处于编辑状态时不触发提示框
         if (column.editRender && isEnableConf(editConfig)) {
@@ -7012,17 +7446,7 @@ export default defineComponent({
           }
         }
         if (tooltipStore.column !== column || tooltipStore.row !== row || !tooltipStore.visible) {
-          let overflowElem
-          let tipElem
-          if (column.treeNode) {
-            overflowElem = cell.querySelector('.vxe-tree-cell')
-            if (column.type === 'html') {
-              tipElem = cell.querySelector('.vxe-cell--html')
-            }
-          } else {
-            tipElem = cell.querySelector(column.type === 'html' ? '.vxe-cell--html' : '.vxe-cell--label') as HTMLElement
-          }
-          handleTooltip(evnt, cell, (overflowElem || cell.children[0]) as HTMLElement, tipElem as HTMLElement, params)
+          handleTooltip(evnt, tdEl, tdEl.querySelector('.vxe-cell--wrapper') as HTMLElement, null, params)
         }
       },
       /**
@@ -7034,7 +7458,7 @@ export default defineComponent({
         const cell = evnt.currentTarget as HTMLTableCellElement
         handleTargetEnterEvent(tooltipStore.column !== column || !!tooltipStore.row)
         if (tooltipStore.column !== column || !tooltipStore.visible) {
-          handleTooltip(evnt, cell, cell.querySelector('.vxe-cell--item') as HTMLElement || cell.children[0], null, params)
+          handleTooltip(evnt, cell, cell.querySelector('.vxe-cell--wrapper') as HTMLElement || cell.children[0], null, params)
         }
       },
       handleTargetLeaveEvent () {
@@ -7047,11 +7471,11 @@ export default defineComponent({
           internalData.tooltipTimeout = setTimeout(() => {
             $tooltip = refTooltip.value
             if ($tooltip && $tooltip.isActived && !$tooltip.isActived()) {
-              tableMethods.closeTooltip()
+              $xeTable.closeTooltip()
             }
           }, tooltipOpts.leaveDelay)
         } else {
-          tableMethods.closeTooltip()
+          $xeTable.closeTooltip()
         }
       },
       triggerHeaderCellClickEvent (evnt, params) {
@@ -7081,7 +7505,10 @@ export default defineComponent({
        */
       triggerCellClickEvent (evnt, params) {
         const { highlightCurrentRow, editConfig } = props
-        const { editStore } = reactData
+        const { editStore, isDragResize } = reactData
+        if (isDragResize) {
+          return
+        }
         const expandOpts = computeExpandOpts.value
         const editOpts = computeEditOpts.value
         const treeOpts = computeTreeOpts.value
@@ -7173,7 +7600,10 @@ export default defineComponent({
        */
       triggerCellDblclickEvent (evnt, params) {
         const { editConfig } = props
-        const { editStore } = reactData
+        const { editStore, isDragResize } = reactData
+        if (isDragResize) {
+          return
+        }
         const editOpts = computeEditOpts.value
         const { actived } = editStore
         const cell = evnt.currentTarget as HTMLDivElement
@@ -7477,7 +7907,7 @@ export default defineComponent({
         const { treeConfig, dragConfig } = props
         const rowDragOpts = computeRowDragOpts.value
         const { fullAllDataRowIdData } = internalData
-        const { isPeerDrag, isCrossDrag, isSelfToChildDrag, dragEndMethod } = rowDragOpts
+        const { isPeerDrag, isCrossDrag, isSelfToChildDrag, dragEndMethod, dragToChildMethod } = rowDragOpts
         const treeOpts = computeTreeOpts.value
         const { transform, rowField, mapChildrenField, parentField } = treeOpts
         const childrenField = treeOpts.children || treeOpts.childrenField
@@ -7487,17 +7917,15 @@ export default defineComponent({
         if (prevDragRow && dragRow) {
           // 判断是否有拖动
           if (prevDragRow !== dragRow) {
-            return Promise.resolve(
-              dEndMethod
-                ? dEndMethod({
-                  oldRow: dragRow,
-                  newRow: prevDragRow,
-                  dragPos: prevDragPos as any,
-                  dragToChild: !!prevDragToChild,
-                  offsetIndex: dragOffsetIndex
-                })
-                : true
-            ).then((status) => {
+            const dragParams = {
+              oldRow: dragRow,
+              newRow: prevDragRow,
+              dragPos: prevDragPos as 'top' | 'bottom',
+              dragToChild: !!prevDragToChild,
+              offsetIndex: dragOffsetIndex as 0 | 1
+            }
+            const isDragToChildFlag = isSelfToChildDrag && dragToChildMethod ? dragToChildMethod(dragParams) : prevDragToChild
+            return Promise.resolve(dEndMethod ? dEndMethod(dragParams) : true).then((status) => {
               if (!status) {
                 return
               }
@@ -7577,7 +8005,11 @@ export default defineComponent({
                       // 根到根
                     }
 
-                    const fullList = XEUtils.toTreeArray(internalData.afterTreeFullData, { children: childrenField })
+                    const fullList = XEUtils.toTreeArray(internalData.afterTreeFullData, {
+                      key: rowField,
+                      parentKey: parentField,
+                      children: mapChildrenField
+                    })
 
                     // 移出
                     const otfIndex = $xeTable.findRowIndexOf(fullList, dragRow)
@@ -7594,13 +8026,13 @@ export default defineComponent({
                         childRow[parentField] = dragRow[parentField]
                       })
                     }
-                    dragRow[parentField] = prevDragToChild ? prevDragRow[rowField] : prevDragRow[parentField]
+                    dragRow[parentField] = isDragToChildFlag ? prevDragRow[rowField] : prevDragRow[parentField]
 
                     internalData.tableFullTreeData = XEUtils.toArrayTree(fullList, {
-                      key: treeOpts.rowField,
-                      parentKey: treeOpts.parentField,
+                      key: rowField,
+                      parentKey: parentField,
                       children: childrenField,
-                      mapChildren: treeOpts.mapChildrenField
+                      mapChildren: mapChildrenField
                     })
                   }
                 }
@@ -7621,7 +8053,7 @@ export default defineComponent({
 
               reactData.isDragRowMove = true
               $xeTable.handleTableData(treeConfig && transform)
-              $xeTable.cacheRowMap()
+              $xeTable.cacheRowMap(false)
               updateScrollYStatus()
               if (!(treeConfig && transform)) {
                 $xeTable.updateAfterDataIndex()
@@ -7639,7 +8071,7 @@ export default defineComponent({
                 oldRow: dragRow,
                 newRow: prevDragRow,
                 dragPos: prevDragPos as any,
-                dragToChild: !!prevDragToChild,
+                dragToChild: isDragToChildFlag,
                 offsetIndex: dragOffsetIndex,
                 _index: {
                   newIndex: nafIndex,
@@ -7660,18 +8092,16 @@ export default defineComponent({
         const { lazy } = treeOpts
         const hasChildField = treeOpts.hasChild || treeOpts.hasChildField
         const { prevDragRow, prevDragPos } = internalData
-        if (treeConfig && prevDragToChild) {
+        if (treeConfig && lazy && prevDragToChild) {
           // 懒加载
-          if (lazy) {
-            const newRowid = getRowid($xeTable, prevDragRow)
-            const rowRest = fullAllDataRowIdData[newRowid]
-            if (prevDragRow[hasChildField]) {
-              if (rowRest && rowRest.treeLoaded) {
-                $xeTable.handleRowDragSwapEvent(evnt, true, dragRow, prevDragRow, prevDragPos, prevDragToChild)
-              }
-            } else {
+          const newRowid = getRowid($xeTable, prevDragRow)
+          const rowRest = fullAllDataRowIdData[newRowid]
+          if (prevDragRow[hasChildField]) {
+            if (rowRest && rowRest.treeLoaded) {
               $xeTable.handleRowDragSwapEvent(evnt, true, dragRow, prevDragRow, prevDragPos, prevDragToChild)
             }
+          } else {
+            $xeTable.handleRowDragSwapEvent(evnt, true, dragRow, prevDragRow, prevDragPos, prevDragToChild)
           }
         } else {
           $xeTable.handleRowDragSwapEvent(evnt, true, dragRow, prevDragRow, prevDragPos, prevDragToChild)
@@ -7774,7 +8204,7 @@ export default defineComponent({
       handleColDragSwapEvent (evnt, isSyncColumn, dragCol, prevDragCol, prevDragPos, prevDragToChild) {
         const { mouseConfig } = props
         const columnDragOpts = computeColumnDragOpts.value
-        const { isPeerDrag, isCrossDrag, isSelfToChildDrag, isToChildDrag, dragEndMethod } = columnDragOpts
+        const { isPeerDrag, isCrossDrag, isSelfToChildDrag, isToChildDrag, dragEndMethod, dragToChildMethod } = columnDragOpts
         const { collectColumn } = internalData
         const dragOffsetIndex = prevDragPos === 'right' ? 1 : 0
         if (prevDragCol && dragCol) {
@@ -7782,17 +8212,15 @@ export default defineComponent({
           if (prevDragCol !== dragCol) {
             const oldColumn = dragCol
             const newColumn = prevDragCol
-            return Promise.resolve(
-              dragEndMethod
-                ? dragEndMethod({
-                  oldColumn,
-                  newColumn,
-                  dragPos: prevDragPos as any,
-                  dragToChild: !!prevDragToChild,
-                  offsetIndex: dragOffsetIndex
-                })
-                : true
-            ).then((status) => {
+            const dragParams = {
+              oldColumn,
+              newColumn,
+              dragPos: prevDragPos as 'left' | 'right',
+              dragToChild: !!prevDragToChild,
+              offsetIndex: dragOffsetIndex as 0 | 1
+            }
+            const isDragToChildFlag = isSelfToChildDrag && dragToChildMethod ? dragToChildMethod(dragParams) : prevDragToChild
+            return Promise.resolve(dragEndMethod ? dragEndMethod(dragParams) : true).then((status) => {
               if (!status) {
                 return
               }
@@ -7888,7 +8316,7 @@ export default defineComponent({
               if (newMatchRest) {
                 const { items: nCols, index: nIndex, parent: nParent } = newMatchRest
                 // 转子级
-                if ((isCrossDrag && isToChildDrag) && prevDragToChild) {
+                if ((isCrossDrag && isToChildDrag) && isDragToChildFlag) {
                   oldColumn.parentId = newColumn.id
                   newColumn.children = (newColumn.children || []).concat([oldColumn])
                 } else {
@@ -7922,7 +8350,7 @@ export default defineComponent({
                 oldColumn,
                 newColumn,
                 dragPos: prevDragPos,
-                dragToChild: !!prevDragToChild,
+                dragToChild: isDragToChildFlag,
                 offsetIndex: dragOffsetIndex,
                 _index: {
                   newIndex: nafIndex,
@@ -8170,7 +8598,7 @@ export default defineComponent({
         }
       },
       triggerBodyScrollEvent (evnt, fixedType) {
-        const { elemStore, lastScrollTop, lastScrollLeft, inWheelScroll, inVirtualScroll, inHeaderScroll, inBodyScroll, scrollRenderType, inFooterScroll } = internalData
+        const { elemStore, intoRunScroll, lastScrollTop, lastScrollLeft, inWheelScroll, inVirtualScroll, inHeaderScroll, inBodyScroll, scrollRenderType, inFooterScroll } = internalData
         const xHandleEl = refScrollXHandleElem.value
         const yHandleEl = refScrollYHandleElem.value
         const leftScrollElem = getRefElem(elemStore['left-body-scroll'])
@@ -8181,6 +8609,9 @@ export default defineComponent({
         if (inWheelScroll || inVirtualScroll || inHeaderScroll || inFooterScroll) {
           return
         }
+        if (intoRunScroll) {
+          return
+        }
         if (!bodyScrollElem) {
           return
         }
@@ -8235,22 +8666,16 @@ export default defineComponent({
         })
       },
       triggerHeaderScrollEvent (evnt, fixedType) {
-        const { elemStore, inWheelScroll, inVirtualScroll, inBodyScroll, inFooterScroll } = internalData
+        const { elemStore, intoRunScroll, inWheelScroll, inVirtualScroll, inBodyScroll, inFooterScroll } = internalData
         const yHandleEl = refScrollYHandleElem.value
         const xHandleEl = refScrollXHandleElem.value
         const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
         const headerScrollElem = getRefElem(elemStore['main-header-scroll'])
         const footerScrollElem = getRefElem(elemStore['main-footer-scroll'])
-        if (inWheelScroll) {
+        if (inWheelScroll || inVirtualScroll || inBodyScroll || inFooterScroll) {
           return
         }
-        if (inVirtualScroll) {
-          return
-        }
-        if (inBodyScroll) {
-          return
-        }
-        if (inFooterScroll) {
+        if (intoRunScroll) {
           return
         }
         if (!headerScrollElem) {
@@ -8277,22 +8702,16 @@ export default defineComponent({
         })
       },
       triggerFooterScrollEvent (evnt, fixedType) {
-        const { elemStore, inWheelScroll, inVirtualScroll, inHeaderScroll, inBodyScroll } = internalData
+        const { elemStore, intoRunScroll, inWheelScroll, inVirtualScroll, inHeaderScroll, inBodyScroll } = internalData
         const yHandleEl = refScrollYHandleElem.value
         const xHandleEl = refScrollXHandleElem.value
         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) {
+        if (inWheelScroll || inVirtualScroll || inHeaderScroll || inBodyScroll) {
           return
         }
-        if (inHeaderScroll) {
-          return
-        }
-        if (inBodyScroll) {
+        if (intoRunScroll) {
           return
         }
         if (!footerScrollElem) {
@@ -8319,7 +8738,10 @@ export default defineComponent({
         })
       },
       triggerBodyWheelEvent (evnt) {
-        const { deltaY, deltaX } = evnt
+        const { target, deltaY, deltaX } = evnt
+        if (target && /^textarea$/i.test((target as HTMLElement).tagName)) {
+          return
+        }
         const { highlightHoverRow } = tableProps
         const { elemStore, lastScrollTop, lastScrollLeft } = internalData
         const rowOpts = computeRowOpts.value
@@ -8338,30 +8760,14 @@ export default defineComponent({
         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 wheelSpeed = getWheelSpeed(reactData.lastScrollTime)
+        const deltaTop = deltaY * wheelSpeed
+        const deltaLeft = deltaX * wheelSpeed
 
         const isTopWheel = deltaTop < 0
-        const currScrollTop = yHandleEl.scrollTop
+        const currScrollTop = bodyScrollElem.scrollTop
         // 如果滚动位置已经是顶部或底部，则不需要触发
-        if (isTopWheel ? currScrollTop <= 0 : currScrollTop >= yHandleEl.scrollHeight - yHandleEl.clientHeight) {
+        if (isTopWheel ? currScrollTop <= 0 : currScrollTop >= bodyScrollElem.scrollHeight - bodyScrollElem.clientHeight) {
           return
         }
 
@@ -8377,17 +8783,96 @@ export default defineComponent({
             $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: ''
+          wheelScrollTo(scrollTop - bodyScrollElem.scrollTop, (offsetTop: number) => {
+            const currTopNum = bodyScrollElem.scrollTop + offsetTop
+            internalData.inWheelScroll = true
+            setScrollTop(yHandleEl, currTopNum)
+            setScrollTop(bodyScrollElem, currTopNum)
+            setScrollTop(leftScrollElem, currTopNum)
+            setScrollTop(rightScrollElem, currTopNum)
+            $xeTable.triggerScrollYEvent(evnt)
+            $xeTable.handleScrollEvent(evnt, isRollY, isRollX, currTopNum, scrollLeft, {
+              type: 'table',
+              fixed: ''
+            })
           })
+
+          // internalData.inWheelScroll = true
+          // setScrollTop(yHandleEl, scrollTop)
+          // setScrollTop(bodyScrollElem, scrollTop)
+          // setScrollTop(leftScrollElem, scrollTop)
+          // setScrollTop(rightScrollElem, scrollTop)
+
+          // loadScrollYData(scrollTop)
+          // $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
+          //   type: 'footer',
+          //   fixed: ''
+          // })
+        }
+      },
+      triggerVirtualScrollXEvent (evnt) {
+        const { elemStore, inWheelScroll, lastScrollTop, inHeaderScroll, inBodyScroll, inFooterScroll } = internalData
+        if (inHeaderScroll || inBodyScroll || inFooterScroll) {
+          return
+        }
+        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 = refScrollYHandleElem.value
+        const wrapperEl = evnt.currentTarget as HTMLDivElement
+        const { scrollLeft } = wrapperEl
+        const yBodyEl = yHandleEl || bodyScrollElem
+        let scrollTop = 0
+        if (yBodyEl) {
+          scrollTop = yBodyEl.scrollTop
+        }
+        const isRollX = true
+        const isRollY = scrollTop !== lastScrollTop
+
+        internalData.inVirtualScroll = true
+        setScrollLeft(bodyScrollElem, scrollLeft)
+        setScrollLeft(headerScrollElem, scrollLeft)
+        setScrollLeft(footerScrollElem, scrollLeft)
+        $xeTable.triggerScrollXEvent(evnt)
+        $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
+          type: 'table',
+          fixed: ''
+        })
+      },
+      triggerVirtualScrollYEvent (evnt) {
+        const { elemStore, inWheelScroll, lastScrollLeft, inHeaderScroll, inBodyScroll, inFooterScroll } = internalData
+        if (inHeaderScroll || inBodyScroll || inFooterScroll) {
+          return
+        }
+        if (inWheelScroll) {
+          return
+        }
+        const leftScrollElem = getRefElem(elemStore['left-body-scroll'])
+        const bodyScrollElem = getRefElem(elemStore['main-body-scroll'])
+        const rightScrollElem = getRefElem(elemStore['right-body-scroll'])
+        const xHandleEl = refScrollXHandleElem.value
+        const wrapperEl = evnt.currentTarget as HTMLDivElement
+        const { scrollTop } = wrapperEl
+        const xBodyEl = xHandleEl || bodyScrollElem
+        let scrollLeft = 0
+        if (xBodyEl) {
+          scrollLeft = xBodyEl.scrollLeft
         }
+        const isRollX = scrollLeft !== lastScrollLeft
+        const isRollY = true
+
+        internalData.inVirtualScroll = true
+        setScrollTop(bodyScrollElem, scrollTop)
+        setScrollTop(leftScrollElem, scrollTop)
+        setScrollTop(rightScrollElem, scrollTop)
+        $xeTable.triggerScrollYEvent(evnt)
+        $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
+          type: 'table',
+          fixed: ''
+        })
       },
       /**
        * 对于树形结构中，可以直接滚动到指定深层节点中
@@ -8461,34 +8946,34 @@ export default defineComponent({
       },
       // 更新纵向 Y 可视渲染上下剩余空间大小
       updateScrollYSpace () {
-        const { showOverflow } = props
-        const { scrollYLoad, rowHeight } = reactData
-        const { scrollYStore, elemStore, afterFullData, fullAllDataRowIdData } = internalData
+        const { isAllOverflow, scrollYLoad } = reactData
+        const { scrollYStore, elemStore, isResizeCellHeight, afterFullData, fullAllDataRowIdData } = internalData
         const { startIndex } = scrollYStore
+        const rowOpts = computeRowOpts.value
+        const cellOpts = computeCellOpts.value
+        const defaultRowHeight = computeDefaultRowHeight.value
         const bodyTableElem = getRefElem(elemStore['main-body-table'])
         const containerList = ['main', 'left', 'right']
         let topSpaceHeight = 0
         let ySpaceHeight = 0
+
         if (scrollYLoad) {
-          if (showOverflow) {
-            ySpaceHeight = afterFullData.length * rowHeight
-            topSpaceHeight = Math.max(0, startIndex * rowHeight)
+          const isCustomCellHeight = isResizeCellHeight || cellOpts.height || rowOpts.height
+          if (!isCustomCellHeight && isAllOverflow) {
+            ySpaceHeight = afterFullData.length * defaultRowHeight
+            topSpaceHeight = 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]
-              if (rowRest) {
-                ySpaceHeight += rowRest.height || rowHeight
-              }
+              const rowRest = fullAllDataRowIdData[rowid] || {}
+              ySpaceHeight += rowRest.resizeHeight || rowRest.height || cellOpts.height || rowOpts.height || defaultRowHeight
             }
             for (let i = 0; i < startIndex; i++) {
               const row = afterFullData[i]
               const rowid = getRowid($xeTable, row)
-              const rowRest = fullAllDataRowIdData[rowid]
-              if (rowRest) {
-                topSpaceHeight += rowRest.height || rowHeight
-              }
+              const rowRest = fullAllDataRowIdData[rowid] || {}
+              topSpaceHeight += rowRest.resizeHeight || rowRest.height || cellOpts.height || rowOpts.height || defaultRowHeight
             }
           }
         } else {
@@ -8513,28 +8998,24 @@ export default defineComponent({
         if (scrollYSpaceEl) {
           scrollYSpaceEl.style.height = ySpaceHeight ? `${ySpaceHeight}px` : ''
         }
-        nextTick(() => {
+        return nextTick().then(() => {
           updateStyle()
         })
       },
       updateScrollXData () {
-        const { showOverflow } = props
+        const { isAllOverflow } = reactData
         handleTableColumn()
-        // calcCellHeight()
         return nextTick().then(() => {
-          // calcCellHeight()
           handleTableColumn()
           $xeTable.updateScrollXSpace()
-          if (!showOverflow) {
+          if (!isAllOverflow) {
             $xeTable.updateScrollYSpace()
           }
         })
       },
       updateScrollYData () {
         $xeTable.handleTableData()
-        // calcCellHeight()
         return nextTick().then(() => {
-          // calcCellHeight()
           $xeTable.handleTableData()
           $xeTable.updateScrollYSpace()
         })
@@ -8764,19 +9245,141 @@ export default defineComponent({
       return renderEmptyElement($xeTable)
     }
 
-    function handleUupdateResize () {
-      const el = refElem.value
-      if (el && el.clientWidth && el.clientHeight) {
-        tableMethods.recalculate()
-      }
+    const renderScrollX = () => {
+      return h('div', {
+        key: 'vsx',
+        ref: refScrollXVirtualElem,
+        class: 'vxe-table--scroll-x-virtual'
+      }, [
+        h('div', {
+          ref: refScrollXLeftCornerElem,
+          class: 'vxe-table--scroll-x-left-corner'
+        }),
+        h('div', {
+          ref: refScrollXWrapperElem,
+          class: 'vxe-table--scroll-x-wrapper'
+        }, [
+          h('div', {
+            ref: refScrollXHandleElem,
+            class: 'vxe-table--scroll-x-handle',
+            onScroll: $xeTable.triggerVirtualScrollXEvent
+          }, [
+            h('div', {
+              ref: refScrollXSpaceElem,
+              class: 'vxe-table--scroll-x-space'
+            })
+          ])
+        ]),
+        h('div', {
+          ref: refScrollXRightCornerElem,
+          class: 'vxe-table--scroll-x-right-corner'
+        })
+      ])
+    }
+
+    const renderScrollY = () => {
+      return h('div', {
+        ref: refScrollYVirtualElem,
+        class: 'vxe-table--scroll-y-virtual'
+      }, [
+        h('div', {
+          ref: refScrollYTopCornerElem,
+          class: 'vxe-table--scroll-y-top-corner'
+        }),
+        h('div', {
+          ref: refScrollYWrapperElem,
+          class: 'vxe-table--scroll-y-wrapper'
+        }, [
+          h('div', {
+            ref: refScrollYHandleElem,
+            class: 'vxe-table--scroll-y-handle',
+            onScroll: $xeTable.triggerVirtualScrollYEvent
+          }, [
+            h('div', {
+              ref: refScrollYSpaceElem,
+              class: 'vxe-table--scroll-y-space'
+            })
+          ])
+        ]),
+        h('div', {
+          ref: refScrollYBottomCornerElem,
+          class: 'vxe-table--scroll-y-bottom-corner'
+        })
+      ])
+    }
+
+    const renderViewport = () => {
+      const { showHeader, showFooter } = props
+      const { overflowX, tableData, tableColumn, tableGroupColumn, footerTableData, columnStore } = reactData
+      const { leftList, rightList } = columnStore
+      return h('div', {
+        ref: refTableViewportElem,
+        class: 'vxe-table--viewport-wrapper'
+      }, [
+        h('div', {
+          class: 'vxe-table--main-wrapper'
+        }, [
+          /**
+           * 表头
+           */
+          showHeader
+            ? h(TableHeaderComponent, {
+              ref: refTableHeader,
+              tableData,
+              tableColumn,
+              tableGroupColumn
+            })
+            : renderEmptyElement($xeTable),
+          /**
+           * 表体
+           */
+          h(TableBodyComponent, {
+            ref: refTableBody,
+            tableData,
+            tableColumn
+          }),
+          /**
+           * 表尾
+           */
+          showFooter
+            ? h(TableFooterComponent, {
+              ref: refTableFooter,
+              footerTableData,
+              tableColumn
+            })
+            : renderEmptyElement($xeTable)
+        ]),
+        h('div', {
+          class: 'vxe-table--fixed-wrapper'
+        }, [
+          leftList && leftList.length && overflowX ? renderFixed('left') : renderEmptyElement($xeTable),
+          rightList && rightList.length && overflowX ? renderFixed('right') : renderEmptyElement($xeTable)
+        ])
+      ])
+    }
+
+    const renderBody = () => {
+      const scrollbarYToLeft = computeScrollbarYToLeft.value
+      return h('div', {
+        class: 'vxe-table--layout-wrapper'
+      }, scrollbarYToLeft
+        ? [
+            renderScrollY(),
+            renderViewport()
+          ]
+        : [
+            renderViewport(),
+            renderScrollY()
+          ])
     }
 
     const renderVN = () => {
       const { loading, stripe, showHeader, height, treeConfig, mouseConfig, showFooter, highlightCell, highlightHoverRow, highlightHoverColumn, editConfig, editRules } = props
-      const { isCalcColumn, isGroup, overflowX, overflowY, scrollXLoad, scrollYLoad, scrollbarHeight, tableData, tableColumn, tableGroupColumn, footerTableData, initStore, columnStore, filterStore, customStore, tooltipStore } = reactData
+      const { isGroup, overflowX, overflowY, scrollXLoad, scrollYLoad, tableData, initStore, columnStore, filterStore, customStore } = reactData
       const { leftList, rightList } = columnStore
       const loadingSlot = slots.loading
-      const tooltipOpts = computeTooltipOpts.value
+      const tableTipConfig = computeTableTipConfig.value
+      const validTipConfig = computeValidTipConfig.value
       const validOpts = computeValidOpts.value
       const checkboxOpts = computeCheckboxOpts.value
       const treeOpts = computeTreeOpts.value
@@ -8792,9 +9395,11 @@ export default defineComponent({
       const resizableOpts = computeResizableOpts.value
       const isArea = mouseConfig && mouseOpts.area
       const columnDragOpts = computeColumnDragOpts.value
+      const scrollbarXToTop = computeScrollbarXToTop.value
+      const scrollbarYToLeft = computeScrollbarYToLeft.value
       return h('div', {
         ref: refElem,
-        class: ['vxe-table', 'vxe-table--render-default', `tid_${xID}`, `border--${tableBorder}`, {
+        class: ['vxe-table', 'vxe-table--render-default', `tid_${xID}`, `border--${tableBorder}`, `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`, {
           [`size--${vSize}`]: vSize,
           [`valid-msg--${validOpts.msgMode}`]: !!editRules,
           'vxe-editable': !!editConfig,
@@ -8807,7 +9412,6 @@ export default defineComponent({
           'row--highlight': rowOpts.isHover || highlightHoverRow,
           'column--highlight': columnOpts.isHover || highlightHoverColumn,
           'checkbox--range': checkboxOpts.range,
-          'column--calc': isCalcColumn,
           'col--drag-cell': columnOpts.drag && columnDragOpts.trigger === 'cell',
           'is--header': showHeader,
           'is--footer': showFooter,
@@ -8816,7 +9420,6 @@ export default defineComponent({
           'is--fixed-left': leftList.length,
           'is--fixed-right': rightList.length,
           'is--animat': !!props.animat,
-          'is--padding': props.padding,
           'is--round': props.round,
           'is--stripe': !treeConfig && stripe,
           'is--loading': currLoading,
@@ -8838,95 +9441,15 @@ export default defineComponent({
         h('div', {
           key: 'tw',
           class: 'vxe-table--render-wrapper'
-        }, [
-          h('div', {
-            ref: refTableViewportElem,
-            class: 'vxe-table--viewport-wrapper'
-          }, [
-            h('div', {
-              class: 'vxe-table--main-wrapper'
-            }, [
-              /**
-               * 表头
-               */
-              showHeader
-                ? h(TableHeaderComponent, {
-                  ref: refTableHeader,
-                  tableData,
-                  tableColumn,
-                  tableGroupColumn
-                })
-                : renderEmptyElement($xeTable),
-              /**
-               * 表体
-               */
-              h(TableBodyComponent, {
-                ref: refTableBody,
-                tableData,
-                tableColumn
-              }),
-              /**
-               * 表尾
-               */
-              showFooter
-                ? h(TableFooterComponent, {
-                  ref: refTableFooter,
-                  footerTableData,
-                  tableColumn
-                })
-                : renderEmptyElement($xeTable)
-            ]),
-            h('div', {
-              class: 'vxe-table--fixed-wrapper'
-            }, [
-              leftList && leftList.length && overflowX ? renderFixed('left') : renderEmptyElement($xeTable),
-              rightList && rightList.length && overflowX ? renderFixed('right') : renderEmptyElement($xeTable)
-            ])
-          ]),
-          h('div', {
-            ref: refScrollYVirtualElem,
-            class: 'vxe-table--scroll-y-virtual'
-          }, [
-            h('div', {
-              ref: refScrollYTopCornerElem,
-              class: 'vxe-table--scroll-y-top-corner'
-            }),
-            h('div', {
-              ref: refScrollYHandleElem,
-              class: 'vxe-table--scroll-y-handle',
-              onScroll: scrollYEvent
-            }, [
-              h('div', {
-                ref: refScrollYSpaceElem,
-                class: 'vxe-table--scroll-y-space'
-              })
+        }, scrollbarXToTop
+          ? [
+              renderScrollX(),
+              renderBody()
+            ]
+          : [
+              renderBody(),
+              renderScrollX()
             ]),
-            h('div', {
-              ref: refScrollYBottomCornerElem,
-              class: 'vxe-table--scroll-y-bottom-corner'
-            })
-          ])
-        ]),
-        h('div', {
-          key: 'vx',
-          ref: refScrollXVirtualElem,
-          class: 'vxe-table--scroll-x-virtual'
-        }, [
-          h('div', {
-            ref: refScrollXHandleElem,
-            class: 'vxe-table--scroll-x-handle',
-            onScroll: scrollXEvent
-          }, [
-            h('div', {
-              ref: refScrollXSpaceElem,
-              class: 'vxe-table--scroll-x-space'
-            })
-          ]),
-          h('div', {
-            ref: refScrollXRightCornerElem,
-            class: 'vxe-table--scroll-x-right-corner'
-          })
-        ]),
         /**
          * 空数据
          */
@@ -8950,18 +9473,26 @@ export default defineComponent({
          * 列宽线
          */
         h('div', {
-          key: 'cl',
-          ref: refCellResizeBar,
-          class: 'vxe-table--resizable-bar',
-          style: overflowX
-            ? {
-                'padding-bottom': `${scrollbarHeight}px`
-              }
-            : null
+          key: 'tcl',
+          ref: refColResizeBar,
+          class: 'vxe-table--resizable-col-bar'
+        }, resizableOpts.showDragTip
+          ? [
+              h('div', {
+                class: 'vxe-table--resizable-number-tip'
+              })
+            ]
+          : []),
+        /**
+         * 行高线
+         */
+        h('div', {
+          key: 'trl',
+          ref: refRowResizeBar,
+          class: 'vxe-table--resizable-row-bar'
         }, resizableOpts.showDragTip
           ? [
               h('div', {
-                ref: refCellResizeTip,
                 class: 'vxe-table--resizable-number-tip'
               })
             ]
@@ -9058,10 +9589,14 @@ export default defineComponent({
             /**
               * 工具提示
               */
-            h(VxeUITooltipComponent, Object.assign({
+            h(VxeUITooltipComponent, {
               key: 'btp',
-              ref: refTooltip
-            }, tooltipOpts, tooltipStore.currOpts)),
+              ref: refTooltip,
+              theme: tableTipConfig.theme,
+              enterable: tableTipConfig.enterable,
+              enterDelay: tableTipConfig.enterDelay,
+              leaveDelay: tableTipConfig.leaveDelay
+            }),
             /**
               * 校验提示
               */
@@ -9072,7 +9607,10 @@ export default defineComponent({
                 class: [{
                   'old-cell-valid': editRules && getConfig().cellVaildMode === 'obsolete'
                 }, 'vxe-table--valid-error'],
-                ...(validOpts.message === 'tooltip' || tableData.length === 1 ? Object.assign({ isArrow: false }, tooltipOpts) : {}) as any
+                theme: validTipConfig.theme,
+                enterable: validTipConfig.enterable,
+                enterDelay: validTipConfig.enterDelay,
+                leaveDelay: validTipConfig.leaveDelay
               })
               : renderEmptyElement($xeTable)
           ])
@@ -9093,7 +9631,7 @@ export default defineComponent({
       if (value && value.length >= 50000) {
         warnLog('vxe.error.errLargeData', ['loadData(data), reloadData(data)'])
       }
-      loadTableData(value).then(() => {
+      loadTableData(value, true).then(() => {
         const { scrollXLoad, scrollYLoad, expandColumn } = reactData
         internalData.inited = true
         internalData.initStatus = true
@@ -9146,18 +9684,39 @@ export default defineComponent({
       })
     })
 
+    const reScrollFlag = ref(0)
+    watch(computeSize, () => {
+      reScrollFlag.value++
+    })
     watch(() => props.showHeader, () => {
-      nextTick(() => {
-        tableMethods.recalculate(true).then(() => tableMethods.refreshScroll())
-      })
+      reScrollFlag.value++
     })
-
     watch(() => props.showFooter, () => {
+      reScrollFlag.value++
+    })
+    watch(reScrollFlag, () => {
       nextTick(() => {
         tableMethods.recalculate(true).then(() => tableMethods.refreshScroll())
       })
     })
 
+    const reLayoutFlag = ref(0)
+    watch(() => props.height, () => {
+      reLayoutFlag.value++
+    })
+    watch(() => props.maxHeight, () => {
+      reLayoutFlag.value++
+    })
+    watch(computeScrollbarXToTop, () => {
+      reLayoutFlag.value++
+    })
+    watch(computeScrollbarYToLeft, () => {
+      reLayoutFlag.value++
+    })
+    watch(reLayoutFlag, () => {
+      nextTick(() => tableMethods.recalculate(true))
+    })
+
     const footFlag = ref(0)
     watch(() => props.footerData ? props.footerData.length : -1, () => {
       footFlag.value++
@@ -9169,26 +9728,12 @@ export default defineComponent({
       tableMethods.updateFooter()
     })
 
-    watch(() => props.height, () => {
-      nextTick(() => tableMethods.recalculate(true))
-    })
-
-    watch(() => props.maxHeight, () => {
-      nextTick(() => tableMethods.recalculate(true))
-    })
-
-    watch(computeSize, () => {
-      nextTick(() => {
-        tableMethods.recalculate(true).then(() => tableMethods.refreshScroll())
-      })
-    })
-
     watch(() => props.syncResize, (value) => {
       if (value) {
-        handleUupdateResize()
+        handleUpdateResize()
         nextTick(() => {
-          handleUupdateResize()
-          setTimeout(() => handleUupdateResize())
+          handleUpdateResize()
+          setTimeout(() => handleUpdateResize())
         })
       }
     })
@@ -9300,6 +9845,9 @@ export default defineComponent({
           if (props.showFooter && !(props.footerMethod || props.footerData)) {
             warnLog('vxe.error.reqProp', ['footer-data | footer-method'])
           }
+          if (rowOpts.height) {
+            warnLog('vxe.error.delProp', ['row-config.height', 'cell-config.height'])
+          }
           // if (props.highlightCurrentRow) {
           //   warnLog('vxe.error.delProp', ['highlight-current-row', 'row-config.isCurrent'])
           // }
@@ -9411,7 +9959,7 @@ export default defineComponent({
           visibleSize: 0
         })
 
-        loadTableData(data || []).then(() => {
+        loadTableData(data || [], true).then(() => {
           if (data && data.length) {
             internalData.inited = true
             internalData.initStatus = true