vxe-table 3.12.15 → 3.12.17

package/lib/table/src/methods.js

@@ -393,7 +393,8 @@ function updateAfterListIndex($xeTable) {
         level: 0,
         height: 0,
         resizeHeight: 0,
-        oTop: 0
+        oTop: 0,
+        expandHeight: 0
       };
       fullAllDataRowIdData[rowid] = rest;
       fullDataRowIdData[rowid] = rest;
@@ -445,7 +446,8 @@ function updateAfterDataIndex($xeTable) {
           level: 0,
           height: 0,
           resizeHeight: 0,
-          oTop: 0
+          oTop: 0,
+          expandHeight: 0
         };
         fullAllDataRowIdData[rowid] = rest;
         fullDataRowIdData[rowid] = rest;
@@ -551,6 +553,7 @@ function updateStyle($xeTable) {
   const emptyPlaceholderElem = $xeTable.$refs.refEmptyPlaceholder;
   const cellOffsetWidth = $xeTable.computeCellOffsetWidth;
   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) {
@@ -620,6 +623,11 @@ function updateStyle($xeTable) {
     yBottomCornerEl.style.top = `${headerHeight + bodyHeight}px`;
     yBottomCornerEl.style.display = footerHeight ? 'block' : '';
   }
+  const rowExpandEl = $xeTable.$refs.refRowExpandElem;
+  if (rowExpandEl) {
+    rowExpandEl.style.height = `${bodyHeight}px`;
+    rowExpandEl.style.top = `${headerHeight}px`;
+  }
   containerList.forEach((name, index) => {
     const fixedType = index > 0 ? name : '';
     const layoutList = ['header', 'body', 'footer'];
@@ -729,7 +737,7 @@ function updateStyle($xeTable) {
         let isOptimizeMode = false;
         // 如果是使用优化模式
         if (scrollXLoad || scrollYLoad || isAllOverflow) {
-          if (expandColumn || spanMethod || footerSpanMethod) {
+          if (expandColumn && expandOpts.mode !== 'fixed' || spanMethod || footerSpanMethod) {
             // 如果不支持优化模式
           } else {
             isOptimizeMode = true;
@@ -855,6 +863,15 @@ function updateStyle($xeTable) {
   }
   return $xeTable.$nextTick();
 }
+function calcVarRowHeightConfig($xeTable, sizeKey, sizeEl) {
+  const reactData = $xeTable;
+  const {
+    rowHeightStore
+  } = reactData;
+  if (sizeEl && sizeEl.clientHeight) {
+    rowHeightStore[sizeKey] = sizeEl.clientHeight;
+  }
+}
 function computeRowHeight($xeTable) {
   const reactData = $xeTable;
   const {
@@ -890,7 +907,9 @@ function handleVirtualYVisible($xeTable, currScrollTop) {
   const reactData = $xeTable;
   const internalData = $xeTable;
   const {
-    isAllOverflow
+    isAllOverflow,
+    expandColumn,
+    rowExpandedMaps
   } = reactData;
   const {
     elemStore,
@@ -898,6 +917,7 @@ function handleVirtualYVisible($xeTable, currScrollTop) {
     afterFullData,
     fullAllDataRowIdData
   } = internalData;
+  const expandOpts = $xeTable.computeExpandOpts;
   const rowOpts = $xeTable.computeRowOpts;
   const cellOpts = $xeTable.computeCellOpts;
   const defaultRowHeight = $xeTable.computeDefaultRowHeight;
@@ -910,7 +930,7 @@ function handleVirtualYVisible($xeTable, currScrollTop) {
     let offsetTop = 0;
     let visibleSize = 0;
     const isCustomCellHeight = isResizeCellHeight || cellOpts.height || rowOpts.height;
-    if (!isCustomCellHeight && isAllOverflow) {
+    if (!isCustomCellHeight && !expandColumn && isAllOverflow) {
       toVisibleIndex = Math.floor(scrollTop / defaultRowHeight);
       visibleSize = Math.ceil(clientHeight / defaultRowHeight) + 1;
     } else {
@@ -928,6 +948,10 @@ function handleVirtualYVisible($xeTable, currScrollTop) {
             break;
           }
         }
+        // 是否展开行
+        if (expandColumn && rowExpandedMaps[rowid]) {
+          offsetTop += rowRest.expandHeight || expandOpts.height || 0;
+        }
       }
     }
     return {
@@ -1627,9 +1651,18 @@ function handleRecalculateLayout($xeTable, reFull) {
   if (!el || !el.clientWidth) {
     return $xeTable.$nextTick();
   }
+  const varEl = $xeTable.$refs.refVarElem;
+  if (varEl) {
+    const [defEl, mediumEl, smallEl, miniEl] = varEl.children;
+    calcVarRowHeightConfig($xeTable, 'default', defEl);
+    calcVarRowHeightConfig($xeTable, 'medium', mediumEl);
+    calcVarRowHeightConfig($xeTable, 'small', smallEl);
+    calcVarRowHeightConfig($xeTable, 'mini', miniEl);
+  }
   calcCellWidth($xeTable);
   autoCellWidth($xeTable);
   updateStyle($xeTable);
+  updateRowExpandStyle($xeTable);
   return computeScrollLoad($xeTable).then(() => {
     if (reFull === true) {
       // 初始化时需要在列计算之后再执行优化运算，达到最优显示效果
@@ -1637,6 +1670,7 @@ function handleRecalculateLayout($xeTable, reFull) {
       calcCellWidth($xeTable);
       autoCellWidth($xeTable);
       updateStyle($xeTable);
+      updateRowExpandStyle($xeTable);
       return computeScrollLoad($xeTable);
     }
   });
@@ -2119,7 +2153,7 @@ function calcCellWidth($xeTable) {
     el.removeAttribute('data-calc-col');
   }
 }
-const handleUpdateColResize = ($xeTable, evnt, params) => {
+function handleUpdateColResize($xeTable, evnt, params) {
   $xeTable.analyColumnWidth();
   $xeTable.recalculate(true).then(() => {
     $xeTable.saveCustomStore('update:width');
@@ -2129,8 +2163,8 @@ const handleUpdateColResize = ($xeTable, evnt, params) => {
     $xeTable.dispatchEvent('resizable-change', params, evnt);
     setTimeout(() => $xeTable.recalculate(true), 300);
   });
-};
-const handleUpdateRowResize = ($xeTable, evnt, params) => {
+}
+function handleUpdateRowResize($xeTable, evnt, params) {
   const reactData = $xeTable;
   reactData.resizeHeightFlag++;
   $xeTable.recalculate(true).then(() => {
@@ -2138,7 +2172,74 @@ const handleUpdateRowResize = ($xeTable, evnt, params) => {
     $xeTable.dispatchEvent('row-resizable-change', params, evnt);
     setTimeout(() => $xeTable.recalculate(true), 300);
   });
-};
+}
+function updateRowExpandStyle($xeTable) {
+  const reactData = $xeTable;
+  const internalData = $xeTable;
+  const {
+    expandColumn,
+    scrollYLoad,
+    rowExpandedMaps
+  } = reactData;
+  const expandOpts = $xeTable.computeExpandOpts;
+  const rowOpts = $xeTable.computeRowOpts;
+  const cellOpts = $xeTable.computeCellOpts;
+  const defaultRowHeight = $xeTable.computeDefaultRowHeight;
+  const {
+    mode
+  } = expandOpts;
+  if (expandColumn && mode === 'fixed') {
+    const {
+      elemStore,
+      afterFullData,
+      fullAllDataRowIdData
+    } = internalData;
+    const rowExpandEl = $xeTable.$refs.refRowExpandElem;
+    const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
+    if (rowExpandEl && bodyScrollElem) {
+      let isUpdateHeight = false;
+      if (scrollYLoad) {
+        let offsetTop = 0;
+        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] || {};
+          rowRest.oTop = offsetTop;
+          offsetTop += rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight;
+          // 是否展开行
+          if (expandColumn && rowExpandedMaps[rowid]) {
+            offsetTop += rowRest.expandHeight || expandOpts.height || 0;
+          }
+        }
+      }
+      _xeUtils.default.arrayEach(rowExpandEl.children, reEl => {
+        const expandEl = reEl;
+        const rowid = expandEl.getAttribute('rowid') || '';
+        const rowRest = fullAllDataRowIdData[rowid];
+        if (rowRest) {
+          const expandHeight = expandEl.offsetHeight + 1;
+          if (scrollYLoad) {
+            expandEl.style.top = (0, _dom.toCssUnit)(rowRest.oTop + (rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight));
+          } else {
+            const trEl = bodyScrollElem.querySelector(`.vxe-body--row[rowid="${rowid}"]`);
+            if (trEl) {
+              expandEl.style.top = (0, _dom.toCssUnit)(trEl.offsetTop + trEl.offsetHeight);
+            }
+          }
+          if (!isUpdateHeight) {
+            if (rowRest.expandHeight !== expandHeight) {
+              isUpdateHeight = true;
+            }
+          }
+          rowRest.expandHeight = expandHeight;
+        }
+      });
+      if (isUpdateHeight) {
+        reactData.rowExpandHeightFlag++;
+      }
+    }
+  }
+}
 const Methods = {
   callSlot(slotFunc, params, h, vNodes) {
     if (slotFunc) {
@@ -2567,7 +2668,8 @@ const Methods = {
           level,
           height: 0,
           resizeHeight: 0,
-          oTop: 0
+          oTop: 0,
+          expandHeight: 0
         };
       }
       cacheItem.row = row;
@@ -2673,7 +2775,8 @@ const Methods = {
           level: parentLevel + nodes.length,
           height: 0,
           resizeHeight: 0,
-          oTop: 0
+          oTop: 0,
+          expandHeight: 0
         };
         fullDataRowIdData[rowid] = rest;
         fullAllDataRowIdData[rowid] = rest;
@@ -4778,6 +4881,7 @@ const Methods = {
       const el = $xeTable.$refs.refElem;
       if (el && el.clientWidth) {
         autoCellWidth($xeTable);
+        updateRowExpandStyle($xeTable);
       }
       if (rceTimeout) {
         clearTimeout(rceTimeout);
@@ -7989,6 +8093,19 @@ const Methods = {
     reactData.pendingRowMaps = pendingMaps;
     return $xeTable.$nextTick();
   },
+  hasPendingByRow(row) {
+    const $xeTable = this;
+    return $xeTable.isPendingByRow(row);
+  },
+  isPendingByRow(row) {
+    const $xeTable = this;
+    const reactData = $xeTable;
+    const {
+      pendingRowMaps
+    } = reactData;
+    const rowid = (0, _util.getRowid)($xeTable, row);
+    return !!pendingRowMaps[rowid];
+  },
   getPendingRecords() {
     const $xeTable = this;
     const reactData = $xeTable;
@@ -8007,13 +8124,6 @@ const Methods = {
     });
     return insertRecords;
   },
-  hasPendingByRow(row) {
-    const {
-      pendingRowMaps
-    } = this;
-    const rowid = (0, _util.getRowid)(this, row);
-    return !!pendingRowMaps[rowid];
-  },
   clearPendingRow() {
     this.pendingRowMaps = {};
     return this.$nextTick();
@@ -9151,6 +9261,7 @@ const Methods = {
       isRight,
       direction
     }, params);
+    updateRowExpandStyle($xeTable);
     checkLastSyncScroll($xeTable, isRollX, isRollY);
     if (rowOpts.isHover || highlightHoverRow) {
       $xeTable.clearHoverRow();
@@ -9192,7 +9303,12 @@ const Methods = {
   },
   triggerBodyScrollEvent(evnt, fixedType) {
     const $xeTable = this;
+    const reactData = $xeTable;
     const internalData = $xeTable;
+    const {
+      scrollYLoad,
+      scrollXLoad
+    } = reactData;
     const {
       elemStore,
       intoRunScroll,
@@ -9212,6 +9328,7 @@ const Methods = {
     const rightScrollElem = (0, _util.getRefElem)(elemStore['right-body-scroll']);
     const headerScrollElem = (0, _util.getRefElem)(elemStore['main-header-scroll']);
     const footerScrollElem = (0, _util.getRefElem)(elemStore['main-footer-scroll']);
+    const rowExpandEl = $xeTable.$refs.refRowExpandElem;
     if (inWheelScroll || inVirtualScroll || inHeaderScroll || inFooterScroll) {
       return;
     }
@@ -9258,13 +9375,18 @@ const Methods = {
         (0, _dom.setScrollTop)(rightScrollElem, scrollTop);
       }
       (0, _dom.setScrollTop)(yHandleEl, scrollTop);
-      $xeTable.triggerScrollYEvent(evnt);
+      (0, _dom.setScrollTop)(rowExpandEl, scrollTop);
+      if (scrollYLoad) {
+        $xeTable.triggerScrollYEvent(evnt);
+      }
     }
     if (isRollX) {
       (0, _dom.setScrollLeft)(xHandleEl, scrollLeft);
       (0, _dom.setScrollLeft)(headerScrollElem, scrollLeft);
       (0, _dom.setScrollLeft)(footerScrollElem, scrollLeft);
-      $xeTable.triggerScrollXEvent(evnt);
+      if (scrollXLoad) {
+        $xeTable.triggerScrollXEvent(evnt);
+      }
     }
     $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
       type: 'body',
@@ -9273,7 +9395,11 @@ const Methods = {
   },
   triggerHeaderScrollEvent(evnt, fixedType) {
     const $xeTable = this;
+    const reactData = $xeTable;
     const internalData = $xeTable;
+    const {
+      scrollXLoad
+    } = reactData;
     const {
       elemStore,
       intoRunScroll,
@@ -9310,7 +9436,9 @@ const Methods = {
     (0, _dom.setScrollLeft)(xHandleEl, scrollLeft);
     (0, _dom.setScrollLeft)(footerScrollElem, scrollLeft);
     (0, _dom.setScrollLeft)(bodyScrollElem, scrollLeft);
-    $xeTable.triggerScrollXEvent(evnt);
+    if (scrollXLoad) {
+      $xeTable.triggerScrollXEvent(evnt);
+    }
     $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
       type: 'header',
       fixed: fixedType
@@ -9318,7 +9446,11 @@ const Methods = {
   },
   triggerFooterScrollEvent(evnt, fixedType) {
     const $xeTable = this;
+    const reactData = $xeTable;
     const internalData = $xeTable;
+    const {
+      scrollXLoad
+    } = reactData;
     const {
       elemStore,
       intoRunScroll,
@@ -9355,7 +9487,9 @@ const Methods = {
     (0, _dom.setScrollLeft)(xHandleEl, scrollLeft);
     (0, _dom.setScrollLeft)(headerScrollElem, scrollLeft);
     (0, _dom.setScrollLeft)(bodyScrollElem, scrollLeft);
-    $xeTable.triggerScrollXEvent(evnt);
+    if (scrollXLoad) {
+      $xeTable.triggerScrollXEvent(evnt);
+    }
     $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
       type: 'footer',
       fixed: fixedType
@@ -9377,6 +9511,9 @@ const Methods = {
     const {
       highlightHoverRow
     } = tableProps;
+    const {
+      scrollYLoad
+    } = reactData;
     const {
       elemStore,
       lastScrollTop,
@@ -9388,6 +9525,7 @@ const Methods = {
     const leftScrollElem = (0, _util.getRefElem)(elemStore['left-body-scroll']);
     const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
     const rightScrollElem = (0, _util.getRefElem)(elemStore['right-body-scroll']);
+    const rowExpandEl = $xeTable.$refs.refRowExpandElem;
     if (!xHandleEl) {
       return;
     }
@@ -9423,27 +9561,24 @@ const Methods = {
         (0, _dom.setScrollTop)(bodyScrollElem, currTopNum);
         (0, _dom.setScrollTop)(leftScrollElem, currTopNum);
         (0, _dom.setScrollTop)(rightScrollElem, currTopNum);
-        $xeTable.triggerScrollYEvent(evnt);
+        (0, _dom.setScrollTop)(rowExpandEl, currTopNum);
+        if (scrollYLoad) {
+          $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($xeTable, scrollTop)
-      // $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
-      //   type: 'footer',
-      //   fixed: ''
-      // })
     }
   },
   triggerVirtualScrollXEvent(evnt) {
     const $xeTable = this;
+    const reactData = $xeTable;
     const internalData = $xeTable;
+    const {
+      scrollXLoad
+    } = reactData;
     const {
       elemStore,
       inWheelScroll,
@@ -9477,7 +9612,9 @@ const Methods = {
     (0, _dom.setScrollLeft)(bodyScrollElem, scrollLeft);
     (0, _dom.setScrollLeft)(headerScrollElem, scrollLeft);
     (0, _dom.setScrollLeft)(footerScrollElem, scrollLeft);
-    $xeTable.triggerScrollXEvent(evnt);
+    if (scrollXLoad) {
+      $xeTable.triggerScrollXEvent(evnt);
+    }
     $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
       type: 'table',
       fixed: ''
@@ -9485,7 +9622,11 @@ const Methods = {
   },
   triggerVirtualScrollYEvent(evnt) {
     const $xeTable = this;
+    const reactData = $xeTable;
     const internalData = $xeTable;
+    const {
+      scrollYLoad
+    } = reactData;
     const {
       elemStore,
       inWheelScroll,
@@ -9503,6 +9644,7 @@ const Methods = {
     const leftScrollElem = (0, _util.getRefElem)(elemStore['left-body-scroll']);
     const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
     const rightScrollElem = (0, _util.getRefElem)(elemStore['right-body-scroll']);
+    const rowExpandEl = $xeTable.$refs.refRowExpandElem;
     const xHandleEl = $xeTable.$refs.refScrollXHandleElem;
     const wrapperEl = evnt.currentTarget;
     const {
@@ -9519,7 +9661,10 @@ const Methods = {
     (0, _dom.setScrollTop)(bodyScrollElem, scrollTop);
     (0, _dom.setScrollTop)(leftScrollElem, scrollTop);
     (0, _dom.setScrollTop)(rightScrollElem, scrollTop);
-    $xeTable.triggerScrollYEvent(evnt);
+    (0, _dom.setScrollTop)(rowExpandEl, scrollTop);
+    if (scrollYLoad) {
+      $xeTable.triggerScrollYEvent(evnt);
+    }
     $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
       type: 'table',
       fixed: ''
@@ -9532,6 +9677,7 @@ const Methods = {
       isAllOverflow
     } = reactData;
     handleTableColumn($xeTable);
+    $xeTable.updateScrollXSpace();
     return $xeTable.$nextTick().then(() => {
       handleTableColumn($xeTable);
       $xeTable.updateScrollXSpace();
@@ -9599,6 +9745,7 @@ const Methods = {
   updateScrollYData() {
     const $xeTable = this;
     $xeTable.handleTableData();
+    $xeTable.updateScrollYSpace();
     return $xeTable.$nextTick().then(() => {
       $xeTable.handleTableData();
       $xeTable.updateScrollYSpace();
@@ -9611,7 +9758,9 @@ const Methods = {
     const internalData = $xeTable;
     const {
       isAllOverflow,
-      scrollYLoad
+      scrollYLoad,
+      expandColumn,
+      rowExpandedMaps
     } = reactData;
     const {
       scrollYStore,
@@ -9623,6 +9772,7 @@ const Methods = {
     const {
       startIndex
     } = scrollYStore;
+    const expandOpts = $xeTable.computeExpandOpts;
     const rowOpts = $xeTable.computeRowOpts;
     const cellOpts = $xeTable.computeCellOpts;
     const defaultRowHeight = $xeTable.computeDefaultRowHeight;
@@ -9632,7 +9782,7 @@ const Methods = {
     let ySpaceHeight = 0;
     if (scrollYLoad) {
       const isCustomCellHeight = isResizeCellHeight || cellOpts.height || rowOpts.height;
-      if (!isCustomCellHeight && isAllOverflow) {
+      if (!isCustomCellHeight && !expandColumn && isAllOverflow) {
         ySpaceHeight = afterFullData.length * defaultRowHeight;
         topSpaceHeight = Math.max(0, startIndex * defaultRowHeight);
       } else {
@@ -9641,12 +9791,20 @@ const Methods = {
           const rowid = (0, _util.getRowid)($xeTable, row);
           const rowRest = fullAllDataRowIdData[rowid] || {};
           ySpaceHeight += rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight;
+          // 是否展开行
+          if (expandColumn && rowExpandedMaps[rowid]) {
+            ySpaceHeight += rowRest.expandHeight || expandOpts.height || 0;
+          }
         }
         for (let i = 0; i < startIndex; i++) {
           const row = afterFullData[i];
           const rowid = (0, _util.getRowid)($xeTable, row);
           const rowRest = fullAllDataRowIdData[rowid] || {};
           topSpaceHeight += rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight;
+          // 是否展开行
+          if (expandColumn && rowExpandedMaps[rowid]) {
+            topSpaceHeight += rowRest.expandHeight || expandOpts.height || 0;
+          }
         }
       }
     } else {
@@ -9671,6 +9829,10 @@ const Methods = {
     if (scrollYSpaceEl) {
       scrollYSpaceEl.style.height = ySpaceHeight ? `${ySpaceHeight}px` : '';
     }
+    const rowExpandYSpaceEl = $xeTable.$refs.refRowExpandYSpaceElem;
+    if (rowExpandYSpaceEl) {
+      rowExpandYSpaceEl.style.height = ySpaceHeight ? `${ySpaceHeight}px` : '';
+    }
     return $xeTable.$nextTick().then(() => {
       updateStyle($xeTable);
     });