vxe-table 4.13.0-beta.4 → 4.13.0

package/lib/table/src/table.js

@@ -1655,10 +1655,8 @@ var _default = exports.default = (0, _vue.defineComponent)({
       const {
         elemStore
       } = internalData;
-      const scrollbarOpts = computeScrollbarOpts.value;
-      const tableBody = refTableBody.value;
-      const bodyElem = tableBody ? tableBody.$el : null;
-      if (!bodyElem) {
+      const bodyWrapperElem = (0, _util.getRefElem)(elemStore['main-body-wrapper']);
+      if (!bodyWrapperElem) {
         return;
       }
       const yHandleEl = refScrollYHandleElem.value;
@@ -1671,7 +1669,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
       }
       let tWidth = 0;
       const minCellWidth = 40; // 列宽最少限制 40px
-      const bodyWidth = bodyElem.clientWidth;
+      const bodyWidth = bodyWrapperElem.clientWidth;
       let remainWidth = bodyWidth;
       let meanWidth = remainWidth / 100;
       const {
@@ -1768,28 +1766,10 @@ var _default = exports.default = (0, _vue.defineComponent)({
           }
         }
       }
-      const tableHeight = bodyElem.offsetHeight;
-      const overflowY = yHandleEl.scrollHeight > yHandleEl.clientHeight;
-      reactData.scrollbarWidth = Math.max(scrollbarOpts.width || 0, yHandleEl.offsetWidth - yHandleEl.clientWidth);
-      reactData.overflowY = overflowY;
       reactData.scrollXWidth = tWidth;
-      internalData.tableHeight = tableHeight;
-      const headerTableElem = (0, _util.getRefElem)(elemStore['main-header-table']);
-      const footerTableElem = (0, _util.getRefElem)(elemStore['main-footer-table']);
-      const headerHeight = headerTableElem ? headerTableElem.clientHeight : 0;
-      const overflowX = tWidth > bodyWidth;
-      const footerHeight = footerTableElem ? footerTableElem.clientHeight : 0;
-      reactData.scrollbarHeight = Math.max(scrollbarOpts.height || 0, xHandleEl.offsetHeight - xHandleEl.clientHeight);
-      internalData.headerHeight = headerHeight;
-      internalData.footerHeight = footerHeight;
-      reactData.overflowX = overflowX;
       reactData.resizeWidthFlag++;
       updateColumnOffsetLeft();
       updateHeight();
-      reactData.parentHeight = Math.max(internalData.headerHeight + footerHeight + 20, $xeTable.getParentHeight());
-      if (overflowX) {
-        $xeTable.checkScrolling();
-      }
     };
     const calcCellAutoHeight = (rowRest, wrapperEl) => {
       const cellElemList = wrapperEl.querySelectorAll(`.vxe-cell--wrapper[rowid="${rowRest.rowid}"]`);
@@ -3123,7 +3103,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
         }
         // 计算 Y 逻辑
         const rowHeight = computeRowHeight();
-        scrollYStore.rowHeight = rowHeight;
+        scrollYStore.rowHeight = rowHeight; // 已废弃
         reactData.rowHeight = rowHeight;
         const {
           toVisibleIndex: toYVisibleIndex,
@@ -3143,11 +3123,46 @@ var _default = exports.default = (0, _vue.defineComponent)({
         } else {
           $xeTable.updateScrollYSpace();
         }
-        (0, _vue.nextTick)(() => {
-          updateStyle();
-        });
       });
     };
