vxe-table 3.12.16 → 3.12.17

package/lib/index.umd.js

@@ -2220,7 +2220,7 @@ function getClass(property, params) {
 ;// CONCATENATED MODULE: ./packages/ui/index.ts
 
 
-const version = "3.12.16";
+const version = "3.12.17";
 core_.VxeUI.version = version;
 core_.VxeUI.tableVersion = version;
 core_.VxeUI.setConfig({
@@ -2842,7 +2842,7 @@ function isNodeElement(elem) {
 const {
   log: log_log
 } = core_.VxeUI;
-const log_version = `table v${"3.12.16"}`;
+const log_version = `table v${"3.12.17"}`;
 const warnLog = log_log.create('warn', log_version);
 const errLog = log_log.create('error', log_version);
 ;// CONCATENATED MODULE: ./packages/table/src/columnInfo.ts
@@ -5450,7 +5450,8 @@ function updateAfterListIndex($xeTable) {
         level: 0,
         height: 0,
         resizeHeight: 0,
-        oTop: 0
+        oTop: 0,
+        expandHeight: 0
       };
       fullAllDataRowIdData[rowid] = rest;
       fullDataRowIdData[rowid] = rest;
@@ -5502,7 +5503,8 @@ function updateAfterDataIndex($xeTable) {
           level: 0,
           height: 0,
           resizeHeight: 0,
-          oTop: 0
+          oTop: 0,
+          expandHeight: 0
         };
         fullAllDataRowIdData[rowid] = rest;
         fullDataRowIdData[rowid] = rest;
@@ -5608,6 +5610,7 @@ function updateStyle($xeTable) {
   const emptyPlaceholderElem = $xeTable.$refs.refEmptyPlaceholder;
   const cellOffsetWidth = $xeTable.computeCellOffsetWidth;
   const mouseOpts = $xeTable.computeMouseOpts;
+  const expandOpts = $xeTable.computeExpandOpts;
   const bodyWrapperElem = getRefElem(elemStore['main-body-wrapper']);
   const bodyTableElem = getRefElem(elemStore['main-body-table']);
   if (emptyPlaceholderElem) {
@@ -5677,6 +5680,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'];
@@ -5786,7 +5794,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;
@@ -5912,6 +5920,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 {
@@ -5947,7 +5964,9 @@ function handleVirtualYVisible($xeTable, currScrollTop) {
   const reactData = $xeTable;
   const internalData = $xeTable;
   const {
-    isAllOverflow
+    isAllOverflow,
+    expandColumn,
+    rowExpandedMaps
   } = reactData;
   const {
     elemStore,
@@ -5955,6 +5974,7 @@ function handleVirtualYVisible($xeTable, currScrollTop) {
     afterFullData,
     fullAllDataRowIdData
   } = internalData;
+  const expandOpts = $xeTable.computeExpandOpts;
   const rowOpts = $xeTable.computeRowOpts;
   const cellOpts = $xeTable.computeCellOpts;
   const defaultRowHeight = $xeTable.computeDefaultRowHeight;
@@ -5967,7 +5987,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 {
@@ -5985,6 +6005,10 @@ function handleVirtualYVisible($xeTable, currScrollTop) {
             break;
           }
         }
+        // 是否展开行
+        if (expandColumn && rowExpandedMaps[rowid]) {
+          offsetTop += rowRest.expandHeight || expandOpts.height || 0;
+        }
       }
     }
     return {
@@ -6684,9 +6708,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) {
       // 初始化时需要在列计算之后再执行优化运算，达到最优显示效果
@@ -6694,6 +6727,7 @@ function handleRecalculateLayout($xeTable, reFull) {
       calcCellWidth($xeTable);
       autoCellWidth($xeTable);
       updateStyle($xeTable);
+      updateRowExpandStyle($xeTable);
       return computeScrollLoad($xeTable);
     }
   });
@@ -7176,7 +7210,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');
@@ -7186,8 +7220,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(() => {
@@ -7195,7 +7229,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 = 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 = 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;
+          }
+        }
+      }
+      external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_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 = 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 = 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) {
@@ -7626,7 +7727,8 @@ const Methods = {
           level,
           height: 0,
           resizeHeight: 0,
-          oTop: 0
+          oTop: 0,
+          expandHeight: 0
         };
       }
       cacheItem.row = row;
@@ -7732,7 +7834,8 @@ const Methods = {
           level: parentLevel + nodes.length,
           height: 0,
           resizeHeight: 0,
-          oTop: 0
+          oTop: 0,
+          expandHeight: 0
         };
         fullDataRowIdData[rowid] = rest;
         fullAllDataRowIdData[rowid] = rest;
@@ -9841,6 +9944,7 @@ const Methods = {
       const el = $xeTable.$refs.refElem;
       if (el && el.clientWidth) {
         autoCellWidth($xeTable);
+        updateRowExpandStyle($xeTable);
       }
       if (rceTimeout) {
         clearTimeout(rceTimeout);
@@ -14236,6 +14340,7 @@ const Methods = {
       direction,
       ...params
     };
+    updateRowExpandStyle($xeTable);
     checkLastSyncScroll($xeTable, isRollX, isRollY);
     if (rowOpts.isHover || highlightHoverRow) {
       $xeTable.clearHoverRow();
@@ -14302,6 +14407,7 @@ const Methods = {
     const rightScrollElem = getRefElem(elemStore['right-body-scroll']);
     const headerScrollElem = getRefElem(elemStore['main-header-scroll']);
     const footerScrollElem = getRefElem(elemStore['main-footer-scroll']);
+    const rowExpandEl = $xeTable.$refs.refRowExpandElem;
     if (inWheelScroll || inVirtualScroll || inHeaderScroll || inFooterScroll) {
       return;
     }
@@ -14348,6 +14454,7 @@ const Methods = {
         setScrollTop(rightScrollElem, scrollTop);
       }
       setScrollTop(yHandleEl, scrollTop);
+      setScrollTop(rowExpandEl, scrollTop);
       if (scrollYLoad) {
         $xeTable.triggerScrollYEvent(evnt);
       }
@@ -14497,6 +14604,7 @@ const Methods = {
     const leftScrollElem = getRefElem(elemStore['left-body-scroll']);
     const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
     const rightScrollElem = getRefElem(elemStore['right-body-scroll']);
+    const rowExpandEl = $xeTable.$refs.refRowExpandElem;
     if (!xHandleEl) {
       return;
     }
@@ -14532,6 +14640,7 @@ const Methods = {
         setScrollTop(bodyScrollElem, currTopNum);
         setScrollTop(leftScrollElem, currTopNum);
         setScrollTop(rightScrollElem, currTopNum);
+        setScrollTop(rowExpandEl, currTopNum);
         if (scrollYLoad) {
           $xeTable.triggerScrollYEvent(evnt);
         }
@@ -14540,16 +14649,6 @@ const Methods = {
           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) {
@@ -14624,6 +14723,7 @@ const Methods = {
     const leftScrollElem = getRefElem(elemStore['left-body-scroll']);
     const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
     const rightScrollElem = getRefElem(elemStore['right-body-scroll']);
+    const rowExpandEl = $xeTable.$refs.refRowExpandElem;
     const xHandleEl = $xeTable.$refs.refScrollXHandleElem;
     const wrapperEl = evnt.currentTarget;
     const {
@@ -14640,6 +14740,7 @@ const Methods = {
     setScrollTop(bodyScrollElem, scrollTop);
     setScrollTop(leftScrollElem, scrollTop);
     setScrollTop(rightScrollElem, scrollTop);
+    setScrollTop(rowExpandEl, scrollTop);
     if (scrollYLoad) {
       $xeTable.triggerScrollYEvent(evnt);
     }
@@ -14655,6 +14756,7 @@ const Methods = {
       isAllOverflow
     } = reactData;
     handleTableColumn($xeTable);
+    $xeTable.updateScrollXSpace();
     return $xeTable.$nextTick().then(() => {
       handleTableColumn($xeTable);
       $xeTable.updateScrollXSpace();
@@ -14722,6 +14824,7 @@ const Methods = {
   updateScrollYData() {
     const $xeTable = this;
     $xeTable.handleTableData();
+    $xeTable.updateScrollYSpace();
     return $xeTable.$nextTick().then(() => {
       $xeTable.handleTableData();
       $xeTable.updateScrollYSpace();
@@ -14734,7 +14837,9 @@ const Methods = {
     const internalData = $xeTable;
     const {
       isAllOverflow,
-      scrollYLoad
+      scrollYLoad,
+      expandColumn,
+      rowExpandedMaps
     } = reactData;
     const {
       scrollYStore,
@@ -14746,6 +14851,7 @@ const Methods = {
     const {
       startIndex
     } = scrollYStore;
+    const expandOpts = $xeTable.computeExpandOpts;
     const rowOpts = $xeTable.computeRowOpts;
     const cellOpts = $xeTable.computeCellOpts;
     const defaultRowHeight = $xeTable.computeDefaultRowHeight;
@@ -14755,7 +14861,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 {
@@ -14764,12 +14870,20 @@ const Methods = {
           const rowid = 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 = 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 {
@@ -14794,6 +14908,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);
     });
@@ -15665,7 +15783,8 @@ function renderRows(h, _vm, fixedType, isOptimizeMode, tableData, tableColumn) {
     expandColumn,
     selectRadioRow,
     pendingRowMaps,
-    isDragColMove
+    isDragColMove,
+    rowExpandHeightFlag
   } = tableReactData;
   const {
     fullAllDataRowIdData
@@ -15707,18 +15826,18 @@ function renderRows(h, _vm, fixedType, isOptimizeMode, tableData, tableColumn) {
       };
     }
     const rowid = getRowid($xeTable, row);
-    const rest = fullAllDataRowIdData[rowid];
+    const rowRest = fullAllDataRowIdData[rowid];
     let rowLevel = 0;
     let seq = -1;
     let _rowIndex = 0;
-    if (rest) {
-      rowLevel = rest.level;
+    if (rowRest) {
+      rowLevel = rowRest.level;
       if (treeConfig && transform && seqMode === 'increasing') {
-        seq = rest._index + 1;
+        seq = rowRest._index + 1;
       } else {
-        seq = rest.seq;
+        seq = rowRest.seq;
       }
-      _rowIndex = rest._index;
+      _rowIndex = rowRest._index;
     }
     const params = {
       $table: $xeTable,
@@ -15791,54 +15910,69 @@ function renderRows(h, _vm, fixedType, isOptimizeMode, tableData, tableColumn) {
       const expandOpts = $xeTable.computeExpandOpts;
       const {
         height: expandHeight,
-        padding
+        padding,
+        mode: expandMode
       } = expandOpts;
-      const cellStyle = {};
-      if (expandHeight) {
-        cellStyle.height = `${expandHeight}px`;
-      }
-      if (treeConfig) {
-        cellStyle.paddingLeft = `${rowLevel * treeOpts.indent + 30}px`;
-      }
-      const {
-        showOverflow
-      } = expandColumn;
-      const hasEllipsis = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isUndefined(showOverflow) || external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isNull(showOverflow) ? isAllOverflow : showOverflow;
-      const expandParams = {
-        $table: $xeTable,
-        seq,
-        column: expandColumn,
-        fixed: fixedType,
-        type: renderType,
-        level: rowLevel,
-        row,
-        rowIndex,
-        $rowIndex,
-        _rowIndex
-      };
-      rows.push(h('tr', {
-        class: ['vxe-body--expanded-row', {
-          'is--padding': padding
-        }],
-        key: `expand_${rowid}`,
-        style: rowStyle ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(rowStyle) ? rowStyle(expandParams) : rowStyle : undefined,
-        on: trOn
-      }, [h('td', {
-        class: {
-          'vxe-body--expanded-column': 1,
-          'fixed--hidden': fixedType && !hasFixedColumn,
-          'col--ellipsis': hasEllipsis
-        },
-        attrs: {
-          colspan: tableColumn.length
+      if (expandMode === 'fixed') {
+        rows.push(h('tr', {
+          class: 'vxe-body--row-expanded-place',
+          key: `expand_${rowid}`,
+          attrs: {
+            rowid
+          }
+        }, [h('td', {
+          class: 'vxe-body--row-expanded-place-column',
+          attrs: {
+            colspan: tableColumn.length
+          },
+          style: {
+            height: `${rowExpandHeightFlag ? rowRest.expandHeight || expandHeight : 0}px`
+          }
+        })]));
+      } else {
+        const cellStyle = {};
+        if (expandHeight) {
+          cellStyle.height = `${expandHeight}px`;
         }
-      }, [h('div', {
-        class: {
-          'vxe-body--expanded-cell': 1,
-          'is--ellipsis': expandHeight
-        },
-        style: cellStyle
-      }, [expandColumn.renderData(h, expandParams)])])]));
+        if (treeConfig) {
+          cellStyle.paddingLeft = `${rowLevel * treeOpts.indent + 30}px`;
+        }
+        const {
+          showOverflow
+        } = expandColumn;
+        const hasEllipsis = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isUndefined(showOverflow) || external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isNull(showOverflow) ? isAllOverflow : showOverflow;
+        const expandParams = {
+          $table: $xeTable,
+          seq,
+          column: expandColumn,
+          fixed: fixedType,
+          type: renderType,
+          level: rowLevel,
+          row,
+          rowIndex,
+          $rowIndex,
+          _rowIndex
+        };
+        rows.push(h('tr', {
+          class: ['vxe-body--expanded-row', {
+            'is--padding': padding
+          }],
+          key: `expand_${rowid}`
+        }, [h('td', {
+          class: ['vxe-body--expanded-column', {
+            'fixed--hidden': fixedType && !hasFixedColumn,
+            'col--ellipsis': hasEllipsis
+          }],
+          attrs: {
+            colspan: tableColumn.length
+          }
+        }, [h('div', {
+          class: ['vxe-body--expanded-cell', {
+            'is--ellipsis': expandHeight
+          }],
+          style: cellStyle
+        }, [expandColumn.renderData(h, expandParams)])])]));
+      }
     }
     // 如果是树形表格
     if (isExpandTree) {
@@ -15941,14 +16075,13 @@ function renderRows(h, _vm, fixedType, isOptimizeMode, tableData, tableColumn) {
     const emptyOpts = $xeTable.computeEmptyOpts;
     const mouseOpts = $xeTable.computeMouseOpts;
     const rowDragOpts = $xeTable.computeRowDragOpts;
-    const leftFixedWidth = $xeTable.computeLeftFixedWidth;
-    const rightFixedWidth = $xeTable.computeRightFixedWidth;
+    const expandOpts = $xeTable.computeExpandOpts;
     let renderDataList = tableData;
     let renderColumnList = tableColumn;
     let isOptimizeMode = false;
     // 如果是使用优化模式
     if (scrollXLoad || scrollYLoad || isAllOverflow) {
-      if (expandColumn || spanMethod || footerSpanMethod) {
+      if (expandColumn && expandOpts.mode !== 'fixed' || spanMethod || footerSpanMethod) {
         // 如果不支持优化模式
       } else {
         isOptimizeMode = true;
@@ -16028,9 +16161,6 @@ function renderRows(h, _vm, fixedType, isOptimizeMode, tableData, tableColumn) {
         $xeTable.triggerBodyScrollEvent(evnt, fixedType);
       }
     };
-    if (scrollYLoad || leftFixedWidth || rightFixedWidth) {
-      ons.wheel = $xeTable.triggerBodyWheelEvent;
-    }
     return h('div', {
       ref: 'refElem',
       class: ['vxe-table--body-wrapper', fixedType ? `fixed-${fixedType}--wrapper` : 'body--wrapper'],
@@ -20409,7 +20539,8 @@ function insertTreeRow(_vm, newRecords, isAppend) {
         level: parentLevel + 1,
         height: 0,
         resizeHeight: 0,
-        oTop: 0
+        oTop: 0,
+        expandHeight: 0
       };
       fullDataRowIdData[rowid] = rest;
       fullAllDataRowIdData[rowid] = rest;
@@ -20434,7 +20565,8 @@ function insertTreeRow(_vm, newRecords, isAppend) {
         level: 0,
         height: 0,
         resizeHeight: 0,
-        oTop: 0
+        oTop: 0,
+        expandHeight: 0
       };
       fullDataRowIdData[rowid] = rest;
       fullAllDataRowIdData[rowid] = rest;
@@ -20493,7 +20625,8 @@ function handleInsertRowAt($xeTable, records, targetRow, isInsertNextRow) {
           level: 0,
           height: 0,
           resizeHeight: 0,
-          oTop: 0
+          oTop: 0,
+          expandHeight: 0
         };
         fullDataRowIdData[rowid] = rest;
         fullAllDataRowIdData[rowid] = rest;
@@ -20531,7 +20664,8 @@ function handleInsertRowAt($xeTable, records, targetRow, isInsertNextRow) {
             level: 0,
             height: 0,
             resizeHeight: 0,
-            oTop: 0
+            oTop: 0,
+            expandHeight: 0
           };
           fullDataRowIdData[rowid] = rest;
           fullAllDataRowIdData[rowid] = rest;
@@ -20592,7 +20726,8 @@ function handleInsertRowAt($xeTable, records, targetRow, isInsertNextRow) {
               level: parentLevel + 1,
               height: 0,
               resizeHeight: 0,
-              oTop: 0
+              oTop: 0,
+              expandHeight: 0
             };
             fullDataRowIdData[rowid] = rest;
             fullAllDataRowIdData[rowid] = rest;
@@ -24857,6 +24992,7 @@ function validErrorRuleValue(rule, val) {
 
 
 
+
 
 
 const {
@@ -25025,6 +25161,96 @@ function handleUpdateResize(_vm) {
     _vm.recalculate();
   }
 }
+function renderRowExpandedVNs(h, $xeTable) {
+  const props = $xeTable;
+  const reactData = $xeTable;
+  const internalData = $xeTable;
+  const {
+    treeConfig
+  } = props;
+  const {
+    expandColumn
+  } = reactData;
+  const tableRowExpandedList = $xeTable.computeTableRowExpandedList;
+  const expandOpts = $xeTable.computeExpandOpts;
+  const {
+    mode
+  } = expandOpts;
+  if (mode !== 'fixed') {
+    return table_renderEmptyElement($xeTable);
+  }
+  const expandVNs = [h('div', {
+    key: 'repY',
+    ref: 'refRowExpandYSpaceElem'
+  })];
+  if (expandColumn) {
+    tableRowExpandedList.forEach(row => {
+      const expandOpts = $xeTable.computeExpandOpts;
+      const {
+        height: expandHeight,
+        padding
+      } = expandOpts;
+      const {
+        fullAllDataRowIdData
+      } = internalData;
+      const treeOpts = $xeTable.computeTreeOpts;
+      const {
+        transform,
+        seqMode
+      } = treeOpts;
+      const cellStyle = {};
+      const rowid = getRowid($xeTable, row);
+      const rest = fullAllDataRowIdData[rowid];
+      let rowLevel = 0;
+      let seq = -1;
+      let _rowIndex = 0;
+      const rowIndex = $xeTable.getRowIndex(row);
+      const $rowIndex = $xeTable.getVMRowIndex(row);
+      if (rest) {
+        rowLevel = rest.level;
+        if (treeConfig && transform && seqMode === 'increasing') {
+          seq = rest._index + 1;
+        } else {
+          seq = rest.seq;
+        }
+        _rowIndex = rest._index;
+      }
+      if (expandHeight) {
+        cellStyle.height = `${expandHeight}px`;
+      }
+      if (treeConfig) {
+        cellStyle.paddingLeft = `${rowLevel * treeOpts.indent + 30}px`;
+      }
+      const expandParams = {
+        $table: $xeTable,
+        seq,
+        column: expandColumn,
+        fixed: '',
+        type: 'body',
+        level: rowLevel,
+        row,
+        rowIndex,
+        $rowIndex,
+        _rowIndex
+      };
+      expandVNs.push(h('div', {
+        key: rowid,
+        class: ['vxe-body--row-expanded-cell', {
+          'is--padding': padding,
+          'is--ellipsis': expandHeight
+        }],
+        attrs: {
+          rowid
+        },
+        style: cellStyle
+      }, expandColumn.renderData(h, expandParams)));
+    });
+  }
+  return h('div', {
+    ref: 'refRowExpandElem',
+    class: 'vxe-table--row-expanded-wrapper'
+  }, expandVNs);
+}
 function renderScrollX(h, $xeTable) {
   return h('div', {
     key: 'vsx',
@@ -25083,6 +25309,7 @@ function renderViewport(h, $xeTable) {
   } = props;
   const {
     overflowX,
+    scrollYLoad,
     tableData,
     tableColumn,
     tableGroupColumn,
@@ -25093,9 +25320,16 @@ function renderViewport(h, $xeTable) {
     leftList,
     rightList
   } = columnStore;
+  const leftFixedWidth = $xeTable.computeLeftFixedWidth;
+  const rightFixedWidth = $xeTable.computeRightFixedWidth;
+  const ons = {};
+  if (scrollYLoad || leftFixedWidth || rightFixedWidth) {
+    ons.onWheel = $xeTable.triggerBodyWheelEvent;
+  }
   return h('div', {
     ref: 'refTableViewportElem',
-    class: 'vxe-table--viewport-wrapper'
+    class: 'vxe-table--viewport-wrapper',
+    on: ons
   }, [h('div', {
     class: 'vxe-table--main-wrapper'
   }, [
@@ -25131,7 +25365,7 @@ function renderViewport(h, $xeTable) {
     }
   }) : table_renderEmptyElement($xeTable)]), h('div', {
     class: 'vxe-table--fixed-wrapper'
-  }, [leftList && leftList.length && overflowX ? renderFixed(h, $xeTable, 'left') : table_renderEmptyElement($xeTable), rightList && rightList.length && overflowX ? renderFixed(h, $xeTable, 'right') : table_renderEmptyElement($xeTable)])]);
+  }, [leftList && leftList.length && overflowX ? renderFixed(h, $xeTable, 'left') : table_renderEmptyElement($xeTable), rightList && rightList.length && overflowX ? renderFixed(h, $xeTable, 'right') : table_renderEmptyElement($xeTable)]), renderRowExpandedVNs(h, $xeTable)]);
 }
 function renderBody(h, $xeTable) {
   const scrollbarYToLeft = $xeTable.computeScrollbarYToLeft;
@@ -25381,8 +25615,9 @@ function renderBody(h, $xeTable) {
         mini: 36
       },
       scrollVMLoading: false,
-      calcCellHeightFlag: 0,
-      resizeHeightFlag: 0,
+      rowExpandHeightFlag: 1,
+      calcCellHeightFlag: 1,
+      resizeHeightFlag: 1,
       isCustomStatus: false,
       isDragRowMove: false,
       dragRow: null,
@@ -25787,6 +26022,28 @@ function renderBody(h, $xeTable) {
     computeCustomOpts() {
       return Object.assign({}, table_getConfig().table.customConfig, this.customConfig);
     },
+    computeTableRowExpandedList() {
+      const $xeTable = this;
+      const reactData = $xeTable;
+      const {
+        rowExpandedMaps,
+        tableData,
+        expandColumn
+      } = reactData;
+      const expandList = [];
+      if (expandColumn) {
+        const rowKeys = {};
+        tableData.forEach(row => {
+          rowKeys[getRowid($xeTable, row)] = true;
+        });
+        external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().each(rowExpandedMaps, (row, rowid) => {
+          if (rowKeys[rowid]) {
+            expandList.push(row);
+          }
+        });
+      }
+      return expandList;
+    },
     computeAutoWidthColumnList() {
       const {
         tableColumn,
@@ -26264,29 +26521,9 @@ function renderBody(h, $xeTable) {
   mounted() {
     const $xeTable = this;
     const props = $xeTable;
-    const reactData = $xeTable;
-    const {
-      rowHeightStore
-    } = reactData;
-    const varEl = $xeTable.$refs.refVarElem;
     const columnOpts = $xeTable.computeColumnOpts;
     const rowOpts = $xeTable.computeRowOpts;
     const customOpts = $xeTable.computeCustomOpts;
-    if (varEl) {
-      const [defEl, mediumEl, smallEl, miniEl] = varEl.children;
-      if (defEl) {
-        rowHeightStore.default = defEl.clientHeight;
-      }
-      if (mediumEl) {
-        rowHeightStore.medium = mediumEl.clientHeight;
-      }
-      if (smallEl) {
-        rowHeightStore.small = smallEl.clientHeight;
-      }
-      if (miniEl) {
-        rowHeightStore.mini = miniEl.clientHeight;
-      }
-    }
     if (columnOpts.drag || rowOpts.drag || customOpts.allowSort) {
       initTpImg();
     }