vxe-table 4.10.6-beta.9 → 4.10.7

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,8 +268,9 @@ export default defineComponent({
       dragCol: null,
       dragTipText: '',
 
-      _isResize: false,
-      isLoading: false
+      isDragResize: false,
+      isRowLoading: false,
+      isColLoading: false
     })
 
     const internalData: TableInternalData = {
@@ -344,10 +345,6 @@ export default defineComponent({
       fullDataRowIdData: {},
       fullColumnIdData: {},
       fullColumnFieldData: {},
-      // 列选取状态
-      columnStatusMaps: {},
-      // 行选取状态
-      rowStatusMaps: {},
       // prevDragRow: null,
 
       inited: false,
@@ -380,8 +377,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>()
@@ -487,7 +484,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(() => {
@@ -495,7 +492,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(() => {
@@ -534,6 +539,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
     })
@@ -755,8 +771,8 @@ export default defineComponent({
       refTableRightFooter,
       refLeftContainer,
       refRightContainer,
-      refCellResizeBar,
-      refCellResizeTip,
+      refColResizeBar,
+      refRowResizeBar,
       refScrollXVirtualElem,
       refScrollYVirtualElem,
       refScrollXHandleElem,
@@ -779,6 +795,8 @@ export default defineComponent({
       computeScrollYThreshold,
       computeDefaultRowHeight,
       computeCellOpts,
+      computeHeaderCellOpts,
+      computeFooterCellOpts,
       computeRowOpts,
       computeRowDragOpts,
       computeColumnDragOpts,
@@ -920,13 +938,13 @@ export default defineComponent({
     }
 
     const computeRowHeight = () => {
-      const { showOverflow } = props
+      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 (showOverflow) {
+      if (isAllOverflow) {
         if (tableBodyElem) {
           const tableHeaderElem = tableHeader ? tableHeader.$el as HTMLDivElement : null
           let firstTrElem
@@ -949,9 +967,11 @@ export default defineComponent({
     }
 
     const handleVirtualYVisible = (currScrollTop?: number) => {
-      const { showOverflow } = props
-      const { rowHeight } = reactData
-      const { elemStore, afterFullData, fullAllDataRowIdData } = internalData
+      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 clientHeight = bodyScrollElem.clientHeight
@@ -960,15 +980,16 @@ export default defineComponent({
         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 || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight
             if (toVisibleIndex === -1 && scrollTop < offsetTop) {
               toVisibleIndex = rIndex
             }
@@ -1306,55 +1327,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')
+      }
     }
 
     /**
@@ -1396,39 +1401,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
@@ -1468,7 +1473,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
@@ -1478,7 +1483,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
@@ -1489,58 +1494,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>.vxe-cell--auto-wrapper`)
-          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) => {
@@ -1574,7 +1558,7 @@ export default defineComponent({
           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, oTop: 0 }
+          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
         }
@@ -1603,7 +1587,7 @@ export default defineComponent({
             rowRest.seq = seq
             rowRest.treeIndex = index
           } else {
-            const rest = { row, rowid, seq, index: -1, $index: -1, _index: -1, treeIndex: -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
           }
@@ -1792,14 +1776,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
@@ -1807,17 +1793,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) {
@@ -1836,28 +1822,28 @@ export default defineComponent({
       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 xWrapperEl = refScrollXWrapperElem.value
       if (xWrapperEl) {
-        xWrapperEl.style.left = scrollbarXToTop ? `${scrollbarWidth}px` : ''
-        xWrapperEl.style.width = `${el.clientWidth - scrollbarWidth}px`
+        xWrapperEl.style.left = scrollbarXToTop ? `${osbWidth}px` : ''
+        xWrapperEl.style.width = `${el.clientWidth - osbWidth}px`
       }
       if (xLeftCornerEl) {
-        xLeftCornerEl.style.width = scrollbarXToTop ? `${scrollbarWidth}px` : ''
-        xLeftCornerEl.style.display = scrollbarXToTop ? (scrollbarWidth && scrollbarHeight ? 'block' : '') : ''
+        xLeftCornerEl.style.width = scrollbarXToTop ? `${osbWidth}px` : ''
+        xLeftCornerEl.style.display = scrollbarXToTop ? (osbWidth && osbHeight ? 'block' : '') : ''
       }
       if (xRightCornerEl) {
-        xRightCornerEl.style.width = scrollbarXToTop ? '' : `${scrollbarWidth}px`
-        xRightCornerEl.style.display = scrollbarXToTop ? '' : (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) {
@@ -1983,7 +1969,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`
             }
 
@@ -1992,7 +1978,7 @@ export default defineComponent({
 
             let isOptimizeMode = false
             // 如果是使用优化模式
-            if (scrollXLoad || scrollYLoad || (allColumnOverflow && isAllOverflow)) {
+            if (scrollXLoad || scrollYLoad || isAllOverflow) {
               if (expandColumn || spanMethod || footerSpanMethod) {
                 // 如果不支持优化模式
               } else {
@@ -2018,7 +2004,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) {
@@ -2058,7 +2044,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`
                 }
               }
             }
@@ -2081,7 +2067,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'
@@ -2674,12 +2660,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 = []
@@ -2724,43 +2709,30 @@ export default defineComponent({
       scrollYStore.endIndex = 1
       scrollXStore.startIndex = 0
       scrollXStore.endIndex = 1
+      reactData.isRowLoading = true
       reactData.scrollVMLoading = false
       editStore.insertMaps = {}
       editStore.removeMaps = {}
       const sYLoad = updateScrollYStatus(fullData)
+      reactData.isDragColMove = false
       reactData.isDragRowMove = false
       // 全量数据
       internalData.tableFullData = fullData
       internalData.tableFullTreeData = treeData
       // 缓存数据
-      tablePrivateMethods.cacheRowMap(true)
+      $xeTable.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'])
-          }
-        }
+        $xeTable.cacheSourceMap(fullData)
       }
       if ($xeTable.clearCellAreas && props.mouseConfig) {
         $xeTable.clearCellAreas()
@@ -2780,6 +2752,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 => {
@@ -2797,6 +2793,7 @@ export default defineComponent({
               if (sYOpts.scrollToTopOnChange) {
                 targetScrollTop = 0
               }
+              reactData.isRowLoading = false
               calcCellHeight()
               // 是否变更虚拟滚动
               if (oldScrollYLoad === sYLoad) {
@@ -3031,13 +3028,12 @@ export default defineComponent({
       internalData.collectColumn = collectColumn
       const tableFullColumn = getColumnList(collectColumn)
       internalData.tableFullColumn = tableFullColumn
-      reactData.isLoading = true
+      reactData.isColLoading = true
       reactData.isDragColMove = false
       initColumnSort()
       return Promise.resolve(
         restoreCustomStorage()
       ).then(() => {
-        reactData.isLoading = false
         cacheColumnMap()
         parseColumns(true).then(() => {
           if (reactData.scrollXLoad) {
@@ -3062,6 +3058,7 @@ export default defineComponent({
           if ($xeTable.handleUpdateCustomColumn) {
             $xeTable.handleUpdateCustomColumn()
           }
+          reactData.isColLoading = false
           return $xeTable.recalculate()
         })
       })
@@ -3182,11 +3179,10 @@ export default defineComponent({
      * 纵向 Y 可视渲染处理
      */
     const loadScrollYData = (scrollTop?: number) => {
-      const { showOverflow } = props
-      const { mergeList } = reactData
+      const { mergeList, isAllOverflow } = reactData
       const { scrollYStore } = internalData
       const { preloadSize, startIndex, endIndex, offsetSize } = scrollYStore
-      const autoOffsetYSize = showOverflow ? offsetSize : offsetSize + 1
+      const autoOffsetYSize = isAllOverflow ? offsetSize : offsetSize + 1
       const { toVisibleIndex, visibleSize } = handleVirtualYVisible(scrollTop)
       const offsetItem = {
         startIndex: Math.max(0, toVisibleIndex - 1 - offsetSize - preloadSize),
@@ -3235,7 +3231,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)
       }
@@ -3251,8 +3247,9 @@ export default defineComponent({
     }
 
     const lazyScrollYData = () => {
-      const { lyTimeout, lyRunTime } = internalData
-      const fpsTime = Math.floor(Math.max(4, Math.min(10, 20 / 3)))
+      const { lyTimeout, lyRunTime, scrollYStore } = internalData
+      const { visibleSize } = scrollYStore
+      const fpsTime = Math.floor(Math.max(4, Math.min(10, visibleSize / 3)))
       if (lyTimeout) {
         clearTimeout(lyTimeout)
       }
@@ -3276,12 +3273,14 @@ 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()
@@ -3296,6 +3295,45 @@ export default defineComponent({
       }, 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))
     }
@@ -3309,13 +3347,34 @@ export default defineComponent({
       return nextTick()
     }
 
-    function handleUupdateResize () {
+    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,
       /**
@@ -3368,7 +3427,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) {
@@ -3386,7 +3445,7 @@ export default defineComponent({
           .then(() => {
             internalData.inited = true
             internalData.initStatus = true
-            return loadTableData(datas)
+            return loadTableData(datas, true)
           }).then(() => {
             handleLoadDefaults()
             return tableMethods.recalculate()
@@ -3475,7 +3534,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, treeIndex: -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 })
@@ -3700,29 +3759,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}`)
@@ -4127,29 +4187,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)
@@ -4182,6 +4247,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 || cellOpts.height || rowOpts.height || rowRest.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 || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight
+        }
+        return 0
+      },
       /**
        * 刷新滚动操作，手动同步滚动相关位置（对于某些特殊的操作，比如滚动条错位、固定列不同步）
        */
@@ -5202,13 +5354,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
         }
       },
       /**
@@ -5258,8 +5410,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) {
@@ -5273,7 +5424,7 @@ export default defineComponent({
         }
         return Promise.all(rest).then(() => {
           if (row) {
-            if (!showOverflow && (scrollYLoad || scrollXLoad)) {
+            if (!isAllOverflow && (scrollYLoad || scrollXLoad)) {
               calcCellHeight()
               calcCellWidth()
             }
@@ -6225,9 +6376,11 @@ 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) {
@@ -6238,14 +6391,14 @@ export default defineComponent({
             const trRect = trEl.getBoundingClientRect()
             let trHeight = trEl.clientHeight
             const offsetTop = Math.max(1, trRect.y - wrapperRect.y)
-            if (offsetTop + trHeight > tableHeight - scrollbarHeight) {
-              trHeight = tableHeight - offsetTop - scrollbarHeight
+            if (offsetTop + trHeight > tableHeight - osbHeight) {
+              trHeight = tableHeight - offsetTop - osbHeight
             }
             rdLineEl.style.display = 'block'
-            rdLineEl.style.left = `${scrollbarYToLeft ? scrollbarWidth : 0}px`
+            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 {
@@ -6270,7 +6423,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
             }
@@ -6281,7 +6434,7 @@ export default defineComponent({
             if (prevDragToChild) {
               cdLineEl.style.height = `${thRect.height}px`
             } else {
-              cdLineEl.style.height = `${tableHeight - offsetTop - (scrollbarXToTop ? 0 : scrollbarHeight)}px`
+              cdLineEl.style.height = `${tableHeight - offsetTop - (scrollbarXToTop ? 0 : osbHeight)}px`
             }
             cdLineEl.setAttribute('drag-pos', dragPos)
             cdLineEl.setAttribute('drag-to-child', prevDragToChild ? 'y' : 'n')
@@ -6319,11 +6472,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
@@ -6473,9 +6626,8 @@ export default defineComponent({
       },
       /**
        * 更新数据行的 Map
-       * 牺牲数据组装的耗时，用来换取使用过程中的流畅
        */
-      cacheRowMap (isSource) {
+      cacheRowMap (isReset, isSource) {
         const { treeConfig } = props
         const treeOpts = computeTreeOpts.value
         const { fullAllDataRowIdData, tableFullData, tableFullTreeData } = internalData
@@ -6497,8 +6649,8 @@ export default defineComponent({
             row[childrenField] = null
           }
           let cacheItem = fullAllDataRowIdData[rowid]
-          if (!cacheItem) {
-            cacheItem = { row, rowid, seq, index: -1, _index: -1, $index: -1, treeIndex: index, 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
@@ -6588,11 +6740,155 @@ 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 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
           let resizeColumn = column
@@ -6607,20 +6903,166 @@ export default defineComponent({
           const cell = dragBtnElem.parentNode as HTMLTableCellElement
           const cellParams = Object.assign(params, { cell })
           const colMinWidth = getColReMinWidth(cellParams)
+
+          el.setAttribute('data-calc-col', 'Y')
           let resizeWidth = calcColumnAutoWidth(resizeColumn, el)
+          el.removeAttribute('data-calc-col')
           if (colRest) {
             resizeWidth = Math.max(resizeWidth, colRest.width)
           }
-          resizeColumn.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 || cellOpts.height || rowOpts.height || rowRest.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) {
@@ -6967,10 +7409,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)
         }
       },
       /**
@@ -6983,7 +7436,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)) {
@@ -6997,17 +7450,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)
         }
       },
       /**
@@ -7019,7 +7462,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 () {
@@ -7032,11 +7475,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) {
@@ -7066,7 +7509,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
@@ -7158,7 +7604,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
@@ -7367,10 +7816,13 @@ export default defineComponent({
        */
       triggerSortEvent (evnt, column, order) {
         const sortOpts = computeSortOpts.value
+        const { multiple, allowClear } = sortOpts
         const { field, sortable } = column
         if (sortable) {
           if (!order || column.order === order) {
-            tableMethods.clearSort(sortOpts.multiple ? column : null)
+            if (allowClear) {
+              tableMethods.clearSort(multiple ? column : null)
+            }
           } else {
             tableMethods.sort({ field, order })
           }
@@ -7462,7 +7914,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
@@ -7472,17 +7924,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
               }
@@ -7562,7 +8012,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)
@@ -7579,13 +8033,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
                     })
                   }
                 }
@@ -7606,7 +8060,7 @@ export default defineComponent({
 
               reactData.isDragRowMove = true
               $xeTable.handleTableData(treeConfig && transform)
-              $xeTable.cacheRowMap()
+              $xeTable.cacheRowMap(false)
               updateScrollYStatus()
               if (!(treeConfig && transform)) {
                 $xeTable.updateAfterDataIndex()
@@ -7624,7 +8078,7 @@ export default defineComponent({
                 oldRow: dragRow,
                 newRow: prevDragRow,
                 dragPos: prevDragPos as any,
-                dragToChild: !!prevDragToChild,
+                dragToChild: isDragToChildFlag,
                 offsetIndex: dragOffsetIndex,
                 _index: {
                   newIndex: nafIndex,
@@ -7645,18 +8099,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)
@@ -7759,7 +8211,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) {
@@ -7767,17 +8219,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
               }
@@ -7873,7 +8323,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 {
@@ -7907,7 +8357,7 @@ export default defineComponent({
                 oldColumn,
                 newColumn,
                 dragPos: prevDragPos,
-                dragToChild: !!prevDragToChild,
+                dragToChild: isDragToChildFlag,
                 offsetIndex: dragOffsetIndex,
                 _index: {
                   newIndex: nafIndex,
@@ -8155,7 +8605,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'])
@@ -8166,6 +8616,9 @@ export default defineComponent({
         if (inWheelScroll || inVirtualScroll || inHeaderScroll || inFooterScroll) {
           return
         }
+        if (intoRunScroll) {
+          return
+        }
         if (!bodyScrollElem) {
           return
         }
@@ -8220,22 +8673,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) {
-          return
-        }
-        if (inVirtualScroll) {
-          return
-        }
-        if (inBodyScroll) {
+        if (inWheelScroll || inVirtualScroll || inBodyScroll || inFooterScroll) {
           return
         }
-        if (inFooterScroll) {
+        if (intoRunScroll) {
           return
         }
         if (!headerScrollElem) {
@@ -8262,22 +8709,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) {
@@ -8304,7 +8745,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
@@ -8323,30 +8767,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
         }
 
@@ -8362,17 +8790,31 @@ export default defineComponent({
             $xeTable.clearHoverRow()
           }
 
-          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: 'table',
-            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) {
@@ -8511,34 +8953,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 || cellOpts.height || rowOpts.height || rowRest.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 || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight
             }
           }
         } else {
@@ -8563,17 +9005,17 @@ export default defineComponent({
         if (scrollYSpaceEl) {
           scrollYSpaceEl.style.height = ySpaceHeight ? `${ySpaceHeight}px` : ''
         }
-        nextTick(() => {
+        return nextTick().then(() => {
           updateStyle()
         })
       },
       updateScrollXData () {
-        const { showOverflow } = props
+        const { isAllOverflow } = reactData
         handleTableColumn()
         return nextTick().then(() => {
           handleTableColumn()
           $xeTable.updateScrollXSpace()
-          if (!showOverflow) {
+          if (!isAllOverflow) {
             $xeTable.updateScrollYSpace()
           }
         })
@@ -8940,10 +9382,11 @@ export default defineComponent({
 
     const renderVN = () => {
       const { loading, stripe, showHeader, height, treeConfig, mouseConfig, showFooter, highlightCell, highlightHoverRow, highlightHoverColumn, editConfig, editRules } = props
-      const { isCalcColumn, isGroup, overflowX, overflowY, scrollXLoad, scrollYLoad, tableData, 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
@@ -8955,7 +9398,7 @@ export default defineComponent({
       const areaOpts = computeAreaOpts.value
       const loadingOpts = computeLoadingOpts.value
       const isMenu = computeIsMenu.value
-      const currLoading = reactData.isLoading || loading
+      const currLoading = reactData.isColLoading || reactData.isRowLoading || loading
       const resizableOpts = computeResizableOpts.value
       const isArea = mouseConfig && mouseOpts.area
       const columnDragOpts = computeColumnDragOpts.value
@@ -8976,7 +9419,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,
@@ -8985,7 +9427,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,
@@ -9039,13 +9480,26 @@ export default defineComponent({
          * 列宽线
          */
         h('div', {
-          key: 'cl',
-          ref: refCellResizeBar,
-          class: 'vxe-table--resizable-bar'
+          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'
               })
             ]
@@ -9142,10 +9596,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
+            }),
             /**
               * 校验提示
               */
@@ -9156,7 +9614,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)
           ])
@@ -9177,7 +9638,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
@@ -9276,10 +9737,10 @@ export default defineComponent({
 
     watch(() => props.syncResize, (value) => {
       if (value) {
-        handleUupdateResize()
+        handleUpdateResize()
         nextTick(() => {
-          handleUupdateResize()
-          setTimeout(() => handleUupdateResize())
+          handleUpdateResize()
+          setTimeout(() => handleUpdateResize())
         })
       }
     })
@@ -9391,6 +9852,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'])
           // }
@@ -9502,7 +9966,7 @@ export default defineComponent({
           visibleSize: 0
         })
 
-        loadTableData(data || []).then(() => {
+        loadTableData(data || [], true).then(() => {
           if (data && data.length) {
             internalData.inited = true
             internalData.initStatus = true