+    const calcScrollbar = () => {
+      const {
+        scrollXWidth,
+        scrollYHeight
+      } = reactData;
+      const {
+        elemStore
+      } = internalData;
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const bodyWrapperElem = (0, _util.getRefElem)(elemStore['main-body-wrapper']);
+      const headerTableElem = (0, _util.getRefElem)(elemStore['main-header-table']);
+      const footerTableElem = (0, _util.getRefElem)(elemStore['main-footer-table']);
+      const xHandleEl = refScrollXHandleElem.value;
+      const yHandleEl = refScrollYHandleElem.value;
+      let overflowY = false;
+      let overflowX = false;
+      if (bodyWrapperElem) {
+        overflowY = scrollYHeight > bodyWrapperElem.clientHeight;
+        if (yHandleEl) {
+          reactData.scrollbarWidth = Math.max(scrollbarOpts.width || 0, yHandleEl.offsetWidth - yHandleEl.clientWidth);
+        }
+        reactData.overflowY = overflowY;
+        overflowX = scrollXWidth > bodyWrapperElem.clientWidth;
+        if (xHandleEl) {
+          reactData.scrollbarHeight = Math.max(scrollbarOpts.height || 0, xHandleEl.offsetHeight - xHandleEl.clientHeight);
+        }
+        const headerHeight = headerTableElem ? headerTableElem.clientHeight : 0;
+        const footerHeight = footerTableElem ? footerTableElem.clientHeight : 0;
+        internalData.tableHeight = bodyWrapperElem.offsetHeight;
+        internalData.headerHeight = headerHeight;
+        internalData.footerHeight = footerHeight;
+        reactData.overflowX = overflowX;
+        reactData.parentHeight = Math.max(internalData.headerHeight + footerHeight + 20, $xeTable.getParentHeight());
+      }
+      if (overflowX) {
+        $xeTable.checkScrolling();
+      }
+    };
     const handleRecalculateLayout = reFull => {
       const el = refElem.value;
       internalData.rceRunTime = Date.now();
@@ -3164,18 +3179,22 @@ var _default = exports.default = (0, _vue.defineComponent)({
       }
       calcCellWidth();
       autoCellWidth();
+      calcScrollbar();
       updateStyle();
       updateRowExpandStyle();
       return computeScrollLoad().then(() => {
-        if (reFull === true) {
-          // 初始化时需要在列计算之后再执行优化运算，达到最优显示效果
-          calcCellWidth();
+        // 初始化时需要在列计算之后再执行优化运算，达到最优显示效果
+        calcCellWidth();
+        if (reFull) {
           autoCellWidth();
-          updateStyle();
-          if (reFull) {
-            updateRowOffsetTop();
-          }
-          updateRowExpandStyle();
+        }
+        calcScrollbar();
+        updateStyle();
+        if (reFull) {
+          updateRowOffsetTop();
+        }
+        updateRowExpandStyle();
+        if (reFull) {
           return computeScrollLoad();
         }
       });
@@ -11058,11 +11077,11 @@ var _default = exports.default = (0, _vue.defineComponent)({
             const firstRow = afterFullData[startIndex];
             let rowid = (0, _util.getRowid)($xeTable, firstRow);
             let rowRest = fullAllDataRowIdData[rowid] || {};
-            ySpaceTop = rowRest.oTop;
+            ySpaceTop = rowRest.oTop || 0;
             const lastRow = afterFullData[afterFullData.length - 1];
             rowid = (0, _util.getRowid)($xeTable, lastRow);
             rowRest = fullAllDataRowIdData[rowid] || {};
-            scrollYHeight = rowRest.oTop + (rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight);
+            scrollYHeight = (rowRest.oTop || 0) + (rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight);
             // 是否展开行
             if (expandColumn && rowExpandedMaps[rowid]) {
               scrollYHeight += rowRest.expandHeight || expandOpts.height || 0;
@@ -11128,7 +11147,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
           isAllOverflow
         } = reactData;
         handleTableColumn();
-        $xeTable.updateScrollYSpace();
+        $xeTable.updateScrollXSpace();
         return (0, _vue.nextTick)().then(() => {
           handleTableColumn();
           $xeTable.updateScrollXSpace();
@@ -11790,7 +11809,8 @@ var _default = exports.default = (0, _vue.defineComponent)({
         theme: tableTipConfig.theme,
         enterable: tableTipConfig.enterable,
         enterDelay: tableTipConfig.enterDelay,
-        leaveDelay: tableTipConfig.leaveDelay
+        leaveDelay: tableTipConfig.leaveDelay,
+        useHTML: tableTipConfig.useHTML
       }),
       /**
         * 校验提示