vxe-table 3.19.6 → 3.19.8

package/lib/table/src/methods.js

@@ -617,8 +617,7 @@ function handleVirtualTreeExpand($xeTable, rows, expanded) {
     updateAfterDataIndex($xeTable);
     return $xeTable.$nextTick();
   }).then(() => {
-    updateTreeLineStyle($xeTable);
-    return handleLazyRecalculate($xeTable, true, true, true);
+    return handleRecalculateStyle($xeTable, true, true, true);
   }).then(() => {
     updateTreeLineStyle($xeTable);
     setTimeout(() => {
@@ -1240,18 +1239,12 @@ function updateStyle($xeTable) {
   const reactData = $xeTable;
   const internalData = $xeTable;
   const {
-    showHeaderOverflow: allColumnHeaderOverflow,
-    showFooterOverflow: allColumnFooterOverflow,
-    mouseConfig,
-    spanMethod,
-    footerSpanMethod
+    mouseConfig
   } = props;
   const {
     isGroup,
     currentRow,
     tableColumn,
-    scrollXLoad,
-    scrollYLoad,
     overflowX,
     scrollbarWidth,
     overflowY,
@@ -1259,8 +1252,6 @@ function updateStyle($xeTable) {
     scrollXWidth,
     columnStore,
     editStore,
-    isAllOverflow,
-    expandColumn,
     isColLoading
   } = reactData;
   const {
@@ -1279,12 +1270,18 @@ function updateStyle($xeTable) {
     return;
   }
   const containerList = ['main', 'left', 'right'];
+  const {
+    leftList,
+    rightList
+  } = columnStore;
   let osbWidth = overflowY ? scrollbarWidth : 0;
   let osbHeight = overflowX ? scrollbarHeight : 0;
   const emptyPlaceholderElem = $xeTable.$refs.refEmptyPlaceholder;
+  const isHeaderRenderOptimize = $xeTable.computeIsHeaderRenderOptimize;
+  const isBodyRenderOptimize = $xeTable.computeIsBodyRenderOptimize;
+  const isFooterRenderOptimize = $xeTable.computeIsFooterRenderOptimize;
   const scrollbarOpts = $xeTable.computeScrollbarOpts;
   const mouseOpts = $xeTable.computeMouseOpts;
-  const expandOpts = $xeTable.computeExpandOpts;
   const bodyWrapperElem = (0, _util.getRefElem)(elemStore['main-body-wrapper']);
   const bodyTableElem = (0, _util.getRefElem)(elemStore['main-body-table']);
   if (emptyPlaceholderElem) {
@@ -1397,7 +1394,7 @@ function updateStyle($xeTable) {
     let fixedColumn = [];
     let fixedWrapperElem;
     if (fixedType) {
-      fixedColumn = isFixedLeft ? columnStore.leftList : columnStore.rightList;
+      fixedColumn = isFixedLeft ? leftList : rightList;
       fixedWrapperElem = isFixedLeft ? $xeTable.$refs.refLeftContainer : $xeTable.$refs.refRightContainer;
     }
     layoutList.forEach(layout => {
@@ -1408,18 +1405,10 @@ function updateStyle($xeTable) {
         // 表头体样式处理
         // 横向滚动渲染
         let renderColumnList = tableColumn;
-        let isOptimizeMode = false;
+        const isOptimizeMode = isHeaderRenderOptimize;
         if (isGroup) {
           renderColumnList = visibleColumn;
         } else {
-          // 如果是使用优化模式
-          if (scrollXLoad && allColumnHeaderOverflow) {
-            if (spanMethod || footerSpanMethod) {
-              // 如果不支持优化模式
-            } else {
-              isOptimizeMode = true;
-            }
-          }
           if (!isOptimizeMode || !isColLoading && (fixedType || !overflowX)) {
             renderColumnList = visibleColumn;
           }
@@ -1469,15 +1458,7 @@ function updateStyle($xeTable) {
           fixedWrapperElem.style.width = `${fixedColumn.reduce((previous, column) => previous + column.renderWidth, 0)}px`;
         }
         let renderColumnList = tableColumn;
-        let isOptimizeMode = false;
-        // 如果是使用优化模式
-        if (scrollXLoad || scrollYLoad || isAllOverflow) {
-          if (expandColumn && expandOpts.mode !== 'fixed' || spanMethod || footerSpanMethod) {
-            // 如果不支持优化模式
-          } else {
-            isOptimizeMode = true;
-          }
-        }
+        const isOptimizeMode = isBodyRenderOptimize;
         if (fixedType) {
           renderColumnList = visibleColumn;
           if (isOptimizeMode) {
@@ -1507,15 +1488,7 @@ function updateStyle($xeTable) {
         }
       } else if (layout === 'footer') {
         let renderColumnList = tableColumn;
-        let isOptimizeMode = false;
-        // 如果是使用优化模式
-        if (scrollXLoad && allColumnFooterOverflow) {
-          if (spanMethod || footerSpanMethod) {
-            // 如果不支持优化模式
-          } else {
-            isOptimizeMode = true;
-          }
-        }
+        const isOptimizeMode = isFooterRenderOptimize;
         if (!isOptimizeMode || !isColLoading && (fixedType || !overflowX)) {
           renderColumnList = visibleColumn;
         }
@@ -2948,20 +2921,32 @@ function autoCellWidth($xeTable) {
 /**
  * 计算自适应行高
  */
-const calcCellAutoHeight = (rowRest, wrapperEl) => {
-  const cellElemList = wrapperEl.querySelectorAll(`.vxe-cell--wrapper[rowid="${rowRest.rowid}"]`);
+const calcCellAutoHeight = ($xeTable, rowRest, wrapperEl) => {
+  const reactData = $xeTable;
+  const {
+    scrollXLoad
+  } = reactData;
+  const wrapperElemList = wrapperEl.querySelectorAll(`.vxe-cell--wrapper[rowid="${rowRest.rowid}"]`);
   let colHeight = rowRest.height;
   let firstCellStyle = null;
   let topBottomPadding = 0;
-  for (let i = 0; i < cellElemList.length; i++) {
-    const wrapperElem = cellElemList[i];
+  for (let i = 0; i < wrapperElemList.length; i++) {
+    const wrapperElem = wrapperElemList[i];
     const cellElem = wrapperElem.parentElement;
     if (!firstCellStyle) {
+      const cellStyle = cellElem.style;
+      const orHeight = cellStyle.height;
+      if (!scrollXLoad) {
+        cellStyle.height = '';
+      }
       firstCellStyle = getComputedStyle(cellElem);
       topBottomPadding = firstCellStyle ? Math.ceil(_xeUtils.default.toNumber(firstCellStyle.paddingTop) + _xeUtils.default.toNumber(firstCellStyle.paddingBottom)) : 0;
+      if (!scrollXLoad) {
+        cellStyle.height = orHeight;
+      }
     }
     const cellHeight = wrapperElem ? wrapperElem.clientHeight : 0;
-    colHeight = Math.max(colHeight, Math.ceil(cellHeight + topBottomPadding));
+    colHeight = scrollXLoad ? Math.max(colHeight, Math.ceil(cellHeight + topBottomPadding)) : Math.ceil(cellHeight + topBottomPadding);
   }
   return colHeight;
 };
@@ -2991,13 +2976,15 @@ const calcCellHeight = $xeTable => {
     const {
       handleGetRowId
     } = (0, _util.createHandleGetRowId)($xeTable);
+    el.setAttribute('data-calc-row', 'Y');
     tableData.forEach(row => {
       const rowid = handleGetRowId(row);
       const rowRest = fullAllDataRowIdData[rowid];
       if (rowRest) {
-        const height = calcCellAutoHeight(rowRest, el);
+        const height = calcCellAutoHeight($xeTable, rowRest, el);
         rowRest.height = Math.max(defaultRowHeight, scrollXLoad ? Math.max(rowRest.height, height) : height);
       }
+      el.removeAttribute('data-calc-row');
     });
     reactData.calcCellHeightFlag++;
   }
@@ -7182,7 +7169,9 @@ const Methods = {
         return;
       }
       const handleRsHeight = () => {
-        const resizeHeight = calcCellAutoHeight(rowRest, el);
+        el.setAttribute('data-calc-row', 'Y');
+        const resizeHeight = calcCellAutoHeight($xeTable, rowRest, el);
+        el.removeAttribute('data-calc-row');
         const resizeParams = Object.assign(Object.assign({}, params), {
           resizeHeight,
           resizeRow: row
@@ -7281,7 +7270,7 @@ const Methods = {
         const rowid = _xeUtils.default.isString(row) || _xeUtils.default.isNumber(row) ? row : handleGetRowId(row);
         const rowRest = fullAllDataRowIdData[rowid];
         if (rowRest) {
-          rowRest.resizeHeight = calcCellAutoHeight(rowRest, el);
+          rowRest.resizeHeight = calcCellAutoHeight($xeTable, rowRest, el);
         }
         el.removeAttribute('data-calc-row');
       });
@@ -13157,7 +13146,9 @@ const Methods = {
     const internalData = $xeTable;
     const {
       isAllOverflow,
+      overflowY,
       scrollYLoad,
+      scrollYHeight,
       expandColumn
     } = reactData;
     const {
@@ -13183,13 +13174,13 @@ const Methods = {
     const rightbodyTableElem = (0, _util.getRefElem)(elemStore['right-body-table']);
     const containerList = ['main', 'left', 'right'];
     let ySpaceTop = 0;
-    let scrollYHeight = 0;
+    let sYHeight = scrollYHeight;
     let isScrollYBig = false;
     if (scrollYLoad) {
       const isCustomCellHeight = isResizeCellHeight || cellOpts.height || rowOpts.height;
       if (!isCustomCellHeight && !expandColumn && isAllOverflow) {
-        scrollYHeight = afterFullData.length * defaultRowHeight;
-        if (scrollYHeight > maxYHeight) {
+        sYHeight = afterFullData.length * defaultRowHeight;
+        if (sYHeight > maxYHeight) {
           isScrollYBig = true;
         }
         ySpaceTop = Math.max(0, startIndex * defaultRowHeight);
@@ -13201,18 +13192,21 @@ const Methods = {
         const lastRow = afterFullData[afterFullData.length - 1];
         rowid = (0, _util.getRowid)($xeTable, lastRow);
         rowRest = fullAllDataRowIdData[rowid] || {};
-        scrollYHeight = (rowRest.oTop || 0) + (rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight);
-        // 是否展开行
-        if (expandColumn && rowExpandedMaps[rowid]) {
-          scrollYHeight += rowRest.expandHeight || expandOpts.height || 0;
+        // 如果为空时还没计算完数据，保持原高度不变
+        if (rowRest.oTop) {
+          sYHeight = (rowRest.oTop || 0) + (rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight);
+          // 是否展开行
+          if (expandColumn && rowExpandedMaps[rowid]) {
+            sYHeight += rowRest.expandHeight || expandOpts.height || 0;
+          }
         }
-        if (scrollYHeight > maxYHeight) {
+        if (sYHeight > maxYHeight) {
           isScrollYBig = true;
         }
       }
     } else {
       if (bodyTableElem) {
-        scrollYHeight = bodyTableElem.clientHeight;
+        sYHeight = bodyTableElem.clientHeight;
       }
     }
     let clientHeight = 0;
@@ -13220,7 +13214,7 @@ const Methods = {
       clientHeight = bodyScrollElem.clientHeight;
     }
     // 虚拟渲染
-    let ySpaceHeight = scrollYHeight;
+    let ySpaceHeight = sYHeight;
     let scrollYTop = ySpaceTop;
     if (isScrollYBig) {
       // 触底
@@ -13231,6 +13225,9 @@ const Methods = {
       }
       ySpaceHeight = maxYHeight;
     }
+    if (!(scrollYLoad && overflowY)) {
+      scrollYTop = 0;
+    }
     if (leftBodyTableElem) {
       leftBodyTableElem.style.transform = `translate(0px, ${scrollYTop}px)`;
     }
@@ -13258,7 +13255,7 @@ const Methods = {
       rowExpandYSpaceEl.style.height = ySpaceHeight ? `${ySpaceHeight}px` : '';
     }
     reactData.scrollYTop = scrollYTop;
-    reactData.scrollYHeight = scrollYHeight;
+    reactData.scrollYHeight = ySpaceHeight;
     reactData.isScrollYBig = isScrollYBig;
     calcScrollbar($xeTable);
     if (isScrollYBig && mouseOpts.area) {