vxe-table 4.10.6-beta.9 → 4.10.6

package/lib/table/src/table.js

@@ -58,7 +58,6 @@ var _default = exports.default = (0, _vue.defineComponent)({
       computeSize
     } = useFns.useSize(props);
     const reactData = (0, _vue.reactive)({
-      isCalcColumn: false,
       // 低性能的静态列
       staticColumns: [],
       // 渲染的列分组
@@ -271,15 +270,17 @@ var _default = exports.default = (0, _vue.defineComponent)({
         isFooter: false
       },
       scrollVMLoading: false,
-      isCalcCellHeight: 0,
+      calcCellHeightFlag: 0,
+      resizeHeightFlag: 0,
       isCustomStatus: false,
       isDragRowMove: false,
       dragRow: null,
       isDragColMove: false,
       dragCol: null,
       dragTipText: '',
-      _isResize: false,
-      isLoading: false
+      isDragResize: false,
+      isRowLoading: false,
+      isColLoading: false
     });
     const internalData = {
       tZindex: 0,
@@ -353,10 +354,6 @@ var _default = exports.default = (0, _vue.defineComponent)({
       fullDataRowIdData: {},
       fullColumnIdData: {},
       fullColumnFieldData: {},
-      // 列选取状态
-      columnStatusMaps: {},
-      // 行选取状态
-      rowStatusMaps: {},
       // prevDragRow: null,
       inited: false,
       tooltipTimeout: null,
@@ -384,8 +381,8 @@ var _default = exports.default = (0, _vue.defineComponent)({
     const refTableRightFooter = (0, _vue.ref)();
     const refLeftContainer = (0, _vue.ref)();
     const refRightContainer = (0, _vue.ref)();
-    const refCellResizeBar = (0, _vue.ref)();
-    const refCellResizeTip = (0, _vue.ref)();
+    const refColResizeBar = (0, _vue.ref)();
+    const refRowResizeBar = (0, _vue.ref)();
     const refEmptyPlaceholder = (0, _vue.ref)();
     const refDragTipElem = (0, _vue.ref)();
     const refDragRowLineElem = (0, _vue.ref)();
@@ -484,7 +481,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
     const computeDefaultRowHeight = (0, _vue.computed)(() => {
       const vSize = computeSize.value;
       const rowHeightMaps = computeRowHeightMaps.value;
-      return rowHeightMaps[vSize || 'default'];
+      return rowHeightMaps[vSize || 'default'] || 18;
     });
     const computeColumnOpts = (0, _vue.computed)(() => {
       return Object.assign({}, getConfig().table.columnConfig, props.columnConfig);
@@ -492,6 +489,12 @@ var _default = exports.default = (0, _vue.defineComponent)({
     const computeCellOpts = (0, _vue.computed)(() => {
       return Object.assign({}, getConfig().table.cellConfig, props.cellConfig);
     });
+    const computeHeaderCellOpts = (0, _vue.computed)(() => {
+      return Object.assign({}, getConfig().table.headerCellConfig, props.headerCellConfig);
+    });
+    const computeFooterCellOpts = (0, _vue.computed)(() => {
+      return Object.assign({}, getConfig().table.footerCellConfig, props.footerCellConfig);
+    });
     const computeRowOpts = (0, _vue.computed)(() => {
       return Object.assign({}, getConfig().table.rowConfig, props.rowConfig);
     });
@@ -521,6 +524,17 @@ var _default = exports.default = (0, _vue.defineComponent)({
     const computeTooltipOpts = (0, _vue.computed)(() => {
       return Object.assign({}, getConfig().tooltip, getConfig().table.tooltipConfig, props.tooltipConfig);
     });
+    const computeTableTipConfig = (0, _vue.computed)(() => {
+      const {
+        tooltipStore
+      } = reactData;
+      const tooltipOpts = computeTooltipOpts.value;
+      return Object.assign({}, tooltipOpts, tooltipStore.currOpts);
+    });
+    const computeValidTipConfig = (0, _vue.computed)(() => {
+      const tooltipOpts = computeTooltipOpts.value;
+      return Object.assign({}, tooltipOpts);
+    });
     const computeEditOpts = (0, _vue.computed)(() => {
       return Object.assign({}, getConfig().table.editConfig, props.editConfig);
     });
@@ -751,8 +765,8 @@ var _default = exports.default = (0, _vue.defineComponent)({
       refTableRightFooter,
       refLeftContainer,
       refRightContainer,
-      refCellResizeBar,
-      refCellResizeTip,
+      refColResizeBar,
+      refRowResizeBar,
       refScrollXVirtualElem,
       refScrollYVirtualElem,
       refScrollXHandleElem,
@@ -774,6 +788,8 @@ var _default = exports.default = (0, _vue.defineComponent)({
       computeScrollYThreshold,
       computeDefaultRowHeight,
       computeCellOpts,
+      computeHeaderCellOpts,
+      computeFooterCellOpts,
       computeRowOpts,
       computeRowDragOpts,
       computeColumnDragOpts,
@@ -925,14 +941,14 @@ var _default = exports.default = (0, _vue.defineComponent)({
     };
     const computeRowHeight = () => {
       const {
-        showOverflow
-      } = props;
+        isAllOverflow
+      } = reactData;
       const tableHeader = refTableHeader.value;
       const tableBody = refTableBody.value;
       const tableBodyElem = tableBody ? tableBody.$el : null;
       const defaultRowHeight = computeDefaultRowHeight.value;
       let rowHeight = 0;
-      if (showOverflow) {
+      if (isAllOverflow) {
         if (tableBodyElem) {
           const tableHeaderElem = tableHeader ? tableHeader.$el : null;
           let firstTrElem;
@@ -955,16 +971,17 @@ var _default = exports.default = (0, _vue.defineComponent)({
     };
     const handleVirtualYVisible = currScrollTop => {
       const {
-        showOverflow
-      } = props;
-      const {
-        rowHeight
+        isAllOverflow
       } = reactData;
       const {
         elemStore,
+        isResizeCellHeight,
         afterFullData,
         fullAllDataRowIdData
       } = internalData;
+      const rowOpts = computeRowOpts.value;
+      const cellOpts = computeCellOpts.value;
+      const defaultRowHeight = computeDefaultRowHeight.value;
       const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
       if (bodyScrollElem) {
         const clientHeight = bodyScrollElem.clientHeight;
@@ -973,15 +990,16 @@ var _default = exports.default = (0, _vue.defineComponent)({
         let toVisibleIndex = -1;
         let offsetTop = 0;
         let visibleSize = 0;
-        if (showOverflow) {
-          toVisibleIndex = Math.floor(scrollTop / rowHeight);
-          visibleSize = Math.ceil(clientHeight / rowHeight) + 1;
+        const isCustomCellHeight = isResizeCellHeight || cellOpts.height || rowOpts.height;
+        if (!isCustomCellHeight && isAllOverflow) {
+          toVisibleIndex = Math.floor(scrollTop / defaultRowHeight);
+          visibleSize = Math.ceil(clientHeight / defaultRowHeight) + 1;
         } else {
           for (let rIndex = 0, rLen = afterFullData.length; rIndex < rLen; rIndex++) {
             const row = afterFullData[rIndex];
             const rowid = (0, _util.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;
             }
@@ -1372,56 +1390,40 @@ var _default = exports.default = (0, _vue.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.default.toNumber(cellStyle.paddingLeft) + _xeUtils.default.toNumber(cellStyle.paddingRight)) + 2;
-      }
-      let colWidth = column.renderAutoWidth - paddingSize;
-      _xeUtils.default.arrayEach(cellElList, itemEl => {
-        const cellEl = itemEl;
-        const thElem = cellEl.parentElement;
-        let titleWidth = 0;
-        if (`${thElem.tagName}`.toLowerCase() === 'th') {
-          _xeUtils.default.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.default.toNumber(cellStyle.paddingLeft) + _xeUtils.default.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 (0, _vue.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');
+      }
     };
     /**
      * 列宽算法，计算单元格列宽，动态分配可用剩余空间
@@ -1477,39 +1479,39 @@ var _default = exports.default = (0, _vue.defineComponent)({
       });
       // 最小自适应
       autoMinList.forEach(column => {
-        const scaleWidth = Math.max(60, _xeUtils.default.toInteger(column.renderAutoWidth));
-        tableWidth += scaleWidth;
-        column.renderWidth = scaleWidth;
+        const caWidth = Math.max(60, _xeUtils.default.toInteger(column.renderAutoWidth));
+        tableWidth += caWidth;
+        column.renderWidth = caWidth;
       });
       // 最小百分比
       scaleMinList.forEach(column => {
-        const scaleWidth = Math.floor(_xeUtils.default.toInteger(column.minWidth) * meanWidth);
-        tableWidth += scaleWidth;
-        column.renderWidth = scaleWidth;
+        const smWidth = Math.floor(_xeUtils.default.toInteger(column.minWidth) * meanWidth);
+        tableWidth += smWidth;
+        column.renderWidth = smWidth;
       });
       // 固定百分比
       scaleList.forEach(column => {
-        const scaleWidth = Math.floor(_xeUtils.default.toInteger(column.width) * meanWidth);
-        tableWidth += scaleWidth;
-        column.renderWidth = scaleWidth;
+        const sfWidth = Math.floor(_xeUtils.default.toInteger(column.width) * meanWidth);
+        tableWidth += sfWidth;
+        column.renderWidth = sfWidth;
       });
       // 固定宽
       pxList.forEach(column => {
-        const width = _xeUtils.default.toInteger(column.width);
-        tableWidth += width;
-        column.renderWidth = width;
+        const pWidth = _xeUtils.default.toInteger(column.width);
+        tableWidth += pWidth;
+        column.renderWidth = pWidth;
       });
       // 自适应宽
       autoList.forEach(column => {
-        const width = Math.max(60, _xeUtils.default.toInteger(column.renderAutoWidth));
-        tableWidth += width;
-        column.renderWidth = width;
+        const aWidth = Math.max(60, _xeUtils.default.toInteger(column.renderAutoWidth));
+        tableWidth += aWidth;
+        column.renderWidth = aWidth;
       });
       // 调整了列宽
       resizeList.forEach(column => {
-        const width = _xeUtils.default.toInteger(column.resizeWidth);
-        tableWidth += width;
-        column.renderWidth = width;
+        const reWidth = _xeUtils.default.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;
@@ -1549,7 +1551,7 @@ var _default = exports.default = (0, _vue.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;
@@ -1558,7 +1560,7 @@ var _default = exports.default = (0, _vue.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;
@@ -1568,64 +1570,43 @@ var _default = exports.default = (0, _vue.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.default.toNumber(tdEl.style.paddingTop) + _xeUtils.default.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,
+        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 = (0, _util.getRowid)($xeTable, row);
           const rowRest = fullAllDataRowIdData[rowid];
-          const cellList = el.querySelectorAll(`.vxe-body--row[rowid="${rowid}"]>.vxe-body--column>.vxe-cell>.vxe-cell--auto-wrapper`);
-          if (rowRest && cellList.length) {
-            let height = 0;
-            for (let i = 0; i < cellList.length; i++) {
-              const cellElem = cellList[i];
-              const tdEl = cellElem.parentElement;
-              if (!tdEl || !tdEl.clientWidth) {
-                break;
-              }
-              if (!calcPadding) {
-                paddingTop = _xeUtils.default.toNumber(getComputedStyle(tdEl).paddingTop);
-                paddingBottom = _xeUtils.default.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 {
@@ -1679,6 +1660,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
             parent: null,
             level: 0,
             height: 0,
+            resizeHeight: 0,
             oTop: 0
           };
           fullAllDataRowIdData[rowid] = rest;
@@ -1728,6 +1710,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
               parent: null,
               level: 0,
               height: 0,
+              resizeHeight: 0,
               oTop: 0
             };
             fullAllDataRowIdData[rowid] = rest;
@@ -1997,7 +1980,6 @@ var _default = exports.default = (0, _vue.defineComponent)({
     const updateStyle = () => {
       const {
         border,
-        showOverflow: allColumnOverflow,
         showHeaderOverflow: allColumnHeaderOverflow,
         showFooterOverflow: allColumnFooterOverflow,
         mouseConfig,
@@ -2010,7 +1992,9 @@ var _default = exports.default = (0, _vue.defineComponent)({
         tableColumn,
         scrollXLoad,
         scrollYLoad,
+        overflowX,
         scrollbarWidth,
+        overflowY,
         scrollbarHeight,
         columnStore,
         editStore,
@@ -2034,6 +2018,8 @@ var _default = exports.default = (0, _vue.defineComponent)({
         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;
@@ -2041,16 +2027,16 @@ var _default = exports.default = (0, _vue.defineComponent)({
       const bodyTableElem = (0, _util.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) {
@@ -2068,27 +2054,27 @@ var _default = exports.default = (0, _vue.defineComponent)({
       const scrollbarXToTop = computeScrollbarXToTop.value;
       const scrollXVirtualEl = refScrollXVirtualElem.value;
       if (scrollXVirtualEl) {
-        scrollXVirtualEl.style.height = `${scrollbarHeight}px`;
-        scrollXVirtualEl.style.visibility = scrollbarHeight ? 'visible' : 'hidden';
+        scrollXVirtualEl.style.height = `${osbHeight}px`;
+        scrollXVirtualEl.style.visibility = overflowX ? 'visible' : 'hidden';
       }
       const xWrapperEl = refScrollXWrapperElem.value;
       if (xWrapperEl) {
-        xWrapperEl.style.left = scrollbarXToTop ? `${scrollbarWidth}px` : '';
-        xWrapperEl.style.width = `${el.clientWidth - scrollbarWidth}px`;
+        xWrapperEl.style.left = scrollbarXToTop ? `${osbWidth}px` : '';
+        xWrapperEl.style.width = `${el.clientWidth - osbWidth}px`;
       }
       if (xLeftCornerEl) {
-        xLeftCornerEl.style.width = scrollbarXToTop ? `${scrollbarWidth}px` : '';
-        xLeftCornerEl.style.display = scrollbarXToTop ? scrollbarWidth && scrollbarHeight ? 'block' : '' : '';
+        xLeftCornerEl.style.width = scrollbarXToTop ? `${osbWidth}px` : '';
+        xLeftCornerEl.style.display = scrollbarXToTop ? osbWidth && osbHeight ? 'block' : '' : '';
       }
       if (xRightCornerEl) {
-        xRightCornerEl.style.width = scrollbarXToTop ? '' : `${scrollbarWidth}px`;
-        xRightCornerEl.style.display = scrollbarXToTop ? '' : scrollbarWidth && scrollbarHeight ? 'block' : '';
+        xRightCornerEl.style.width = scrollbarXToTop ? '' : `${osbWidth}px`;
+        xRightCornerEl.style.display = scrollbarXToTop ? '' : osbWidth && osbHeight ? 'block' : '';
       }
       const scrollYVirtualEl = refScrollYVirtualElem.value;
       if (scrollYVirtualEl) {
-        scrollYVirtualEl.style.width = `${scrollbarWidth}px`;
+        scrollYVirtualEl.style.width = `${osbWidth}px`;
         scrollYVirtualEl.style.height = `${bodyHeight + headerHeight + footerHeight}px`;
-        scrollYVirtualEl.style.visibility = scrollbarWidth ? 'visible' : 'hidden';
+        scrollYVirtualEl.style.visibility = overflowY ? 'visible' : 'hidden';
       }
       const yTopCornerEl = refScrollYTopCornerElem.value;
       if (yTopCornerEl) {
@@ -2207,14 +2193,14 @@ var _default = exports.default = (0, _vue.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) {
                 // 如果不支持优化模式
               } else {
@@ -2236,7 +2222,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
             if (tableElem) {
               tableElem.style.width = tWidth ? `${tWidth}px` : '';
               // 兼容性处理
-              tableElem.style.paddingRight = scrollbarWidth && fixedType && (_dom.browse['-moz'] || _dom.browse.safari) ? `${scrollbarWidth}px` : '';
+              tableElem.style.paddingRight = osbWidth && fixedType && (_dom.browse['-moz'] || _dom.browse.safari) ? `${osbWidth}px` : '';
             }
             const emptyBlockElem = (0, _util.getRefElem)(elemStore[`${name}-${layout}-emptyBlock`]);
             if (emptyBlockElem) {
@@ -2271,7 +2257,7 @@ var _default = exports.default = (0, _vue.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`;
                 }
               }
             }
@@ -2298,7 +2284,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
                 } else if (layout === 'footer') {
                   cellOverflow = _xeUtils.default.isUndefined(showFooterOverflow) || _xeUtils.default.isNull(showFooterOverflow) ? allColumnFooterOverflow : showFooterOverflow;
                 } else {
-                  cellOverflow = _xeUtils.default.isUndefined(showOverflow) || _xeUtils.default.isNull(showOverflow) ? allColumnOverflow : showOverflow;
+                  cellOverflow = _xeUtils.default.isUndefined(showOverflow) || _xeUtils.default.isNull(showOverflow) ? isAllOverflow : showOverflow;
                 }
                 const showEllipsis = cellOverflow === 'ellipsis';
                 const showTitle = cellOverflow === 'title';
@@ -2992,11 +2978,10 @@ var _default = exports.default = (0, _vue.defineComponent)({
      * 加载表格数据
      * @param {Array} datas 数据
      */
-    const loadTableData = datas => {
+    const loadTableData = (datas, isReset) => {
       const {
         keepSource,
-        treeConfig,
-        showOverflow
+        treeConfig
       } = props;
       const {
         editStore,
@@ -3009,7 +2994,6 @@ var _default = exports.default = (0, _vue.defineComponent)({
         lastScrollTop
       } = internalData;
       const treeOpts = computeTreeOpts.value;
-      const rowOpts = computeRowOpts.value;
       const {
         transform
       } = treeOpts;
@@ -3056,42 +3040,30 @@ var _default = exports.default = (0, _vue.defineComponent)({
       scrollYStore.endIndex = 1;
       scrollXStore.startIndex = 0;
       scrollXStore.endIndex = 1;
+      reactData.isRowLoading = true;
       reactData.scrollVMLoading = false;
       editStore.insertMaps = {};
       editStore.removeMaps = {};
       const sYLoad = updateScrollYStatus(fullData);
+      reactData.isDragColMove = false;
       reactData.isDragRowMove = false;
       // 全量数据
       internalData.tableFullData = fullData;
       internalData.tableFullTreeData = treeData;
       // 缓存数据
-      tablePrivateMethods.cacheRowMap(true);
+      $xeTable.cacheRowMap(true, isReset);
       // 原始数据
       internalData.tableSynchData = datas;
+      if (isReset) {
+        internalData.isResizeCellHeight = false;
+        reactData.rowExpandedMaps = {};
+        reactData.rowExpandLazyLoadedMaps = {};
+        reactData.treeExpandedMaps = {};
+        reactData.treeExpandLazyLoadedMaps = {};
+      }
       // 克隆原数据，用于显示编辑状态，与编辑值做对比
       if (keepSource) {
-        tablePrivateMethods.cacheSourceMap(fullData);
-      }
-      if (sYLoad) {
-        if (showOverflow) {
-          if (!rowOpts.height) {
-            const errColumn = internalData.tableFullColumn.find(column => column.showOverflow === false);
-            if (errColumn) {
-              (0, _log.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)) {
-            (0, _log.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) {
-            (0, _log.warnLog)('vxe.error.scrollErrProp', ['table.span-method']);
-          }
-        }
+        $xeTable.cacheSourceMap(fullData);
       }
       if ($xeTable.clearCellAreas && props.mouseConfig) {
         $xeTable.clearCellAreas();
@@ -3111,6 +3083,27 @@ var _default = exports.default = (0, _vue.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)) {
+              (0, _log.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) {
+              (0, _log.warnLog)('vxe.error.scrollErrProp', ['table.span-method']);
+            }
+          }
+        }
         handleReserveStatus();
         tablePrivateMethods.checkSelectionStatus();
         return new Promise(resolve => {
@@ -3126,6 +3119,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
             if (sYOpts.scrollToTopOnChange) {
               targetScrollTop = 0;
             }
+            reactData.isRowLoading = false;
             calcCellHeight();
             // 是否变更虚拟滚动
             if (oldScrollYLoad === sYLoad) {
@@ -3389,11 +3383,10 @@ var _default = exports.default = (0, _vue.defineComponent)({
       internalData.collectColumn = collectColumn;
       const tableFullColumn = getColumnList(collectColumn);
       internalData.tableFullColumn = tableFullColumn;
-      reactData.isLoading = true;
+      reactData.isColLoading = true;
       reactData.isDragColMove = false;
       initColumnSort();
       return Promise.resolve(restoreCustomStorage()).then(() => {
-        reactData.isLoading = false;
         cacheColumnMap();
         parseColumns(true).then(() => {
           if (reactData.scrollXLoad) {
@@ -3418,6 +3411,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
           if ($xeTable.handleUpdateCustomColumn) {
             $xeTable.handleUpdateCustomColumn();
           }
+          reactData.isColLoading = false;
           return $xeTable.recalculate();
         });
       });
@@ -3559,10 +3553,8 @@ var _default = exports.default = (0, _vue.defineComponent)({
      */
     const loadScrollYData = scrollTop => {
       const {
-        showOverflow
-      } = props;
-      const {
-        mergeList
+        mergeList,
+        isAllOverflow
       } = reactData;
       const {
         scrollYStore
@@ -3573,7 +3565,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
         endIndex,
         offsetSize
       } = scrollYStore;
-      const autoOffsetYSize = showOverflow ? offsetSize : offsetSize + 1;
+      const autoOffsetYSize = isAllOverflow ? offsetSize : offsetSize + 1;
       const {
         toVisibleIndex,
         visibleSize
@@ -3635,7 +3627,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
       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);
       }
@@ -3652,9 +3644,13 @@ var _default = exports.default = (0, _vue.defineComponent)({
     const lazyScrollYData = () => {
       const {
         lyTimeout,
-        lyRunTime
+        lyRunTime,
+        scrollYStore
       } = internalData;
-      const fpsTime = Math.floor(Math.max(4, Math.min(10, 20 / 3)));
+      const {
+        visibleSize
+      } = scrollYStore;
+      const fpsTime = Math.floor(Math.max(4, Math.min(10, visibleSize / 3)));
       if (lyTimeout) {
         clearTimeout(lyTimeout);
       }
@@ -3682,6 +3678,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
       internalData.lcsTimeout = setTimeout(() => {
         internalData.lcsRunTime = Date.now();
         internalData.lcsTimeout = undefined;
+        internalData.intoRunScroll = false;
         internalData.inVirtualScroll = false;
         internalData.inWheelScroll = false;
         internalData.inHeaderScroll = false;
@@ -3701,6 +3698,43 @@ var _default = exports.default = (0, _vue.defineComponent)({
         $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,
@@ -3717,12 +3751,31 @@ var _default = exports.default = (0, _vue.defineComponent)({
       }
       return (0, _vue.nextTick)();
     };
-    function handleUupdateResize() {
+    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,
       /**
@@ -3780,7 +3833,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
         const {
           initStatus
         } = internalData;
-        return loadTableData(datas).then(() => {
+        return loadTableData(datas, false).then(() => {
           internalData.inited = true;
           internalData.initStatus = true;
           if (!initStatus) {
@@ -3797,7 +3850,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
         return tableMethods.clearAll().then(() => {
           internalData.inited = true;
           internalData.initStatus = true;
-          return loadTableData(datas);
+          return loadTableData(datas, true);
         }).then(() => {
           handleLoadDefaults();
           return tableMethods.recalculate();
@@ -3916,6 +3969,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
               parent: parentRow,
               level: parentLevel + nodes.length,
               height: 0,
+              resizeHeight: 0,
               oTop: 0
             };
             fullDataRowIdData[rowid] = rest;
@@ -4156,29 +4210,32 @@ var _default = exports.default = (0, _vue.defineComponent)({
         return (0, _vue.nextTick)();
       },
       getCellElement(row, fieldOrColumn) {
+        const {
+          elemStore
+        } = internalData;
         const column = (0, _util.handleFieldOrColumn)($xeTable, fieldOrColumn);
         if (!column) {
           return null;
         }
         const rowid = (0, _util.getRowid)($xeTable, row);
-        const tableBody = refTableBody.value;
-        const leftBody = refTableLeftBody.value;
-        const rightBody = refTableRightBody.value;
+        const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
+        const leftScrollElem = (0, _util.getRefElem)(elemStore['left-body-scroll']);
+        const rightScrollElem = (0, _util.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}`);
@@ -4651,29 +4708,40 @@ var _default = exports.default = (0, _vue.defineComponent)({
         return (0, _vue.nextTick)();
       },
       setColumnWidth(fieldOrColumn, width) {
+        const {
+          elemStore
+        } = internalData;
         let status = false;
         const cols = _xeUtils.default.isArray(fieldOrColumn) ? fieldOrColumn : [fieldOrColumn];
-        cols.forEach(item => {
-          const column = (0, _util.handleFieldOrColumn)($xeTable, item);
-          if (column) {
-            const colWidth = _xeUtils.default.toInteger(width);
-            let rdWidth = colWidth;
-            if ((0, _dom.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.default.toInteger(width);
+        if ((0, _dom.isScale)(width)) {
+          const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
+          const bodyWidth = bodyScrollElem ? bodyScrollElem.clientWidth - 1 : 0;
+          cWidth = Math.floor(cWidth * bodyWidth);
+        }
+        if (cWidth) {
+          cols.forEach(item => {
+            const column = (0, _util.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 (0, _vue.nextTick)();
+        return (0, _vue.nextTick)().then(() => {
+          return {
+            status
+          };
+        });
       },
       getColumnWidth(fieldOrColumn) {
         const column = (0, _util.handleFieldOrColumn)($xeTable, fieldOrColumn);
@@ -4706,6 +4774,106 @@ var _default = exports.default = (0, _vue.defineComponent)({
           return tableMethods.recalculate();
         });
       },
+      setRowHeightConf(heightConf) {
+        const {
+          fullAllDataRowIdData
+        } = internalData;
+        let status = false;
+        if (heightConf) {
+          _xeUtils.default.each(heightConf, (height, rowid) => {
+            const rowRest = fullAllDataRowIdData[rowid];
+            if (rowRest) {
+              const rHeight = _xeUtils.default.toInteger(height);
+              if (rHeight) {
+                rowRest.resizeHeight = rHeight;
+                if (!status) {
+                  status = true;
+                }
+              }
+            }
+          });
+          if (status) {
+            internalData.isResizeCellHeight = true;
+            reactData.resizeHeightFlag++;
+          }
+        }
+        return (0, _vue.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 = (0, _util.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.default.isArray(rowOrId) ? rowOrId : [rowOrId];
+        let rHeight = _xeUtils.default.toInteger(height);
+        if ((0, _dom.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.default.isString(row) || _xeUtils.default.isNumber(row) ? row : (0, _util.getRowid)($xeTable, row);
+            const rowRest = fullAllDataRowIdData[rowid];
+            if (rowRest) {
+              rowRest.resizeHeight = rHeight;
+              if (!status) {
+                status = true;
+              }
+            }
+          });
+          if (status) {
+            internalData.isResizeCellHeight = true;
+            reactData.resizeHeightFlag++;
+          }
+        }
+        return (0, _vue.nextTick)().then(() => {
+          return {
+            status
+          };
+        });
+      },
+      getRowHeight(rowOrId) {
+        const {
+          fullAllDataRowIdData
+        } = internalData;
+        const rowOpts = computeRowOpts.value;
+        const cellOpts = computeCellOpts.value;
+        const defaultRowHeight = computeDefaultRowHeight.value;
+        const rowid = _xeUtils.default.isString(rowOrId) || _xeUtils.default.isNumber(rowOrId) ? rowOrId : (0, _util.getRowid)($xeTable, rowOrId);
+        const rowRest = fullAllDataRowIdData[rowid];
+        if (rowRest) {
+          return rowRest.resizeHeight || rowRest.height || cellOpts.height || rowOpts.height || defaultRowHeight;
+        }
+        return 0;
+      },
       /**
        * 刷新滚动操作，手动同步滚动相关位置（对于某些特殊的操作，比如滚动条错位、固定列不同步）
        */
@@ -5910,13 +6078,15 @@ var _default = exports.default = (0, _vue.defineComponent)({
           scrollXLoad,
           scrollYLoad
         } = reactData;
-        const tableBody = refTableBody.value;
-        const bodyElem = tableBody.$el;
+        const {
+          elemStore
+        } = internalData;
+        const bodyScrollElem = (0, _util.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
         };
       },
       /**
@@ -5967,9 +6137,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
        */
       scrollToRow(row, fieldOrColumn) {
         const {
-          showOverflow
-        } = props;
-        const {
+          isAllOverflow,
           scrollYLoad,
           scrollXLoad
         } = reactData;
@@ -5986,7 +6154,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
         }
         return Promise.all(rest).then(() => {
           if (row) {
-            if (!showOverflow && (scrollYLoad || scrollXLoad)) {
+            if (!isAllOverflow && (scrollYLoad || scrollXLoad)) {
               calcCellHeight();
               calcCellWidth();
             }
@@ -7054,13 +7222,17 @@ var _default = exports.default = (0, _vue.defineComponent)({
         return;
       }
       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) {
@@ -7071,14 +7243,14 @@ var _default = exports.default = (0, _vue.defineComponent)({
             const trRect = trEl.getBoundingClientRect();
             let trHeight = trEl.clientHeight;
             const offsetTop = Math.max(1, trRect.y - wrapperRect.y);
-            if (offsetTop + trHeight > tableHeight - scrollbarHeight) {
-              trHeight = tableHeight - offsetTop - scrollbarHeight;
+            if (offsetTop + trHeight > tableHeight - osbHeight) {
+              trHeight = tableHeight - offsetTop - osbHeight;
             }
             rdLineEl.style.display = 'block';
-            rdLineEl.style.left = `${scrollbarYToLeft ? scrollbarWidth : 0}px`;
+            rdLineEl.style.left = `${scrollbarYToLeft ? osbWidth : 0}px`;
             rdLineEl.style.top = `${offsetTop}px`;
             rdLineEl.style.height = `${trHeight}px`;
-            rdLineEl.style.width = `${tableWidth - scrollbarWidth}px`;
+            rdLineEl.style.width = `${tableWidth - osbWidth}px`;
             rdLineEl.setAttribute('drag-pos', dragPos);
             rdLineEl.setAttribute('drag-to-child', prevDragToChild ? 'y' : 'n');
           } else {
@@ -7103,7 +7275,7 @@ var _default = exports.default = (0, _vue.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;
             }
@@ -7114,7 +7286,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
             if (prevDragToChild) {
               cdLineEl.style.height = `${thRect.height}px`;
             } else {
-              cdLineEl.style.height = `${tableHeight - offsetTop - (scrollbarXToTop ? 0 : scrollbarHeight)}px`;
+              cdLineEl.style.height = `${tableHeight - offsetTop - (scrollbarXToTop ? 0 : osbHeight)}px`;
             }
             cdLineEl.setAttribute('drag-pos', dragPos);
             cdLineEl.setAttribute('drag-to-child', prevDragToChild ? 'y' : 'n');
@@ -7150,11 +7322,11 @@ var _default = exports.default = (0, _vue.defineComponent)({
      * @param {Event} evnt 事件
      * @param {Row} row 行对象
      */
-    const handleTooltip = (evnt, cell, overflowElem, tipElem, params) => {
+    const handleTooltip = (evnt, tdEl, overflowElem, tipElem, params) => {
       if (!overflowElem) {
         return (0, _vue.nextTick)();
       }
-      params.cell = cell;
+      params.cell = tdEl;
       const {
         tooltipStore
       } = reactData;
@@ -7326,9 +7498,8 @@ var _default = exports.default = (0, _vue.defineComponent)({
       },
       /**
        * 更新数据行的 Map
-       * 牺牲数据组装的耗时，用来换取使用过程中的流畅
        */
-      cacheRowMap(isSource) {
+      cacheRowMap(isReset, isSource) {
         const {
           treeConfig
         } = props;
@@ -7356,7 +7527,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
             row[childrenField] = null;
           }
           let cacheItem = fullAllDataRowIdData[rowid];
-          if (!cacheItem) {
+          if (isReset || !cacheItem) {
             cacheItem = {
               row,
               rowid,
@@ -7369,6 +7540,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
               parent: parentRow,
               level,
               height: 0,
+              resizeHeight: 0,
               oTop: 0
             };
           }
@@ -7482,13 +7654,166 @@ var _default = exports.default = (0, _vue.defineComponent)({
           remainList
         });
       },
-      handleResizeDblclickEvent(evnt, params) {
+      handleColResizeMousedownEvent(evnt, fixedType, params) {
+        evnt.stopPropagation();
+        evnt.preventDefault();
+        const {
+          column
+        } = params;
+        const {
+          overflowX,
+          scrollbarHeight
+        } = reactData;
+        const {
+          elemStore,
+          visibleColumn
+        } = internalData;
+        const resizableOpts = computeResizableOpts.value;
+        const osbHeight = overflowX ? scrollbarHeight : 0;
+        const tableEl = refElem.value;
+        const leftContainerElem = refLeftContainer.value;
+        const rightContainerElem = refRightContainer.value;
+        const resizeBarElem = refColResizeBar.value;
+        if (!resizeBarElem) {
+          return;
+        }
+        const resizeTipElem = resizeBarElem.firstElementChild;
+        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.default.eachTree(column.children, childColumn => {
+            resizeColumn = childColumn;
+          });
+        }
+        const cell = dragBtnElem.parentNode;
+        const cellParams = Object.assign(params, {
+          cell
+        });
+        let dragLeft = 0;
+        const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
+        if (!bodyScrollElem) {
+          return;
+        }
+        const pos = (0, _dom.getOffsetPos)(dragBtnElem, wrapperElem);
+        const dragBtnWidth = dragBtnElem.clientWidth;
+        const dragBtnOffsetWidth = Math.floor(dragBtnWidth / 2);
+        const minInterval = (0, _util.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 ((0, _dom.hasClass)(tempCellElem, 'fixed--hidden')) {
+              break;
+            } else if (!(0, _dom.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;
+        (0, _dom.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);
+          }
+          (0, _dom.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;
@@ -7509,22 +7834,192 @@ var _default = exports.default = (0, _vue.defineComponent)({
             cell
           });
           const colMinWidth = (0, _util.getColReMinWidth)(cellParams);
+          el.setAttribute('data-calc-col', 'Y');
           let resizeWidth = calcColumnAutoWidth(resizeColumn, el);
+          el.removeAttribute('data-calc-col');
           if (colRest) {
             resizeWidth = Math.max(resizeWidth, colRest.width);
           }
-          resizeColumn.resizeWidth = Math.max(colMinWidth, resizeWidth);
-          reactData._isResize = false;
-          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);
+          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 = (0, _util.getRefElem)(elemStore['main-body-scroll']);
+        if (!bodyScrollElem) {
+          return;
+        }
+        const rowid = (0, _util.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.default.toNumber(cellStyle.paddingTop) + _xeUtils.default.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;
+        (0, _dom.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);
+            }
+          }
+          (0, _dom.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 = (0, _util.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) {
@@ -7930,10 +8425,21 @@ var _default = exports.default = (0, _vue.defineComponent)({
         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);
         }
       },
       /**
@@ -7957,7 +8463,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
           row,
           column
         } = params;
-        const cell = evnt.currentTarget;
+        const tdEl = evnt.currentTarget;
         handleTargetEnterEvent(tooltipStore.column !== column || tooltipStore.row !== row);
         // 单元格处于编辑状态时不触发提示框
         if (column.editRender && (0, _utils.isEnableConf)(editConfig)) {
@@ -7971,17 +8477,7 @@ var _default = exports.default = (0, _vue.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);
         }
       },
       /**
@@ -7997,7 +8493,7 @@ var _default = exports.default = (0, _vue.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() {
@@ -8010,11 +8506,11 @@ var _default = exports.default = (0, _vue.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) {
@@ -8059,8 +8555,12 @@ var _default = exports.default = (0, _vue.defineComponent)({
           editConfig
         } = props;
         const {
-          editStore
+          editStore,
+          isDragResize
         } = reactData;
+        if (isDragResize) {
+          return;
+        }
         const expandOpts = computeExpandOpts.value;
         const editOpts = computeEditOpts.value;
         const treeOpts = computeTreeOpts.value;
@@ -8170,8 +8670,12 @@ var _default = exports.default = (0, _vue.defineComponent)({
           editConfig
         } = props;
         const {
-          editStore
+          editStore,
+          isDragResize
         } = reactData;
+        if (isDragResize) {
+          return;
+        }
         const editOpts = computeEditOpts.value;
         const {
           actived
@@ -8460,13 +8964,19 @@ var _default = exports.default = (0, _vue.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,
@@ -8593,7 +9103,8 @@ var _default = exports.default = (0, _vue.defineComponent)({
           isPeerDrag,
           isCrossDrag,
           isSelfToChildDrag,
-          dragEndMethod
+          dragEndMethod,
+          dragToChildMethod
         } = rowDragOpts;
         const treeOpts = computeTreeOpts.value;
         const {
@@ -8612,13 +9123,15 @@ var _default = exports.default = (0, _vue.defineComponent)({
         if (prevDragRow && dragRow) {
           // 判断是否有拖动
           if (prevDragRow !== dragRow) {
-            return Promise.resolve(dEndMethod ? dEndMethod({
+            const dragParams = {
               oldRow: dragRow,
               newRow: prevDragRow,
               dragPos: prevDragPos,
               dragToChild: !!prevDragToChild,
               offsetIndex: dragOffsetIndex
-            }) : true).then(status => {
+            };
+            const isDragToChildFlag = isSelfToChildDrag && dragToChildMethod ? dragToChildMethod(dragParams) : prevDragToChild;
+            return Promise.resolve(dEndMethod ? dEndMethod(dragParams) : true).then(status => {
               if (!status) {
                 return;
               }
@@ -8696,7 +9209,9 @@ var _default = exports.default = (0, _vue.defineComponent)({
                       // 根到根
                     }
                     const fullList = _xeUtils.default.toTreeArray(internalData.afterTreeFullData, {
-                      children: childrenField
+                      key: rowField,
+                      parentKey: parentField,
+                      children: mapChildrenField
                     });
                     // 移出
                     const otfIndex = $xeTable.findRowIndexOf(fullList, dragRow);
@@ -8711,12 +9226,12 @@ var _default = exports.default = (0, _vue.defineComponent)({
                         childRow[parentField] = dragRow[parentField];
                       });
                     }
-                    dragRow[parentField] = prevDragToChild ? prevDragRow[rowField] : prevDragRow[parentField];
+                    dragRow[parentField] = isDragToChildFlag ? prevDragRow[rowField] : prevDragRow[parentField];
                     internalData.tableFullTreeData = _xeUtils.default.toArrayTree(fullList, {
-                      key: treeOpts.rowField,
-                      parentKey: treeOpts.parentField,
+                      key: rowField,
+                      parentKey: parentField,
                       children: childrenField,
-                      mapChildren: treeOpts.mapChildrenField
+                      mapChildren: mapChildrenField
                     });
                   }
                 }
@@ -8736,7 +9251,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
               }
               reactData.isDragRowMove = true;
               $xeTable.handleTableData(treeConfig && transform);
-              $xeTable.cacheRowMap();
+              $xeTable.cacheRowMap(false);
               updateScrollYStatus();
               if (!(treeConfig && transform)) {
                 $xeTable.updateAfterDataIndex();
@@ -8753,7 +9268,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
                 oldRow: dragRow,
                 newRow: prevDragRow,
                 dragPos: prevDragPos,
-                dragToChild: !!prevDragToChild,
+                dragToChild: isDragToChildFlag,
                 offsetIndex: dragOffsetIndex,
                 _index: {
                   newIndex: nafIndex,
@@ -8785,18 +9300,16 @@ var _default = exports.default = (0, _vue.defineComponent)({
           prevDragRow,
           prevDragPos
         } = internalData;
-        if (treeConfig && prevDragToChild) {
+        if (treeConfig && lazy && prevDragToChild) {
           // 懒加载
-          if (lazy) {
-            const newRowid = (0, _util.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 = (0, _util.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);
@@ -8927,7 +9440,8 @@ var _default = exports.default = (0, _vue.defineComponent)({
           isCrossDrag,
           isSelfToChildDrag,
           isToChildDrag,
-          dragEndMethod
+          dragEndMethod,
+          dragToChildMethod
         } = columnDragOpts;
         const {
           collectColumn
@@ -8938,13 +9452,15 @@ var _default = exports.default = (0, _vue.defineComponent)({
           if (prevDragCol !== dragCol) {
             const oldColumn = dragCol;
             const newColumn = prevDragCol;
-            return Promise.resolve(dragEndMethod ? dragEndMethod({
+            const dragParams = {
               oldColumn,
               newColumn,
               dragPos: prevDragPos,
               dragToChild: !!prevDragToChild,
               offsetIndex: dragOffsetIndex
-            }) : true).then(status => {
+            };
+            const isDragToChildFlag = isSelfToChildDrag && dragToChildMethod ? dragToChildMethod(dragParams) : prevDragToChild;
+            return Promise.resolve(dragEndMethod ? dragEndMethod(dragParams) : true).then(status => {
               if (!status) {
                 return;
               }
@@ -9040,7 +9556,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
                   parent: nParent
                 } = newMatchRest;
                 // 转子级
-                if (isCrossDrag && isToChildDrag && prevDragToChild) {
+                if (isCrossDrag && isToChildDrag && isDragToChildFlag) {
                   oldColumn.parentId = newColumn.id;
                   newColumn.children = (newColumn.children || []).concat([oldColumn]);
                 } else {
@@ -9071,7 +9587,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
                 oldColumn,
                 newColumn,
                 dragPos: prevDragPos,
-                dragToChild: !!prevDragToChild,
+                dragToChild: isDragToChildFlag,
                 offsetIndex: dragOffsetIndex,
                 _index: {
                   newIndex: nafIndex,
@@ -9339,6 +9855,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
       triggerBodyScrollEvent(evnt, fixedType) {
         const {
           elemStore,
+          intoRunScroll,
           lastScrollTop,
           lastScrollLeft,
           inWheelScroll,
@@ -9358,6 +9875,9 @@ var _default = exports.default = (0, _vue.defineComponent)({
         if (inWheelScroll || inVirtualScroll || inHeaderScroll || inFooterScroll) {
           return;
         }
+        if (intoRunScroll) {
+          return;
+        }
         if (!bodyScrollElem) {
           return;
         }
@@ -9414,6 +9934,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
       triggerHeaderScrollEvent(evnt, fixedType) {
         const {
           elemStore,
+          intoRunScroll,
           inWheelScroll,
           inVirtualScroll,
           inBodyScroll,
@@ -9424,16 +9945,10 @@ var _default = exports.default = (0, _vue.defineComponent)({
         const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
         const headerScrollElem = (0, _util.getRefElem)(elemStore['main-header-scroll']);
         const footerScrollElem = (0, _util.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) {
@@ -9462,6 +9977,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
       triggerFooterScrollEvent(evnt, fixedType) {
         const {
           elemStore,
+          intoRunScroll,
           inWheelScroll,
           inVirtualScroll,
           inHeaderScroll,
@@ -9472,16 +9988,10 @@ var _default = exports.default = (0, _vue.defineComponent)({
         const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
         const headerScrollElem = (0, _util.getRefElem)(elemStore['main-header-scroll']);
         const footerScrollElem = (0, _util.getRefElem)(elemStore['main-footer-scroll']);
-        if (inWheelScroll) {
-          return;
-        }
-        if (inVirtualScroll) {
+        if (inWheelScroll || inVirtualScroll || inHeaderScroll || inBodyScroll) {
           return;
         }
-        if (inHeaderScroll) {
-          return;
-        }
-        if (inBodyScroll) {
+        if (intoRunScroll) {
           return;
         }
         if (!footerScrollElem) {
@@ -9509,9 +10019,13 @@ var _default = exports.default = (0, _vue.defineComponent)({
       },
       triggerBodyWheelEvent(evnt) {
         const {
+          target,
           deltaY,
           deltaX
         } = evnt;
+        if (target && /^textarea$/i.test(target.tagName)) {
+          return;
+        }
         const {
           highlightHoverRow
         } = _props.default;
@@ -9535,26 +10049,13 @@ var _default = exports.default = (0, _vue.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;
@@ -9567,16 +10068,29 @@ var _default = exports.default = (0, _vue.defineComponent)({
           if (rowOpts.isHover || highlightHoverRow) {
             $xeTable.clearHoverRow();
           }
-          internalData.inWheelScroll = true;
-          (0, _dom.setScrollTop)(yHandleEl, scrollTop);
-          (0, _dom.setScrollTop)(bodyScrollElem, scrollTop);
-          (0, _dom.setScrollTop)(leftScrollElem, scrollTop);
-          (0, _dom.setScrollTop)(rightScrollElem, scrollTop);
-          loadScrollYData(scrollTop);
-          $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
-            type: 'table',
-            fixed: ''
+          wheelScrollTo(scrollTop - bodyScrollElem.scrollTop, offsetTop => {
+            const currTopNum = bodyScrollElem.scrollTop + offsetTop;
+            internalData.inWheelScroll = true;
+            (0, _dom.setScrollTop)(yHandleEl, currTopNum);
+            (0, _dom.setScrollTop)(bodyScrollElem, currTopNum);
+            (0, _dom.setScrollTop)(leftScrollElem, currTopNum);
+            (0, _dom.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) {
@@ -9746,45 +10260,43 @@ var _default = exports.default = (0, _vue.defineComponent)({
       // 更新纵向 Y 可视渲染上下剩余空间大小
       updateScrollYSpace() {
         const {
-          showOverflow
-        } = props;
-        const {
-          scrollYLoad,
-          rowHeight
+          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 = (0, _util.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 = (0, _util.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 = (0, _util.getRowid)($xeTable, row);
-              const rowRest = fullAllDataRowIdData[rowid];
-              if (rowRest) {
-                topSpaceHeight += rowRest.height || rowHeight;
-              }
+              const rowRest = fullAllDataRowIdData[rowid] || {};
+              topSpaceHeight += rowRest.resizeHeight || rowRest.height || cellOpts.height || rowOpts.height || defaultRowHeight;
             }
           }
         } else {
@@ -9809,19 +10321,19 @@ var _default = exports.default = (0, _vue.defineComponent)({
         if (scrollYSpaceEl) {
           scrollYSpaceEl.style.height = ySpaceHeight ? `${ySpaceHeight}px` : '';
         }
-        (0, _vue.nextTick)(() => {
+        return (0, _vue.nextTick)().then(() => {
           updateStyle();
         });
       },
       updateScrollXData() {
         const {
-          showOverflow
-        } = props;
+          isAllOverflow
+        } = reactData;
         handleTableColumn();
         return (0, _vue.nextTick)().then(() => {
           handleTableColumn();
           $xeTable.updateScrollXSpace();
-          if (!showOverflow) {
+          if (!isAllOverflow) {
             $xeTable.updateScrollYSpace();
           }
         });
@@ -10173,7 +10685,6 @@ var _default = exports.default = (0, _vue.defineComponent)({
         editRules
       } = props;
       const {
-        isCalcColumn,
         isGroup,
         overflowX,
         overflowY,
@@ -10183,15 +10694,15 @@ var _default = exports.default = (0, _vue.defineComponent)({
         initStore,
         columnStore,
         filterStore,
-        customStore,
-        tooltipStore
+        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;
@@ -10203,7 +10714,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
       const areaOpts = computeAreaOpts.value;
       const loadingOpts = computeLoadingOpts.value;
       const isMenu = computeIsMenu.value;
-      const currLoading = reactData.isLoading || loading;
+      const currLoading = reactData.isColLoading || reactData.isRowLoading || loading;
       const resizableOpts = computeResizableOpts.value;
       const isArea = mouseConfig && mouseOpts.area;
       const columnDragOpts = computeColumnDragOpts.value;
@@ -10224,7 +10735,6 @@ var _default = exports.default = (0, _vue.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,
@@ -10233,7 +10743,6 @@ var _default = exports.default = (0, _vue.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,
@@ -10276,11 +10785,20 @@ var _default = exports.default = (0, _vue.defineComponent)({
        * 列宽线
        */
       (0, _vue.h)('div', {
-        key: 'cl',
-        ref: refCellResizeBar,
-        class: 'vxe-table--resizable-bar'
+        key: 'tcl',
+        ref: refColResizeBar,
+        class: 'vxe-table--resizable-col-bar'
+      }, resizableOpts.showDragTip ? [(0, _vue.h)('div', {
+        class: 'vxe-table--resizable-number-tip'
+      })] : []),
+      /**
+       * 行高线
+       */
+      (0, _vue.h)('div', {
+        key: 'trl',
+        ref: refRowResizeBar,
+        class: 'vxe-table--resizable-row-bar'
       }, resizableOpts.showDragTip ? [(0, _vue.h)('div', {
-        ref: refCellResizeTip,
         class: 'vxe-table--resizable-number-tip'
       })] : []),
       /**
@@ -10366,22 +10884,28 @@ var _default = exports.default = (0, _vue.defineComponent)({
       /**
         * 工具提示
         */
-      (0, _vue.h)(VxeUITooltipComponent, Object.assign({
+      (0, _vue.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') ? (0, _vue.h)(VxeUITooltipComponent, Object.assign({
+      props.editRules && validOpts.showMessage && (validOpts.message === 'default' ? !height : validOpts.message === 'tooltip') ? (0, _vue.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) : {})) : renderEmptyElement($xeTable)]) : renderEmptyElement($xeTable)]);
+        }, 'vxe-table--valid-error'],
+        theme: validTipConfig.theme,
+        enterable: validTipConfig.enterable,
+        enterDelay: validTipConfig.enterDelay,
+        leaveDelay: validTipConfig.leaveDelay
+      }) : renderEmptyElement($xeTable)]) : renderEmptyElement($xeTable)]);
     };
     const dataFlag = (0, _vue.ref)(0);
     (0, _vue.watch)(() => props.data ? props.data.length : -1, () => {
@@ -10398,7 +10922,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
       if (value && value.length >= 50000) {
         (0, _log.warnLog)('vxe.error.errLargeData', ['loadData(data), reloadData(data)']);
       }
-      loadTableData(value).then(() => {
+      loadTableData(value, true).then(() => {
         const {
           scrollXLoad,
           scrollYLoad,
@@ -10493,10 +11017,10 @@ var _default = exports.default = (0, _vue.defineComponent)({
     });
     (0, _vue.watch)(() => props.syncResize, value => {
       if (value) {
-        handleUupdateResize();
+        handleUpdateResize();
         (0, _vue.nextTick)(() => {
-          handleUupdateResize();
-          setTimeout(() => handleUupdateResize());
+          handleUpdateResize();
+          setTimeout(() => handleUpdateResize());
         });
       }
     });
@@ -10611,6 +11135,9 @@ var _default = exports.default = (0, _vue.defineComponent)({
           if (props.showFooter && !(props.footerMethod || props.footerData)) {
             (0, _log.warnLog)('vxe.error.reqProp', ['footer-data | footer-method']);
           }
+          if (rowOpts.height) {
+            (0, _log.warnLog)('vxe.error.delProp', ['row-config.height', 'cell-config.height']);
+          }
           // if (props.highlightCurrentRow) {
           //   warnLog('vxe.error.delProp', ['highlight-current-row', 'row-config.isCurrent'])
           // }
@@ -10721,7 +11248,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
           endIndex: 0,
           visibleSize: 0
         });
-        loadTableData(data || []).then(() => {
+        loadTableData(data || [], true).then(() => {
           if (data && data.length) {
             internalData.inited = true;
             internalData.initStatus = true;