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

package/es/table/src/table.js

@@ -1,6 +1,6 @@
 import { defineComponent, h, reactive, 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';
@@ -32,7 +32,6 @@ export default defineComponent({
         const $xeTabs = inject('$xeTabs', null);
         const { computeSize } = useFns.useSize(props);
         const reactData = reactive({
-            isCalcColumn: false,
             // 低性能的静态列
             staticColumns: [],
             // 渲染的列分组
@@ -245,14 +244,15 @@ export default defineComponent({
                 isFooter: false
             },
             scrollVMLoading: false,
-            isCalcCellHeight: 0,
+            calcCellHeightFlag: 0,
+            resizeHeightFlag: 0,
             isCustomStatus: false,
             isDragRowMove: false,
             dragRow: null,
             isDragColMove: false,
             dragCol: null,
             dragTipText: '',
-            _isResize: false,
+            isDragResize: false,
             isLoading: false
         });
         const internalData = {
@@ -327,10 +327,6 @@ export default defineComponent({
             fullDataRowIdData: {},
             fullColumnIdData: {},
             fullColumnFieldData: {},
-            // 列选取状态
-            columnStatusMaps: {},
-            // 行选取状态
-            rowStatusMaps: {},
             // prevDragRow: null,
             inited: false,
             tooltipTimeout: null,
@@ -358,8 +354,8 @@ export default defineComponent({
         const refTableRightFooter = ref();
         const refLeftContainer = ref();
         const refRightContainer = ref();
-        const refCellResizeBar = ref();
-        const refCellResizeTip = ref();
+        const refColResizeBar = ref();
+        const refRowResizeBar = ref();
         const refEmptyPlaceholder = ref();
         const refDragTipElem = ref();
         const refDragRowLineElem = ref();
@@ -367,9 +363,12 @@ export default defineComponent({
         const refScrollXVirtualElem = ref();
         const refScrollYVirtualElem = ref();
         const refScrollXHandleElem = ref();
+        const refScrollXLeftCornerElem = ref();
         const refScrollXRightCornerElem = ref();
         const refScrollYHandleElem = ref();
         const refScrollYTopCornerElem = ref();
+        const refScrollXWrapperElem = ref();
+        const refScrollYWrapperElem = ref();
         const refScrollYBottomCornerElem = ref();
         const refScrollXSpaceElem = ref();
         const refScrollYSpaceElem = ref();
@@ -419,6 +418,14 @@ export default defineComponent({
         const computeScrollbarOpts = computed(() => {
             return Object.assign({}, getConfig().table.scrollbarConfig, props.scrollbarConfig);
         });
+        const computeScrollbarXToTop = computed(() => {
+            const scrollbarOpts = computeScrollbarOpts.value;
+            return !!(scrollbarOpts.x && scrollbarOpts.x.position === 'top');
+        });
+        const computeScrollbarYToLeft = computed(() => {
+            const scrollbarOpts = computeScrollbarOpts.value;
+            return !!(scrollbarOpts.y && scrollbarOpts.y.position === 'left');
+        });
         const computeScrollYThreshold = computed(() => {
             const sYOpts = computeSYOpts.value;
             const { threshold } = sYOpts;
@@ -438,7 +445,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(() => {
             return Object.assign({}, getConfig().table.columnConfig, props.columnConfig);
@@ -446,6 +453,12 @@ export default defineComponent({
         const computeCellOpts = computed(() => {
             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(() => {
             return Object.assign({}, getConfig().table.rowConfig, props.rowConfig);
         });
@@ -473,6 +486,15 @@ export default defineComponent({
         const computeTooltipOpts = computed(() => {
             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);
         });
@@ -663,8 +685,8 @@ export default defineComponent({
             refTableRightFooter,
             refLeftContainer,
             refRightContainer,
-            refCellResizeBar,
-            refCellResizeTip,
+            refColResizeBar,
+            refRowResizeBar,
             refScrollXVirtualElem,
             refScrollYVirtualElem,
             refScrollXHandleElem,
@@ -679,11 +701,15 @@ export default defineComponent({
             computeVirtualXOpts,
             computeVirtualYOpts,
             computeScrollbarOpts,
+            computeScrollbarXToTop,
+            computeScrollbarYToLeft,
             computeColumnOpts,
             computeScrollXThreshold,
             computeScrollYThreshold,
             computeDefaultRowHeight,
             computeCellOpts,
+            computeHeaderCellOpts,
+            computeFooterCellOpts,
             computeRowOpts,
             computeRowDragOpts,
             computeColumnDragOpts,
@@ -814,49 +840,59 @@ export default defineComponent({
             return { toVisibleIndex: 0, visibleSize: 6 };
         };
         const computeRowHeight = () => {
+            const { isAllOverflow } = reactData;
             const tableHeader = refTableHeader.value;
             const tableBody = refTableBody.value;
             const tableBodyElem = tableBody ? tableBody.$el : null;
             const defaultRowHeight = computeDefaultRowHeight.value;
             let rowHeight = 0;
-            if (tableBodyElem) {
-                const tableHeaderElem = tableHeader ? tableHeader.$el : null;
-                let firstTrElem;
-                firstTrElem = tableBodyElem.querySelector('tr');
-                if (!firstTrElem && tableHeaderElem) {
-                    firstTrElem = tableHeaderElem.querySelector('tr');
+            if (isAllOverflow) {
+                if (tableBodyElem) {
+                    const tableHeaderElem = tableHeader ? tableHeader.$el : null;
+                    let firstTrElem;
+                    firstTrElem = tableBodyElem.querySelector('tr');
+                    if (!firstTrElem && tableHeaderElem) {
+                        firstTrElem = tableHeaderElem.querySelector('tr');
+                    }
+                    if (firstTrElem) {
+                        rowHeight = firstTrElem.clientHeight;
+                    }
                 }
-                if (firstTrElem) {
-                    rowHeight = firstTrElem.clientHeight;
+                if (!rowHeight) {
+                    rowHeight = defaultRowHeight;
                 }
             }
-            if (!rowHeight) {
+            else {
                 rowHeight = defaultRowHeight;
             }
             // 最低支持 18px 行高
             return Math.max(18, rowHeight);
         };
-        const handleVirtualYVisible = () => {
-            const { showOverflow } = props;
-            const { rowHeight } = reactData;
-            const { elemStore, afterFullData, fullAllDataRowIdData } = internalData;
+        const handleVirtualYVisible = (currScrollTop) => {
+            const { isAllOverflow } = reactData;
+            const { elemStore, isResizeCellHeight, afterFullData, fullAllDataRowIdData } = internalData;
+            const rowOpts = computeRowOpts.value;
+            const cellOpts = computeCellOpts.value;
+            const defaultRowHeight = computeDefaultRowHeight.value;
             const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
             if (bodyScrollElem) {
-                const { scrollTop, clientHeight } = bodyScrollElem;
+                const clientHeight = bodyScrollElem.clientHeight;
+                const scrollTop = XEUtils.isNumber(currScrollTop) ? currScrollTop : bodyScrollElem.scrollTop;
                 const endHeight = scrollTop + clientHeight;
                 let toVisibleIndex = -1;
                 let offsetTop = 0;
                 let visibleSize = 0;
-                if (showOverflow) {
-                    toVisibleIndex = Math.floor(scrollTop / rowHeight);
-                    visibleSize = Math.ceil(clientHeight / rowHeight) + 1;
+                const isCustomCellHeight = isResizeCellHeight || cellOpts.height || rowOpts.height;
+                if (!isCustomCellHeight && isAllOverflow) {
+                    toVisibleIndex = Math.floor(scrollTop / defaultRowHeight);
+                    visibleSize = Math.ceil(clientHeight / defaultRowHeight) + 1;
                 }
                 else {
                     for (let rIndex = 0, rLen = afterFullData.length; rIndex < rLen; rIndex++) {
                         const row = afterFullData[rIndex];
                         const rowid = getRowid($xeTable, row);
-                        const rowRest = fullAllDataRowIdData[rowid];
-                        offsetTop += rowRest ? (rowRest.height || rowHeight) : rowHeight;
+                        const rowRest = fullAllDataRowIdData[rowid] || {};
+                        offsetTop += rowRest.resizeHeight || rowRest.height || cellOpts.height || rowOpts.height || defaultRowHeight;
                         if (toVisibleIndex === -1 && scrollTop < offsetTop) {
                             toVisibleIndex = rIndex;
                         }
@@ -1097,7 +1133,7 @@ export default defineComponent({
                     fullColumnFieldData[field] = rest;
                 }
                 else {
-                    if (storage || (columnOpts.drag && (isCrossDrag || isSelfToChildDrag))) {
+                    if ((storage && !type) || (columnOpts.drag && (isCrossDrag || isSelfToChildDrag))) {
                         errLog('vxe.error.reqProp', [`${column.getTitle() || type || ''} -> column.field`]);
                     }
                 }
@@ -1188,55 +1224,38 @@ export default defineComponent({
             internalData.customMaxHeight = calcTableHeight('maxHeight');
         };
         const calcColumnAutoWidth = (column, wrapperEl) => {
-            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;
-                const thElem = cellEl.parentElement;
-                let titleWidth = 0;
-                if (`${thElem.tagName}`.toLowerCase() === 'th') {
-                    XEUtils.arrayEach(cellEl.children, (btnEl) => {
-                        titleWidth += btnEl.offsetWidth + 1;
-                    });
-                }
-                else {
-                    const labelEl = cellEl.firstElementChild;
-                    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];
+                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');
+            }
         };
         /**
          * 列宽算法，计算单元格列宽，动态分配可用剩余空间
@@ -1277,39 +1296,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;
@@ -1350,7 +1369,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;
@@ -1359,7 +1378,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;
@@ -1369,57 +1388,36 @@ export default defineComponent({
                 $xeTable.checkScrolling();
             }
         };
-        // 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, wrapperEl) => {
+            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];
+                const tdEl = cellElem.parentElement;
+                const topBottomPadding = Math.ceil(XEUtils.toNumber(tdEl.style.paddingTop) + XEUtils.toNumber(tdEl.style.paddingBottom));
+                const cellHeight = cellElem ? cellElem.clientHeight : 0;
+                colHeight = Math.max(colHeight - topBottomPadding, Math.ceil(cellHeight));
+            }
+            return colHeight;
+        };
         const calcCellHeight = () => {
-            const { showOverflow } = props;
-            const { tableData, scrollXLoad } = reactData;
+            const { tableData, isAllOverflow, scrollYLoad, scrollXLoad } = reactData;
             const { fullAllDataRowIdData } = internalData;
+            const defaultRowHeight = computeDefaultRowHeight.value;
             const el = refElem.value;
-            if (!showOverflow && el) {
-                let paddingTop = 0;
-                let paddingBottom = 0;
-                let calcPadding = false;
+            if (!isAllOverflow && scrollYLoad && el) {
+                el.setAttribute('data-calc-row', 'Y');
                 tableData.forEach(row => {
                     const rowid = getRowid($xeTable, row);
                     const rowRest = fullAllDataRowIdData[rowid];
-                    const cellList = el.querySelectorAll(`.vxe-body--row[rowid="${rowid}"]>.vxe-body--column>.vxe-cell`);
-                    if (rowRest && cellList.length) {
-                        let height = 0;
-                        for (let i = 0; i < cellList.length; i++) {
-                            const cellElem = cellList[i];
-                            const tdEl = cellElem.parentElement;
-                            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) => {
             const { sortBy, sortType } = column;
@@ -1443,14 +1441,35 @@ export default defineComponent({
                 return cellValue;
             };
         };
+        const updateAfterListIndex = () => {
+            const { afterFullData, fullDataRowIdData, fullAllDataRowIdData } = internalData;
+            const fullMaps = {};
+            afterFullData.forEach((row, index) => {
+                const rowid = getRowid($xeTable, row);
+                const rowRest = fullAllDataRowIdData[rowid];
+                const seq = index + 1;
+                if (rowRest) {
+                    rowRest.seq = seq;
+                    rowRest._index = index;
+                }
+                else {
+                    const rest = { row, rowid, seq, index: -1, $index: -1, _index: index, treeIndex: -1, items: [], parent: null, level: 0, height: 0, resizeHeight: 0, oTop: 0 };
+                    fullAllDataRowIdData[rowid] = rest;
+                    fullDataRowIdData[rowid] = rest;
+                }
+                fullMaps[rowid] = row;
+            });
+            internalData.afterFullRowMaps = fullMaps;
+        };
         /**
          * 预编译
          * 对渲染中的数据提前解析序号及索引。牺牲提前编译耗时换取渲染中额外损耗，使运行时更加流畅
          */
         const updateAfterDataIndex = () => {
             const { treeConfig } = props;
-            const { afterFullData, fullDataRowIdData, fullAllDataRowIdData, afterTreeFullData } = internalData;
+            const { fullDataRowIdData, fullAllDataRowIdData, afterTreeFullData } = internalData;
             const treeOpts = computeTreeOpts.value;
+            const { transform } = treeOpts;
             const childrenField = treeOpts.children || treeOpts.childrenField;
             const fullMaps = {};
             if (treeConfig) {
@@ -1460,34 +1479,21 @@ export default defineComponent({
                     const seq = path.map((num, i) => i % 2 === 0 ? (Number(num) + 1) : '.').join('');
                     if (rowRest) {
                         rowRest.seq = seq;
-                        rowRest._index = index;
+                        rowRest.treeIndex = index;
                     }
                     else {
-                        const rest = { row, rowid, seq, index: -1, $index: -1, _index: -1, items: [], parent: null, level: 0, height: 0, oTop: 0 };
+                        const rest = { row, rowid, seq, index: -1, $index: -1, _index: -1, treeIndex: -1, items: [], parent: null, level: 0, height: 0, resizeHeight: 0, oTop: 0 };
                         fullAllDataRowIdData[rowid] = rest;
                         fullDataRowIdData[rowid] = rest;
                     }
                     fullMaps[rowid] = row;
-                }, { children: treeOpts.transform ? treeOpts.mapChildrenField : childrenField });
+                }, { children: transform ? treeOpts.mapChildrenField : childrenField });
+                internalData.afterFullRowMaps = fullMaps;
+                updateAfterListIndex();
             }
             else {
-                afterFullData.forEach((row, index) => {
-                    const rowid = getRowid($xeTable, row);
-                    const rowRest = fullAllDataRowIdData[rowid];
-                    const seq = index + 1;
-                    if (rowRest) {
-                        rowRest.seq = seq;
-                        rowRest._index = index;
-                    }
-                    else {
-                        const rest = { row, rowid, seq, index: -1, $index: -1, _index: index, items: [], parent: null, level: 0, height: 0, oTop: 0 };
-                        fullAllDataRowIdData[rowid] = rest;
-                        fullDataRowIdData[rowid] = rest;
-                    }
-                    fullMaps[rowid] = row;
-                });
+                updateAfterListIndex();
             }
-            internalData.afterFullRowMaps = fullMaps;
         };
         /**
          * 如果为虚拟树，将树结构拍平
@@ -1665,14 +1671,16 @@ export default defineComponent({
             updateAfterDataIndex();
         };
         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;
@@ -1680,16 +1688,16 @@ 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) {
@@ -1702,35 +1710,42 @@ export default defineComponent({
                 }
                 bodyHeight = Math.max(bodyMinHeight, bodyHeight);
             }
+            const xLeftCornerEl = refScrollXLeftCornerElem.value;
+            const xRightCornerEl = refScrollXRightCornerElem.value;
+            const scrollbarXToTop = computeScrollbarXToTop.value;
             const scrollXVirtualEl = refScrollXVirtualElem.value;
             if (scrollXVirtualEl) {
-                scrollXVirtualEl.style.height = `${scrollbarHeight}px`;
-                scrollXVirtualEl.style.visibility = scrollbarHeight ? 'visible' : 'hidden';
+                scrollXVirtualEl.style.height = `${osbHeight}px`;
+                scrollXVirtualEl.style.visibility = overflowX ? 'visible' : 'hidden';
             }
-            const xHandleEl = refScrollXHandleElem.value;
-            if (xHandleEl) {
-                xHandleEl.style.width = `${el.clientWidth - scrollbarWidth}px`;
+            const xWrapperEl = refScrollXWrapperElem.value;
+            if (xWrapperEl) {
+                xWrapperEl.style.left = scrollbarXToTop ? `${osbWidth}px` : '';
+                xWrapperEl.style.width = `${el.clientWidth - osbWidth}px`;
+            }
+            if (xLeftCornerEl) {
+                xLeftCornerEl.style.width = scrollbarXToTop ? `${osbWidth}px` : '';
+                xLeftCornerEl.style.display = scrollbarXToTop ? (osbWidth && osbHeight ? 'block' : '') : '';
             }
-            const xRightCornerEl = refScrollXRightCornerElem.value;
             if (xRightCornerEl) {
-                xRightCornerEl.style.width = `${scrollbarWidth}px`;
-                xRightCornerEl.style.display = scrollbarWidth && scrollbarHeight ? 'block' : '';
+                xRightCornerEl.style.width = scrollbarXToTop ? '' : `${osbWidth}px`;
+                xRightCornerEl.style.display = scrollbarXToTop ? '' : (osbWidth && osbHeight ? 'block' : '');
             }
             const scrollYVirtualEl = refScrollYVirtualElem.value;
             if (scrollYVirtualEl) {
-                scrollYVirtualEl.style.width = `${scrollbarWidth}px`;
+                scrollYVirtualEl.style.width = `${osbWidth}px`;
                 scrollYVirtualEl.style.height = `${bodyHeight + headerHeight + footerHeight}px`;
-                scrollYVirtualEl.style.visibility = scrollbarWidth ? 'visible' : 'hidden';
+                scrollYVirtualEl.style.visibility = overflowY ? 'visible' : 'hidden';
             }
             const yTopCornerEl = refScrollYTopCornerElem.value;
             if (yTopCornerEl) {
                 yTopCornerEl.style.height = `${headerHeight}px`;
                 yTopCornerEl.style.display = headerHeight ? 'block' : '';
             }
-            const yHandleEl = refScrollYHandleElem.value;
-            if (yHandleEl) {
-                yHandleEl.style.height = `${bodyHeight}px`;
-                yHandleEl.style.top = `${headerHeight}px`;
+            const yWrapperEl = refScrollYWrapperElem.value;
+            if (yWrapperEl) {
+                yWrapperEl.style.height = `${bodyHeight}px`;
+                yWrapperEl.style.top = `${headerHeight}px`;
             }
             const yBottomCornerEl = refScrollYBottomCornerElem.value;
             if (yBottomCornerEl) {
@@ -1838,14 +1853,14 @@ 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`;
                         }
                         let tWidth = tableWidth;
                         let renderColumnList = tableColumn;
                         let isOptimizeMode = false;
                         // 如果是使用优化模式
-                        if (scrollXLoad || scrollYLoad || (allColumnOverflow && isAllOverflow)) {
+                        if (scrollXLoad || scrollYLoad || isAllOverflow) {
                             if (expandColumn || spanMethod || footerSpanMethod) {
                                 // 如果不支持优化模式
                             }
@@ -1868,7 +1883,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) {
@@ -1905,7 +1920,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`;
                                 }
                             }
                         }
@@ -1930,7 +1945,7 @@ export default defineComponent({
                                     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';
@@ -2448,13 +2463,13 @@ export default defineComponent({
             return nextTick().then(() => {
                 const { scrollXLoad, scrollYLoad } = reactData;
                 const { scrollXStore, scrollYStore } = internalData;
-                const sYOpts = computeSYOpts.value;
-                const sXOpts = computeSXOpts.value;
+                const virtualYOpts = computeVirtualYOpts.value;
+                const virtualXOpts = computeVirtualXOpts.value;
                 // 计算 X 逻辑
                 if (scrollXLoad) {
                     const { toVisibleIndex: toXVisibleIndex, visibleSize: visibleXSize } = handleVirtualXVisible();
-                    const offsetXSize = Math.max(0, sXOpts.oSize ? XEUtils.toNumber(sXOpts.oSize) : 0);
-                    scrollXStore.preloadSize = 4;
+                    const offsetXSize = Math.max(0, virtualXOpts.oSize ? XEUtils.toNumber(virtualXOpts.oSize) : 0);
+                    scrollXStore.preloadSize = XEUtils.toNumber(virtualXOpts.preSize);
                     scrollXStore.offsetSize = offsetXSize;
                     scrollXStore.visibleSize = visibleXSize;
                     scrollXStore.endIndex = Math.max(scrollXStore.startIndex + scrollXStore.visibleSize + offsetXSize, scrollXStore.endIndex);
@@ -2467,15 +2482,14 @@ export default defineComponent({
                 else {
                     $xeTable.updateScrollXSpace();
                 }
-                calcCellHeight();
                 // 计算 Y 逻辑
                 const rowHeight = computeRowHeight();
                 scrollYStore.rowHeight = rowHeight;
                 reactData.rowHeight = rowHeight;
                 const { toVisibleIndex: toYVisibleIndex, visibleSize: visibleYSize } = handleVirtualYVisible();
                 if (scrollYLoad) {
-                    const offsetYSize = Math.max(0, sYOpts.oSize ? XEUtils.toNumber(sYOpts.oSize) : 0);
-                    scrollYStore.preloadSize = 2;
+                    const offsetYSize = Math.max(0, virtualYOpts.oSize ? XEUtils.toNumber(virtualYOpts.oSize) : 0);
+                    scrollYStore.preloadSize = XEUtils.toNumber(virtualYOpts.preSize);
                     scrollYStore.offsetSize = offsetYSize;
                     scrollYStore.visibleSize = visibleYSize;
                     scrollYStore.endIndex = Math.max(scrollYStore.startIndex + visibleYSize + offsetYSize, scrollYStore.endIndex);
@@ -2501,12 +2515,13 @@ export default defineComponent({
             }
             calcCellWidth();
             autoCellWidth();
+            updateStyle();
             return computeScrollLoad().then(() => {
                 if (reFull === true) {
                     // 初始化时需要在列计算之后再执行优化运算，达到最优显示效果
-                    calcCellHeight();
                     calcCellWidth();
                     autoCellWidth();
+                    updateStyle();
                     return computeScrollLoad();
                 }
             });
@@ -2515,12 +2530,11 @@ export default defineComponent({
          * 加载表格数据
          * @param {Array} datas 数据
          */
-        const loadTableData = (datas) => {
-            const { keepSource, treeConfig, showOverflow } = props;
+        const loadTableData = (datas, isReset) => {
+            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 = [];
@@ -2575,34 +2589,20 @@ export default defineComponent({
             internalData.tableFullData = fullData;
             internalData.tableFullTreeData = treeData;
             // 缓存数据
-            tablePrivateMethods.cacheRowMap(true);
+            tablePrivateMethods.cacheRowMap(true, isReset);
             // 原始数据
             internalData.tableSynchData = datas;
+            if (isReset) {
+                internalData.isResizeCellHeight = false;
+                reactData.rowExpandedMaps = {};
+                reactData.rowExpandLazyLoadedMaps = {};
+                reactData.treeExpandedMaps = {};
+                reactData.treeExpandLazyLoadedMaps = {};
+            }
             // 克隆原数据，用于显示编辑状态，与编辑值做对比
             if (keepSource) {
                 tablePrivateMethods.cacheSourceMap(fullData);
             }
-            if (sYLoad) {
-                if (showOverflow) {
-                    if (!rowOpts.height) {
-                        const errColumn = internalData.tableFullColumn.find(column => column.showOverflow === false);
-                        if (errColumn) {
-                            errLog('vxe.error.errProp', [`column[field="${errColumn.field}"].show-overflow=false`, 'show-overflow=true']);
-                        }
-                    }
-                }
-                if (process.env.NODE_ENV === 'development') {
-                    if (!(props.height || props.maxHeight)) {
-                        errLog('vxe.error.reqProp', ['table.height | table.max-height | table.scroll-y={enabled: false}']);
-                    }
-                    // if (!props.showOverflow) {
-                    //   warnLog('vxe.error.reqProp', ['table.show-overflow'])
-                    // }
-                    if (props.spanMethod) {
-                        warnLog('vxe.error.scrollErrProp', ['table.span-method']);
-                    }
-                }
-            }
             if ($xeTable.clearCellAreas && props.mouseConfig) {
                 $xeTable.clearCellAreas();
                 $xeTable.clearCopyCellArea();
@@ -2621,6 +2621,27 @@ 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.NODE_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(resolve => {
@@ -2638,6 +2659,7 @@ export default defineComponent({
                         if (sYOpts.scrollToTopOnChange) {
                             targetScrollTop = 0;
                         }
+                        calcCellHeight();
                         // 是否变更虚拟滚动
                         if (oldScrollYLoad === sYLoad) {
                             restoreScrollLocation($xeTable, targetScrollLeft, targetScrollTop)
@@ -2993,8 +3015,9 @@ export default defineComponent({
                 handleVirtualTreeToList();
                 tablePrivateMethods.handleTableData();
                 updateAfterDataIndex();
+                return nextTick();
             }).then(() => {
-                return tableMethods.recalculate();
+                return tableMethods.recalculate(true);
             }).then(() => {
                 setTimeout(() => {
                     tableMethods.updateCellAreas();
@@ -3015,13 +3038,12 @@ export default defineComponent({
         /**
          * 纵向 Y 可视渲染处理
          */
-        const loadScrollYData = () => {
-            const { showOverflow } = props;
-            const { mergeList } = reactData;
+        const loadScrollYData = (scrollTop) => {
+            const { mergeList, isAllOverflow } = reactData;
             const { scrollYStore } = internalData;
             const { preloadSize, startIndex, endIndex, offsetSize } = scrollYStore;
-            const autoOffsetYSize = showOverflow ? offsetSize : offsetSize + 1;
-            const { toVisibleIndex, visibleSize } = handleVirtualYVisible();
+            const autoOffsetYSize = isAllOverflow ? offsetSize : offsetSize + 1;
+            const { toVisibleIndex, visibleSize } = handleVirtualYVisible(scrollTop);
             const offsetItem = {
                 startIndex: Math.max(0, toVisibleIndex - 1 - offsetSize - preloadSize),
                 endIndex: toVisibleIndex + visibleSize + autoOffsetYSize + preloadSize
@@ -3066,7 +3088,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);
             }
@@ -3081,10 +3103,9 @@ export default defineComponent({
             }, fpsTime);
         };
         const lazyScrollYData = () => {
-            const { showOverflow } = props;
             const { lyTimeout, lyRunTime, scrollYStore } = internalData;
             const { visibleSize } = scrollYStore;
-            const fpsTime = showOverflow ? 5 : Math.max(5, Math.min(80, Math.floor(visibleSize / 2)));
+            const fpsTime = Math.floor(Math.max(4, Math.min(10, visibleSize / 3)));
             if (lyTimeout) {
                 clearTimeout(lyTimeout);
             }
@@ -3098,68 +3119,6 @@ export default defineComponent({
                 loadScrollYData();
             }, fpsTime);
         };
-        const scrollXEvent = (evnt) => {
-            const { elemStore, inWheelScroll, lastScrollTop, inHeaderScroll, inBodyScroll, inFooterScroll } = internalData;
-            if (inHeaderScroll || inBodyScroll || inFooterScroll) {
-                return;
-            }
-            if (inWheelScroll) {
-                return;
-            }
-            const headerScrollElem = getRefElem(elemStore['main-header-scroll']);
-            const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
-            const footerScrollElem = getRefElem(elemStore['main-footer-scroll']);
-            const yHandleEl = refScrollYHandleElem.value;
-            const wrapperEl = evnt.currentTarget;
-            const { scrollLeft } = wrapperEl;
-            const yBodyEl = yHandleEl || bodyScrollElem;
-            let scrollTop = 0;
-            if (yBodyEl) {
-                scrollTop = yBodyEl.scrollTop;
-            }
-            const isRollX = true;
-            const isRollY = scrollTop !== lastScrollTop;
-            internalData.inVirtualScroll = true;
-            setScrollLeft(bodyScrollElem, scrollLeft);
-            setScrollLeft(headerScrollElem, scrollLeft);
-            setScrollLeft(footerScrollElem, scrollLeft);
-            $xeTable.triggerScrollXEvent(evnt);
-            $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
-                type: 'table',
-                fixed: ''
-            });
-        };
-        const scrollYEvent = (evnt) => {
-            const { elemStore, inWheelScroll, lastScrollLeft, inHeaderScroll, inBodyScroll, inFooterScroll } = internalData;
-            if (inHeaderScroll || inBodyScroll || inFooterScroll) {
-                return;
-            }
-            if (inWheelScroll) {
-                return;
-            }
-            const leftScrollElem = getRefElem(elemStore['left-body-scroll']);
-            const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
-            const rightScrollElem = getRefElem(elemStore['right-body-scroll']);
-            const xHandleEl = refScrollXHandleElem.value;
-            const wrapperEl = evnt.currentTarget;
-            const { scrollTop } = wrapperEl;
-            const xBodyEl = xHandleEl || bodyScrollElem;
-            let scrollLeft = 0;
-            if (xBodyEl) {
-                scrollLeft = xBodyEl.scrollLeft;
-            }
-            const isRollX = scrollLeft !== lastScrollLeft;
-            const isRollY = true;
-            internalData.inVirtualScroll = true;
-            setScrollTop(bodyScrollElem, scrollTop);
-            setScrollTop(leftScrollElem, scrollTop);
-            setScrollTop(rightScrollElem, scrollTop);
-            $xeTable.triggerScrollYEvent(evnt);
-            $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
-                type: 'table',
-                fixed: ''
-            });
-        };
         const checkLastSyncScroll = (isRollX, isRollY) => {
             const { scrollXLoad, scrollYLoad } = reactData;
             const { lcsTimeout } = internalData;
@@ -3169,27 +3128,68 @@ export default defineComponent({
             internalData.lcsTimeout = setTimeout(() => {
                 internalData.lcsRunTime = Date.now();
                 internalData.lcsTimeout = undefined;
+                internalData.intoRunScroll = false;
                 internalData.inVirtualScroll = false;
                 internalData.inWheelScroll = false;
                 internalData.inHeaderScroll = false;
                 internalData.inBodyScroll = false;
                 internalData.inFooterScroll = false;
                 internalData.scrollRenderType = '';
+                calcCellHeight();
                 if (isRollX && scrollXLoad) {
-                    $xeTable.updateScrollXData().then(() => {
-                        calcCellHeight();
-                        loadScrollXData();
-                    });
+                    $xeTable.updateScrollXData();
                 }
                 if (isRollY && scrollYLoad) {
                     $xeTable.updateScrollYData().then(() => {
                         calcCellHeight();
-                        loadScrollYData();
+                        $xeTable.updateScrollYSpace();
                     });
                 }
                 $xeTable.updateCellAreas();
             }, 200);
         };
+        const getWheelSpeed = (lastScrollTime) => {
+            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, cb) => {
+            const duration = Math.abs(diffNum);
+            const startTime = performance.now();
+            let countTop = 0;
+            const step = (timestamp) => {
+                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, params, evnt) => {
             emit(type, createEvent(evnt, { $table: $xeTable, $grid: $xeGrid }, params));
         };
@@ -3201,6 +3201,31 @@ export default defineComponent({
             }
             return nextTick();
         };
+        const handleUpdateResize = () => {
+            const el = refElem.value;
+            if (el && el.clientWidth && el.clientHeight) {
+                tableMethods.recalculate();
+            }
+        };
+        const handleUpdateColResize = (evnt, params) => {
+            $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, params) => {
+            reactData.resizeHeightFlag++;
+            $xeTable.recalculate(true).then(() => {
+                $xeTable.updateCellAreas();
+                $xeTable.dispatchEvent('row-resizable-change', params, evnt);
+                setTimeout(() => $xeTable.recalculate(true), 300);
+            });
+        };
         tableMethods = {
             dispatchEvent,
             /**
@@ -3253,7 +3278,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) {
@@ -3271,7 +3296,7 @@ export default defineComponent({
                     .then(() => {
                     internalData.inited = true;
                     internalData.initStatus = true;
-                    return loadTableData(datas);
+                    return loadTableData(datas, true);
                 }).then(() => {
                     handleLoadDefaults();
                     return tableMethods.recalculate();
@@ -3362,7 +3387,7 @@ export default defineComponent({
                     XEUtils.eachTree(rows, (childRow, index, items, path, parentItem, nodes) => {
                         const rowid = getRowid($xeTable, childRow);
                         const parentRow = parentItem || parentRest.row;
-                        const rest = { row: childRow, rowid, seq: -1, index, _index: -1, $index: -1, items, parent: parentRow, level: parentLevel + nodes.length, height: 0, oTop: 0 };
+                        const rest = { row: childRow, rowid, seq: -1, index, _index: -1, $index: -1, treeIndex: -1, items, parent: parentRow, level: parentLevel + nodes.length, height: 0, resizeHeight: 0, oTop: 0 };
                         fullDataRowIdData[rowid] = rest;
                         fullAllDataRowIdData[rowid] = rest;
                     }, { children: childrenField });
@@ -3591,30 +3616,31 @@ 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;
+                            if (leftScrollElem) {
+                                bodyElem = leftScrollElem;
                             }
                         }
                         else {
-                            if (rightBody) {
-                                bodyElem = rightBody.$el;
+                            if (rightScrollElem) {
+                                bodyElem = rightScrollElem;
                             }
                         }
                     }
                     if (!bodyElem) {
-                        bodyElem = tableBody.$el;
+                        bodyElem = bodyScrollElem;
                     }
                     if (bodyElem) {
                         return bodyElem.querySelector(`.vxe-body--row[rowid="${rowid}"] .${column.id}`);
@@ -4023,29 +4049,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 : 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);
@@ -4078,6 +4109,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 = {};
+                afterFullData.forEach(row => {
+                    const rowid = getRowid($xeTable, row);
+                    const rowRest = fullAllDataRowIdData[rowid];
+                    if (rowRest) {
+                        const resizeHeight = rowRest.resizeHeight;
+                        if (resizeHeight || isFull) {
+                            const currCellHeight = resizeHeight || rowRest.height || cellOpts.height || rowOpts.height || defaultRowHeight;
+                            rest[rowid] = currCellHeight;
+                        }
+                    }
+                });
+                return rest;
+            },
+            setRowHeight(rowOrId, height) {
+                const { fullAllDataRowIdData } = internalData;
+                let status = false;
+                const rows = XEUtils.isArray(rowOrId) ? rowOrId : [rowOrId];
+                let rHeight = XEUtils.toInteger(height);
+                if (isScale(height)) {
+                    const tableBody = refTableBody.value;
+                    const bodyElem = tableBody ? tableBody.$el : null;
+                    const bodyHeight = bodyElem ? bodyElem.clientHeight - 1 : 0;
+                    rHeight = Math.floor(rHeight * bodyHeight);
+                }
+                if (rHeight) {
+                    rows.forEach(row => {
+                        const rowid = XEUtils.isString(row) || XEUtils.isNumber(row) ? row : getRowid($xeTable, row);
+                        const rowRest = fullAllDataRowIdData[rowid];
+                        if (rowRest) {
+                            rowRest.resizeHeight = rHeight;
+                            if (!status) {
+                                status = true;
+                            }
+                        }
+                    });
+                    if (status) {
+                        internalData.isResizeCellHeight = true;
+                        reactData.resizeHeightFlag++;
+                    }
+                }
+                return nextTick().then(() => {
+                    return { status };
+                });
+            },
+            getRowHeight(rowOrId) {
+                const { fullAllDataRowIdData } = internalData;
+                const rowOpts = computeRowOpts.value;
+                const cellOpts = computeCellOpts.value;
+                const defaultRowHeight = computeDefaultRowHeight.value;
+                const rowid = XEUtils.isString(rowOrId) || XEUtils.isNumber(rowOrId) ? rowOrId : getRowid($xeTable, rowOrId);
+                const rowRest = fullAllDataRowIdData[rowid];
+                if (rowRest) {
+                    return rowRest.resizeHeight || rowRest.height || cellOpts.height || rowOpts.height || defaultRowHeight;
+                }
+                return 0;
+            },
             /**
              * 刷新滚动操作，手动同步滚动相关位置（对于某些特殊的操作，比如滚动条错位、固定列不同步）
              */
@@ -5108,13 +5226,13 @@ export default defineComponent({
              */
             getScroll() {
                 const { scrollXLoad, scrollYLoad } = reactData;
-                const tableBody = refTableBody.value;
-                const bodyElem = tableBody.$el;
+                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
                 };
             },
             /**
@@ -5162,8 +5280,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) {
@@ -5178,7 +5295,7 @@ export default defineComponent({
                 }
                 return Promise.all(rest).then(() => {
                     if (row) {
-                        if (!showOverflow && (scrollYLoad || scrollXLoad)) {
+                        if (!isAllOverflow && (scrollYLoad || scrollXLoad)) {
                             calcCellHeight();
                             calcCellWidth();
                         }
@@ -6143,25 +6260,29 @@ export default defineComponent({
             if (!el) {
                 return;
             }
-            const { scrollbarWidth, scrollbarHeight } = reactData;
+            const { overflowX, scrollbarWidth, overflowY, scrollbarHeight } = reactData;
             const { prevDragToChild } = internalData;
             const wrapperRect = el.getBoundingClientRect();
+            const osbWidth = overflowY ? scrollbarWidth : 0;
+            const osbHeight = overflowX ? scrollbarHeight : 0;
             const tableWidth = el.clientWidth;
             const tableHeight = el.clientHeight;
             if (trEl) {
                 const rdLineEl = refDragRowLineElem.value;
                 if (rdLineEl) {
                     if (showLine) {
+                        const scrollbarYToLeft = computeScrollbarYToLeft.value;
                         const trRect = trEl.getBoundingClientRect();
                         let trHeight = trEl.clientHeight;
                         const offsetTop = Math.max(1, trRect.y - wrapperRect.y);
-                        if (offsetTop + trHeight > tableHeight - scrollbarHeight) {
-                            trHeight = tableHeight - offsetTop - scrollbarHeight;
+                        if (offsetTop + trHeight > tableHeight - osbHeight) {
+                            trHeight = tableHeight - offsetTop - osbHeight;
                         }
                         rdLineEl.style.display = 'block';
+                        rdLineEl.style.left = `${scrollbarYToLeft ? osbWidth : 0}px`;
                         rdLineEl.style.top = `${offsetTop}px`;
                         rdLineEl.style.height = `${trHeight}px`;
-                        rdLineEl.style.width = `${tableWidth - scrollbarWidth}px`;
+                        rdLineEl.style.width = `${tableWidth - osbWidth}px`;
                         rdLineEl.setAttribute('drag-pos', dragPos);
                         rdLineEl.setAttribute('drag-to-child', prevDragToChild ? 'y' : 'n');
                     }
@@ -6174,6 +6295,7 @@ export default defineComponent({
                 const cdLineEl = refDragColLineElem.value;
                 if (cdLineEl) {
                     if (showLine) {
+                        const scrollbarXToTop = computeScrollbarXToTop.value;
                         const leftContainerElem = refLeftContainer.value;
                         const leftContainerWidth = leftContainerElem ? leftContainerElem.clientWidth : 0;
                         const rightContainerElem = refRightContainer.value;
@@ -6187,7 +6309,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;
                         }
@@ -6199,7 +6321,7 @@ export default defineComponent({
                             cdLineEl.style.height = `${thRect.height}px`;
                         }
                         else {
-                            cdLineEl.style.height = `${tableHeight - offsetTop - scrollbarHeight}px`;
+                            cdLineEl.style.height = `${tableHeight - offsetTop - (scrollbarXToTop ? 0 : osbHeight)}px`;
                         }
                         cdLineEl.setAttribute('drag-pos', dragPos);
                         cdLineEl.setAttribute('drag-to-child', prevDragToChild ? 'y' : 'n');
@@ -6236,11 +6358,11 @@ export default defineComponent({
          * @param {Event} evnt 事件
          * @param {Row} row 行对象
          */
-        const handleTooltip = (evnt, cell, overflowElem, tipElem, params) => {
+        const handleTooltip = (evnt, tdEl, overflowElem, tipElem, params) => {
             if (!overflowElem) {
                 return nextTick();
             }
-            params.cell = cell;
+            params.cell = tdEl;
             const { tooltipStore } = reactData;
             const tooltipOpts = computeTooltipOpts.value;
             const { column, row } = params;
@@ -6389,9 +6511,8 @@ export default defineComponent({
             },
             /**
              * 更新数据行的 Map
-             * 牺牲数据组装的耗时，用来换取使用过程中的流畅
              */
-            cacheRowMap(isSource) {
+            cacheRowMap(isReset, isSource) {
                 const { treeConfig } = props;
                 const treeOpts = computeTreeOpts.value;
                 const { fullAllDataRowIdData, tableFullData, tableFullTreeData } = internalData;
@@ -6413,8 +6534,8 @@ export default defineComponent({
                         row[childrenField] = null;
                     }
                     let cacheItem = fullAllDataRowIdData[rowid];
-                    if (!cacheItem) {
-                        cacheItem = { row, rowid, seq, index: -1, _index: -1, $index: -1, items, parent: parentRow, level, height: 0, oTop: 0 };
+                    if (isReset || !cacheItem) {
+                        cacheItem = { row, rowid, seq, index: -1, _index: -1, $index: -1, treeIndex: index, items, parent: parentRow, level, height: 0, resizeHeight: 0, oTop: 0 };
                     }
                     cacheItem.row = row;
                     cacheItem.items = items;
@@ -6513,34 +6634,329 @@ export default defineComponent({
                 });
                 Object.assign(reactData.columnStore, { resizeList, pxList, pxMinList, autoMinList, scaleList, scaleMinList, autoList, remainList });
             },
-            handleResizeDblclickEvent(evnt, params) {
+            handleColResizeMousedownEvent(evnt, fixedType, params) {
+                evnt.stopPropagation();
+                evnt.preventDefault();
+                const { column } = params;
+                const { overflowX, scrollbarHeight } = reactData;
+                const { elemStore, visibleColumn } = internalData;
                 const resizableOpts = computeResizableOpts.value;
-                const { isDblclickAutoWidth } = resizableOpts;
-                const el = refElem.value;
-                if (isDblclickAutoWidth && el) {
-                    const { fullColumnIdData } = internalData;
-                    const { column } = params;
-                    const colid = column.id;
-                    const colRest = fullColumnIdData[colid];
-                    const dragBtnElem = evnt.target;
-                    const cell = dragBtnElem.parentNode;
-                    const cellParams = Object.assign(params, { cell });
-                    const colMinWidth = getColReMinWidth(cellParams);
-                    let resizeWidth = calcColumnAutoWidth(column, el);
-                    if (colRest) {
-                        resizeWidth = Math.max(resizeWidth, colRest.width);
-                    }
-                    column.resizeWidth = Math.max(colMinWidth, resizeWidth);
-                    reactData._isResize = false;
-                    internalData._lastResizeTime = Date.now();
-                    $xeTable.analyColumnWidth();
-                    $xeTable.recalculate(true).then(() => {
-                        $xeTable.saveCustomStore('update:visible');
-                        $xeTable.updateCellAreas();
-                        $xeTable.dispatchEvent('resizable-change', Object.assign(Object.assign({}, params), { resizeWidth }), evnt);
-                        setTimeout(() => $xeTable.recalculate(true), 300);
+                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;
+                const scrollbarXToTop = computeScrollbarXToTop.value;
+                const { clientX: dragClientX } = evnt;
+                const wrapperElem = refElem.value;
+                const dragBtnElem = evnt.target;
+                let resizeColumn = column;
+                if (column.children && column.children.length) {
+                    XEUtils.eachTree(column.children, childColumn => {
+                        resizeColumn = childColumn;
                     });
                 }
+                const cell = dragBtnElem.parentNode;
+                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];
+                    while (tempCellElem) {
+                        if (hasClass(tempCellElem, 'fixed--hidden')) {
+                            break;
+                        }
+                        else if (!hasClass(tempCellElem, 'col--group')) {
+                            fixedOffsetWidth += tempCellElem.offsetWidth;
+                        }
+                        tempCellElem = tempCellElem[siblingProp];
+                    }
+                    if (isRightFixed && rightContainerElem) {
+                        dragPosLeft = rightContainerElem.offsetLeft + fixedOffsetWidth;
+                    }
+                }
+                // 处理拖动事件
+                const updateEvent = (evnt) => {
+                    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 = Object.assign(Object.assign({}, 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;
+                    if (column.children && column.children.length) {
+                        XEUtils.eachTree(column.children, childColumn => {
+                            resizeColumn = childColumn;
+                        });
+                    }
+                    const colid = resizeColumn.id;
+                    const colRest = fullColumnIdData[colid];
+                    const dragBtnElem = evnt.target;
+                    const cell = dragBtnElem.parentNode;
+                    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);
+                    }
+                    resizeWidth = Math.max(colMinWidth, resizeWidth);
+                    const resizeParams = Object.assign(Object.assign({}, params), { resizeWidth, resizeColumn });
+                    reactData.isDragResize = false;
+                    internalData._lastResizeTime = Date.now();
+                    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;
+                const dragBtnElem = evnt.currentTarget;
+                const tdEl = dragBtnElem.parentNode;
+                const trEl = tdEl.parentNode;
+                const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
+                if (!bodyScrollElem) {
+                    return;
+                }
+                const rowid = getRowid($xeTable, row);
+                const rowRest = fullAllDataRowIdData[rowid];
+                if (!rowRest) {
+                    return;
+                }
+                const defaultRowHeight = computeDefaultRowHeight.value;
+                const currCellHeight = rowRest.resizeHeight || rowRest.height || cellOpts.height || rowOpts.height || defaultRowHeight;
+                const tableRect = tableEl.getBoundingClientRect();
+                const trRect = trEl.getBoundingClientRect();
+                const targetOffsetY = dragClientY - trRect.y - trEl.clientHeight;
+                let resizeHeight = currCellHeight;
+                const cellEl = tdEl.querySelector('.vxe-cell');
+                let cellMinHeight = 0;
+                if (cellEl) {
+                    const cellStyle = getComputedStyle(cellEl);
+                    cellMinHeight = Math.max(1, Math.ceil(XEUtils.toNumber(cellStyle.paddingTop) + XEUtils.toNumber(cellStyle.paddingBottom)));
+                }
+                const minTop = trRect.y - tableRect.y + cellMinHeight;
+                // 处理拖动事件
+                const updateEvent = (evnt) => {
+                    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 = Object.assign(Object.assign({}, 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 = Object.assign(Object.assign({}, 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) {
                 const { customConfig } = props;
@@ -6768,7 +7184,7 @@ export default defineComponent({
                         }
                         vLen++;
                     });
-                const isSelected = rootList.length > 0 && sLen >= vLen;
+                const isSelected = vLen > 0 ? sLen >= vLen : sLen >= rootList.length;
                 const halfSelect = !isSelected && (sLen >= 1 || hLen >= 1);
                 reactData.isAllSelected = isSelected;
                 reactData.isIndeterminate = halfSelect;
@@ -6890,10 +7306,21 @@ export default defineComponent({
             triggerHeaderTooltipEvent(evnt, params) {
                 const { tooltipStore } = reactData;
                 const { column } = params;
-                const titleElem = evnt.currentTarget;
                 handleTargetEnterEvent(true);
+                const titleElem = evnt.currentTarget;
+                if (!titleElem) {
+                    return;
+                }
+                const cellEl = titleElem.parentElement;
+                if (!cellEl) {
+                    return;
+                }
+                const thEl = cellEl.parentElement;
+                if (!thEl) {
+                    return;
+                }
                 if (tooltipStore.column !== column || !tooltipStore.visible) {
-                    handleTooltip(evnt, titleElem, titleElem, null, params);
+                    handleTooltip(evnt, thEl, cellEl, null, params);
                 }
             },
             /**
@@ -6906,7 +7333,7 @@ export default defineComponent({
                 const editOpts = computeEditOpts.value;
                 const { actived } = editStore;
                 const { row, column } = params;
-                const cell = evnt.currentTarget;
+                const tdEl = evnt.currentTarget;
                 handleTargetEnterEvent(tooltipStore.column !== column || tooltipStore.row !== row);
                 // 单元格处于编辑状态时不触发提示框
                 if (column.editRender && isEnableConf(editConfig)) {
@@ -6920,18 +7347,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');
-                    }
-                    handleTooltip(evnt, cell, (overflowElem || cell.children[0]), tipElem, params);
+                    handleTooltip(evnt, tdEl, tdEl.querySelector('.vxe-cell--wrapper'), null, params);
                 }
             },
             /**
@@ -6943,7 +7359,7 @@ export default defineComponent({
                 const cell = evnt.currentTarget;
                 handleTargetEnterEvent(tooltipStore.column !== column || !!tooltipStore.row);
                 if (tooltipStore.column !== column || !tooltipStore.visible) {
-                    handleTooltip(evnt, cell, cell.querySelector('.vxe-cell--item') || cell.children[0], null, params);
+                    handleTooltip(evnt, cell, cell.querySelector('.vxe-cell--wrapper') || cell.children[0], null, params);
                 }
             },
             handleTargetLeaveEvent() {
@@ -6956,12 +7372,12 @@ 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) {
@@ -6991,7 +7407,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;
@@ -7086,7 +7505,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;
@@ -7299,10 +7721,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 });
@@ -7395,7 +7820,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;
@@ -7405,15 +7830,15 @@ export default defineComponent({
                 if (prevDragRow && dragRow) {
                     // 判断是否有拖动
                     if (prevDragRow !== dragRow) {
-                        return Promise.resolve(dEndMethod
-                            ? dEndMethod({
-                                oldRow: dragRow,
-                                newRow: prevDragRow,
-                                dragPos: prevDragPos,
-                                dragToChild: !!prevDragToChild,
-                                offsetIndex: dragOffsetIndex
-                            })
-                            : true).then((status) => {
+                        const dragParams = {
+                            oldRow: dragRow,
+                            newRow: prevDragRow,
+                            dragPos: prevDragPos,
+                            dragToChild: !!prevDragToChild,
+                            offsetIndex: dragOffsetIndex
+                        };
+                        const isDragToChildFlag = isSelfToChildDrag && dragToChildMethod ? dragToChildMethod(dragParams) : prevDragToChild;
+                        return Promise.resolve(dEndMethod ? dEndMethod(dragParams) : true).then((status) => {
                             if (!status) {
                                 return;
                             }
@@ -7488,7 +7913,11 @@ export default defineComponent({
                                         else {
                                             // 根到根
                                         }
-                                        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);
                                         fullList.splice(otfIndex, 1);
@@ -7502,12 +7931,12 @@ 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
                                         });
                                     }
                                 }
@@ -7528,7 +7957,7 @@ export default defineComponent({
                             }
                             reactData.isDragRowMove = true;
                             $xeTable.handleTableData(treeConfig && transform);
-                            $xeTable.cacheRowMap();
+                            $xeTable.cacheRowMap(false);
                             updateScrollYStatus();
                             if (!(treeConfig && transform)) {
                                 $xeTable.updateAfterDataIndex();
@@ -7545,7 +7974,7 @@ export default defineComponent({
                                 oldRow: dragRow,
                                 newRow: prevDragRow,
                                 dragPos: prevDragPos,
-                                dragToChild: !!prevDragToChild,
+                                dragToChild: isDragToChildFlag,
                                 offsetIndex: dragOffsetIndex,
                                 _index: {
                                     newIndex: nafIndex,
@@ -7566,20 +7995,18 @@ 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);
@@ -7682,7 +8109,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) {
@@ -7690,15 +8117,15 @@ export default defineComponent({
                     if (prevDragCol !== dragCol) {
                         const oldColumn = dragCol;
                         const newColumn = prevDragCol;
-                        return Promise.resolve(dragEndMethod
-                            ? dragEndMethod({
-                                oldColumn,
-                                newColumn,
-                                dragPos: prevDragPos,
-                                dragToChild: !!prevDragToChild,
-                                offsetIndex: dragOffsetIndex
-                            })
-                            : true).then((status) => {
+                        const dragParams = {
+                            oldColumn,
+                            newColumn,
+                            dragPos: prevDragPos,
+                            dragToChild: !!prevDragToChild,
+                            offsetIndex: dragOffsetIndex
+                        };
+                        const isDragToChildFlag = isSelfToChildDrag && dragToChildMethod ? dragToChildMethod(dragParams) : prevDragToChild;
+                        return Promise.resolve(dragEndMethod ? dragEndMethod(dragParams) : true).then((status) => {
                             if (!status) {
                                 return;
                             }
@@ -7788,7 +8215,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]);
                                 }
@@ -7820,7 +8247,7 @@ export default defineComponent({
                                 oldColumn,
                                 newColumn,
                                 dragPos: prevDragPos,
-                                dragToChild: !!prevDragToChild,
+                                dragToChild: isDragToChildFlag,
                                 offsetIndex: dragOffsetIndex,
                                 _index: {
                                     newIndex: nafIndex,
@@ -8065,7 +8492,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']);
@@ -8076,6 +8503,9 @@ export default defineComponent({
                 if (inWheelScroll || inVirtualScroll || inHeaderScroll || inFooterScroll) {
                     return;
                 }
+                if (intoRunScroll) {
+                    return;
+                }
                 if (!bodyScrollElem) {
                     return;
                 }
@@ -8134,22 +8564,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) {
@@ -8176,22 +8600,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) {
-                    return;
-                }
-                if (inHeaderScroll) {
+                if (inWheelScroll || inVirtualScroll || inHeaderScroll || inBodyScroll) {
                     return;
                 }
-                if (inBodyScroll) {
+                if (intoRunScroll) {
                     return;
                 }
                 if (!footerScrollElem) {
@@ -8218,7 +8636,10 @@ export default defineComponent({
                 });
             },
             triggerBodyWheelEvent(evnt) {
-                const { deltaY, deltaX } = evnt;
+                const { target, deltaY, deltaX } = evnt;
+                if (target && /^textarea$/i.test(target.tagName)) {
+                    return;
+                }
                 const { highlightHoverRow } = tableProps;
                 const { elemStore, lastScrollTop, lastScrollLeft } = internalData;
                 const rowOpts = computeRowOpts.value;
@@ -8236,31 +8657,13 @@ 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;
                 }
                 const scrollTop = bodyScrollElem.scrollTop + deltaTop;
@@ -8273,17 +8676,92 @@ export default defineComponent({
                     if (rowOpts.isHover || highlightHoverRow) {
                         $xeTable.clearHoverRow();
                     }
-                    internalData.inWheelScroll = true;
-                    setScrollTop(yHandleEl, scrollTop);
-                    setScrollTop(bodyScrollElem, scrollTop);
-                    setScrollTop(leftScrollElem, scrollTop);
-                    setScrollTop(rightScrollElem, scrollTop);
-                    $xeTable.triggerScrollYEvent(evnt);
-                    $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
-                        type: 'footer',
-                        fixed: ''
+                    wheelScrollTo(scrollTop - bodyScrollElem.scrollTop, (offsetTop) => {
+                        const currTopNum = bodyScrollElem.scrollTop + offsetTop;
+                        internalData.inWheelScroll = true;
+                        setScrollTop(yHandleEl, currTopNum);
+                        setScrollTop(bodyScrollElem, currTopNum);
+                        setScrollTop(leftScrollElem, currTopNum);
+                        setScrollTop(rightScrollElem, currTopNum);
+                        $xeTable.triggerScrollYEvent(evnt);
+                        $xeTable.handleScrollEvent(evnt, isRollY, isRollX, currTopNum, scrollLeft, {
+                            type: 'table',
+                            fixed: ''
+                        });
                     });
+                    // internalData.inWheelScroll = true
+                    // setScrollTop(yHandleEl, scrollTop)
+                    // setScrollTop(bodyScrollElem, scrollTop)
+                    // setScrollTop(leftScrollElem, scrollTop)
+                    // setScrollTop(rightScrollElem, scrollTop)
+                    // loadScrollYData(scrollTop)
+                    // $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
+                    //   type: 'footer',
+                    //   fixed: ''
+                    // })
+                }
+            },
+            triggerVirtualScrollXEvent(evnt) {
+                const { elemStore, inWheelScroll, lastScrollTop, inHeaderScroll, inBodyScroll, inFooterScroll } = internalData;
+                if (inHeaderScroll || inBodyScroll || inFooterScroll) {
+                    return;
+                }
+                if (inWheelScroll) {
+                    return;
+                }
+                const headerScrollElem = getRefElem(elemStore['main-header-scroll']);
+                const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
+                const footerScrollElem = getRefElem(elemStore['main-footer-scroll']);
+                const yHandleEl = refScrollYHandleElem.value;
+                const wrapperEl = evnt.currentTarget;
+                const { scrollLeft } = wrapperEl;
+                const yBodyEl = yHandleEl || bodyScrollElem;
+                let scrollTop = 0;
+                if (yBodyEl) {
+                    scrollTop = yBodyEl.scrollTop;
                 }
+                const isRollX = true;
+                const isRollY = scrollTop !== lastScrollTop;
+                internalData.inVirtualScroll = true;
+                setScrollLeft(bodyScrollElem, scrollLeft);
+                setScrollLeft(headerScrollElem, scrollLeft);
+                setScrollLeft(footerScrollElem, scrollLeft);
+                $xeTable.triggerScrollXEvent(evnt);
+                $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
+                    type: 'table',
+                    fixed: ''
+                });
+            },
+            triggerVirtualScrollYEvent(evnt) {
+                const { elemStore, inWheelScroll, lastScrollLeft, inHeaderScroll, inBodyScroll, inFooterScroll } = internalData;
+                if (inHeaderScroll || inBodyScroll || inFooterScroll) {
+                    return;
+                }
+                if (inWheelScroll) {
+                    return;
+                }
+                const leftScrollElem = getRefElem(elemStore['left-body-scroll']);
+                const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
+                const rightScrollElem = getRefElem(elemStore['right-body-scroll']);
+                const xHandleEl = refScrollXHandleElem.value;
+                const wrapperEl = evnt.currentTarget;
+                const { scrollTop } = wrapperEl;
+                const xBodyEl = xHandleEl || bodyScrollElem;
+                let scrollLeft = 0;
+                if (xBodyEl) {
+                    scrollLeft = xBodyEl.scrollLeft;
+                }
+                const isRollX = scrollLeft !== lastScrollLeft;
+                const isRollY = true;
+                internalData.inVirtualScroll = true;
+                setScrollTop(bodyScrollElem, scrollTop);
+                setScrollTop(leftScrollElem, scrollTop);
+                setScrollTop(rightScrollElem, scrollTop);
+                $xeTable.triggerScrollYEvent(evnt);
+                $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
+                    type: 'table',
+                    fixed: ''
+                });
             },
             /**
              * 对于树形结构中，可以直接滚动到指定深层节点中
@@ -8357,35 +8835,34 @@ export default defineComponent({
             },
             // 更新纵向 Y 可视渲染上下剩余空间大小
             updateScrollYSpace() {
-                const { showOverflow } = props;
-                const { scrollYLoad, rowHeight } = reactData;
-                const { scrollYStore, elemStore, afterFullData, fullAllDataRowIdData } = internalData;
+                const { isAllOverflow, scrollYLoad } = reactData;
+                const { scrollYStore, elemStore, isResizeCellHeight, afterFullData, fullAllDataRowIdData } = internalData;
                 const { startIndex } = scrollYStore;
+                const rowOpts = computeRowOpts.value;
+                const cellOpts = computeCellOpts.value;
+                const defaultRowHeight = computeDefaultRowHeight.value;
                 const bodyTableElem = getRefElem(elemStore['main-body-table']);
                 const containerList = ['main', 'left', 'right'];
                 let topSpaceHeight = 0;
                 let ySpaceHeight = 0;
                 if (scrollYLoad) {
-                    if (showOverflow) {
-                        ySpaceHeight = afterFullData.length * rowHeight;
-                        topSpaceHeight = Math.max(0, startIndex * rowHeight);
+                    const isCustomCellHeight = isResizeCellHeight || cellOpts.height || rowOpts.height;
+                    if (!isCustomCellHeight && isAllOverflow) {
+                        ySpaceHeight = afterFullData.length * defaultRowHeight;
+                        topSpaceHeight = Math.max(0, startIndex * defaultRowHeight);
                     }
                     else {
                         for (let i = 0; i < afterFullData.length; i++) {
                             const row = afterFullData[i];
                             const rowid = getRowid($xeTable, row);
-                            const rowRest = fullAllDataRowIdData[rowid];
-                            if (rowRest) {
-                                ySpaceHeight += rowRest.height || rowHeight;
-                            }
+                            const rowRest = fullAllDataRowIdData[rowid] || {};
+                            ySpaceHeight += rowRest.resizeHeight || rowRest.height || cellOpts.height || rowOpts.height || defaultRowHeight;
                         }
                         for (let i = 0; i < startIndex; i++) {
                             const row = afterFullData[i];
                             const rowid = getRowid($xeTable, row);
-                            const rowRest = fullAllDataRowIdData[rowid];
-                            if (rowRest) {
-                                topSpaceHeight += rowRest.height || rowHeight;
-                            }
+                            const rowRest = fullAllDataRowIdData[rowid] || {};
+                            topSpaceHeight += rowRest.resizeHeight || rowRest.height || cellOpts.height || rowOpts.height || defaultRowHeight;
                         }
                     }
                 }
@@ -8411,28 +8888,24 @@ export default defineComponent({
                 if (scrollYSpaceEl) {
                     scrollYSpaceEl.style.height = ySpaceHeight ? `${ySpaceHeight}px` : '';
                 }
-                nextTick(() => {
+                return nextTick().then(() => {
                     updateStyle();
                 });
             },
             updateScrollXData() {
-                const { showOverflow } = props;
+                const { isAllOverflow } = reactData;
                 handleTableColumn();
-                // calcCellHeight()
                 return nextTick().then(() => {
-                    // calcCellHeight()
                     handleTableColumn();
                     $xeTable.updateScrollXSpace();
-                    if (!showOverflow) {
+                    if (!isAllOverflow) {
                         $xeTable.updateScrollYSpace();
                     }
                 });
             },
             updateScrollYData() {
                 $xeTable.handleTableData();
-                // calcCellHeight()
                 return nextTick().then(() => {
-                    // calcCellHeight()
                     $xeTable.handleTableData();
                     $xeTable.updateScrollYSpace();
                 });
@@ -8657,18 +9130,137 @@ export default defineComponent({
             }
             return renderEmptyElement($xeTable);
         };
-        function handleUupdateResize() {
-            const el = refElem.value;
-            if (el && el.clientWidth && el.clientHeight) {
-                tableMethods.recalculate();
-            }
-        }
+        const renderScrollX = () => {
+            return h('div', {
+                key: 'vsx',
+                ref: refScrollXVirtualElem,
+                class: 'vxe-table--scroll-x-virtual'
+            }, [
+                h('div', {
+                    ref: refScrollXLeftCornerElem,
+                    class: 'vxe-table--scroll-x-left-corner'
+                }),
+                h('div', {
+                    ref: refScrollXWrapperElem,
+                    class: 'vxe-table--scroll-x-wrapper'
+                }, [
+                    h('div', {
+                        ref: refScrollXHandleElem,
+                        class: 'vxe-table--scroll-x-handle',
+                        onScroll: $xeTable.triggerVirtualScrollXEvent
+                    }, [
+                        h('div', {
+                            ref: refScrollXSpaceElem,
+                            class: 'vxe-table--scroll-x-space'
+                        })
+                    ])
+                ]),
+                h('div', {
+                    ref: refScrollXRightCornerElem,
+                    class: 'vxe-table--scroll-x-right-corner'
+                })
+            ]);
+        };
+        const renderScrollY = () => {
+            return h('div', {
+                ref: refScrollYVirtualElem,
+                class: 'vxe-table--scroll-y-virtual'
+            }, [
+                h('div', {
+                    ref: refScrollYTopCornerElem,
+                    class: 'vxe-table--scroll-y-top-corner'
+                }),
+                h('div', {
+                    ref: refScrollYWrapperElem,
+                    class: 'vxe-table--scroll-y-wrapper'
+                }, [
+                    h('div', {
+                        ref: refScrollYHandleElem,
+                        class: 'vxe-table--scroll-y-handle',
+                        onScroll: $xeTable.triggerVirtualScrollYEvent
+                    }, [
+                        h('div', {
+                            ref: refScrollYSpaceElem,
+                            class: 'vxe-table--scroll-y-space'
+                        })
+                    ])
+                ]),
+                h('div', {
+                    ref: refScrollYBottomCornerElem,
+                    class: 'vxe-table--scroll-y-bottom-corner'
+                })
+            ]);
+        };
+        const renderViewport = () => {
+            const { showHeader, showFooter } = props;
+            const { overflowX, tableData, tableColumn, tableGroupColumn, footerTableData, columnStore } = reactData;
+            const { leftList, rightList } = columnStore;
+            return h('div', {
+                ref: refTableViewportElem,
+                class: 'vxe-table--viewport-wrapper'
+            }, [
+                h('div', {
+                    class: 'vxe-table--main-wrapper'
+                }, [
+                    /**
+                     * 表头
+                     */
+                    showHeader
+                        ? h(TableHeaderComponent, {
+                            ref: refTableHeader,
+                            tableData,
+                            tableColumn,
+                            tableGroupColumn
+                        })
+                        : renderEmptyElement($xeTable),
+                    /**
+                     * 表体
+                     */
+                    h(TableBodyComponent, {
+                        ref: refTableBody,
+                        tableData,
+                        tableColumn
+                    }),
+                    /**
+                     * 表尾
+                     */
+                    showFooter
+                        ? h(TableFooterComponent, {
+                            ref: refTableFooter,
+                            footerTableData,
+                            tableColumn
+                        })
+                        : renderEmptyElement($xeTable)
+                ]),
+                h('div', {
+                    class: 'vxe-table--fixed-wrapper'
+                }, [
+                    leftList && leftList.length && overflowX ? renderFixed('left') : renderEmptyElement($xeTable),
+                    rightList && rightList.length && overflowX ? renderFixed('right') : renderEmptyElement($xeTable)
+                ])
+            ]);
+        };
+        const renderBody = () => {
+            const scrollbarYToLeft = computeScrollbarYToLeft.value;
+            return h('div', {
+                class: 'vxe-table--layout-wrapper'
+            }, scrollbarYToLeft
+                ? [
+                    renderScrollY(),
+                    renderViewport()
+                ]
+                : [
+                    renderViewport(),
+                    renderScrollY()
+                ]);
+        };
         const renderVN = () => {
             const { loading, stripe, showHeader, height, treeConfig, mouseConfig, showFooter, highlightCell, highlightHoverRow, highlightHoverColumn, editConfig, editRules } = props;
-            const { isCalcColumn, isGroup, overflowX, overflowY, scrollXLoad, scrollYLoad, scrollbarHeight, tableData, tableColumn, tableGroupColumn, footerTableData, initStore, columnStore, filterStore, customStore, tooltipStore } = reactData;
+            const { isGroup, overflowX, overflowY, scrollXLoad, scrollYLoad, tableData, initStore, columnStore, filterStore, customStore } = reactData;
             const { leftList, rightList } = columnStore;
             const loadingSlot = slots.loading;
-            const tooltipOpts = computeTooltipOpts.value;
+            const tableTipConfig = computeTableTipConfig.value;
+            const validTipConfig = computeValidTipConfig.value;
             const validOpts = computeValidOpts.value;
             const checkboxOpts = computeCheckboxOpts.value;
             const treeOpts = computeTreeOpts.value;
@@ -8684,9 +9276,11 @@ export default defineComponent({
             const resizableOpts = computeResizableOpts.value;
             const isArea = mouseConfig && mouseOpts.area;
             const columnDragOpts = computeColumnDragOpts.value;
+            const scrollbarXToTop = computeScrollbarXToTop.value;
+            const scrollbarYToLeft = computeScrollbarYToLeft.value;
             return h('div', {
                 ref: refElem,
-                class: ['vxe-table', 'vxe-table--render-default', `tid_${xID}`, `border--${tableBorder}`, {
+                class: ['vxe-table', 'vxe-table--render-default', `tid_${xID}`, `border--${tableBorder}`, `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`, {
                         [`size--${vSize}`]: vSize,
                         [`valid-msg--${validOpts.msgMode}`]: !!editRules,
                         'vxe-editable': !!editConfig,
@@ -8699,7 +9293,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,
@@ -8708,7 +9301,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,
@@ -8730,95 +9322,15 @@ export default defineComponent({
                 h('div', {
                     key: 'tw',
                     class: 'vxe-table--render-wrapper'
-                }, [
-                    h('div', {
-                        ref: refTableViewportElem,
-                        class: 'vxe-table--viewport-wrapper'
-                    }, [
-                        h('div', {
-                            class: 'vxe-table--main-wrapper'
-                        }, [
-                            /**
-                             * 表头
-                             */
-                            showHeader
-                                ? h(TableHeaderComponent, {
-                                    ref: refTableHeader,
-                                    tableData,
-                                    tableColumn,
-                                    tableGroupColumn
-                                })
-                                : renderEmptyElement($xeTable),
-                            /**
-                             * 表体
-                             */
-                            h(TableBodyComponent, {
-                                ref: refTableBody,
-                                tableData,
-                                tableColumn
-                            }),
-                            /**
-                             * 表尾
-                             */
-                            showFooter
-                                ? h(TableFooterComponent, {
-                                    ref: refTableFooter,
-                                    footerTableData,
-                                    tableColumn
-                                })
-                                : renderEmptyElement($xeTable)
-                        ]),
-                        h('div', {
-                            class: 'vxe-table--fixed-wrapper'
-                        }, [
-                            leftList && leftList.length && overflowX ? renderFixed('left') : renderEmptyElement($xeTable),
-                            rightList && rightList.length && overflowX ? renderFixed('right') : renderEmptyElement($xeTable)
-                        ])
-                    ]),
-                    h('div', {
-                        ref: refScrollYVirtualElem,
-                        class: 'vxe-table--scroll-y-virtual'
-                    }, [
-                        h('div', {
-                            ref: refScrollYTopCornerElem,
-                            class: 'vxe-table--scroll-y-top-corner'
-                        }),
-                        h('div', {
-                            ref: refScrollYHandleElem,
-                            class: 'vxe-table--scroll-y-handle',
-                            onScroll: scrollYEvent
-                        }, [
-                            h('div', {
-                                ref: refScrollYSpaceElem,
-                                class: 'vxe-table--scroll-y-space'
-                            })
-                        ]),
-                        h('div', {
-                            ref: refScrollYBottomCornerElem,
-                            class: 'vxe-table--scroll-y-bottom-corner'
-                        })
-                    ])
-                ]),
-                h('div', {
-                    key: 'vx',
-                    ref: refScrollXVirtualElem,
-                    class: 'vxe-table--scroll-x-virtual'
-                }, [
-                    h('div', {
-                        ref: refScrollXHandleElem,
-                        class: 'vxe-table--scroll-x-handle',
-                        onScroll: scrollXEvent
-                    }, [
-                        h('div', {
-                            ref: refScrollXSpaceElem,
-                            class: 'vxe-table--scroll-x-space'
-                        })
+                }, scrollbarXToTop
+                    ? [
+                        renderScrollX(),
+                        renderBody()
+                    ]
+                    : [
+                        renderBody(),
+                        renderScrollX()
                     ]),
-                    h('div', {
-                        ref: refScrollXRightCornerElem,
-                        class: 'vxe-table--scroll-x-right-corner'
-                    })
-                ]),
                 /**
                  * 空数据
                  */
@@ -8842,18 +9354,26 @@ export default defineComponent({
                  * 列宽线
                  */
                 h('div', {
-                    key: 'cl',
-                    ref: refCellResizeBar,
-                    class: 'vxe-table--resizable-bar',
-                    style: overflowX
-                        ? {
-                            'padding-bottom': `${scrollbarHeight}px`
-                        }
-                        : null
+                    key: 'tcl',
+                    ref: refColResizeBar,
+                    class: 'vxe-table--resizable-col-bar'
+                }, resizableOpts.showDragTip
+                    ? [
+                        h('div', {
+                            class: 'vxe-table--resizable-number-tip'
+                        })
+                    ]
+                    : []),
+                /**
+                 * 行高线
+                 */
+                h('div', {
+                    key: 'trl',
+                    ref: refRowResizeBar,
+                    class: 'vxe-table--resizable-row-bar'
                 }, resizableOpts.showDragTip
                     ? [
                         h('div', {
-                            ref: refCellResizeTip,
                             class: 'vxe-table--resizable-number-tip'
                         })
                     ]
@@ -8950,17 +9470,29 @@ 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
+                        }),
                         /**
                           * 校验提示
                           */
                         props.editRules && validOpts.showMessage && (validOpts.message === 'default' ? !height : validOpts.message === 'tooltip')
-                            ? h(VxeUITooltipComponent, Object.assign({ key: 'vtp', ref: refValidTooltip, class: [{
+                            ? h(VxeUITooltipComponent, {
+                                key: 'vtp',
+                                ref: refValidTooltip,
+                                class: [{
                                         'old-cell-valid': editRules && getConfig().cellVaildMode === 'obsolete'
-                                    }, 'vxe-table--valid-error'] }, (validOpts.message === 'tooltip' || tableData.length === 1 ? Object.assign({ isArrow: false }, tooltipOpts) : {})))
+                                    }, 'vxe-table--valid-error'],
+                                theme: validTipConfig.theme,
+                                enterable: validTipConfig.enterable,
+                                enterDelay: validTipConfig.enterDelay,
+                                leaveDelay: validTipConfig.leaveDelay
+                            })
                             : renderEmptyElement($xeTable)
                     ])
                     : renderEmptyElement($xeTable)
@@ -8979,7 +9511,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;
@@ -9027,16 +9559,37 @@ export default defineComponent({
                 tableMethods.refreshColumn();
             });
         });
+        const reScrollFlag = ref(0);
+        watch(computeSize, () => {
+            reScrollFlag.value++;
+        });
         watch(() => props.showHeader, () => {
-            nextTick(() => {
-                tableMethods.recalculate(true).then(() => tableMethods.refreshScroll());
-            });
+            reScrollFlag.value++;
         });
         watch(() => props.showFooter, () => {
+            reScrollFlag.value++;
+        });
+        watch(reScrollFlag, () => {
             nextTick(() => {
                 tableMethods.recalculate(true).then(() => tableMethods.refreshScroll());
             });
         });
+        const reLayoutFlag = ref(0);
+        watch(() => props.height, () => {
+            reLayoutFlag.value++;
+        });
+        watch(() => props.maxHeight, () => {
+            reLayoutFlag.value++;
+        });
+        watch(computeScrollbarXToTop, () => {
+            reLayoutFlag.value++;
+        });
+        watch(computeScrollbarYToLeft, () => {
+            reLayoutFlag.value++;
+        });
+        watch(reLayoutFlag, () => {
+            nextTick(() => tableMethods.recalculate(true));
+        });
         const footFlag = ref(0);
         watch(() => props.footerData ? props.footerData.length : -1, () => {
             footFlag.value++;
@@ -9047,23 +9600,12 @@ export default defineComponent({
         watch(footFlag, () => {
             tableMethods.updateFooter();
         });
-        watch(() => props.height, () => {
-            nextTick(() => tableMethods.recalculate(true));
-        });
-        watch(() => props.maxHeight, () => {
-            nextTick(() => tableMethods.recalculate(true));
-        });
-        watch(computeSize, () => {
-            nextTick(() => {
-                tableMethods.recalculate(true).then(() => tableMethods.refreshScroll());
-            });
-        });
         watch(() => props.syncResize, (value) => {
             if (value) {
-                handleUupdateResize();
+                handleUpdateResize();
                 nextTick(() => {
-                    handleUupdateResize();
-                    setTimeout(() => handleUupdateResize());
+                    handleUpdateResize();
+                    setTimeout(() => handleUpdateResize());
                 });
             }
         });
@@ -9163,6 +9705,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'])
                     // }
@@ -9270,7 +9815,7 @@ export default defineComponent({
                     endIndex: 0,
                     visibleSize: 0
                 });
-                loadTableData(data || []).then(() => {
+                loadTableData(data || [], true).then(() => {
                     if (data && data.length) {
                         internalData.inited = true;
                         internalData.initStatus = true;