vxe-table 3.12.15 → 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.15";
+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.15"}`;
+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);
@@ -13053,6 +13157,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 = getRowid($xeTable, row);
+    return !!pendingRowMaps[rowid];
+  },
   getPendingRecords() {
     const $xeTable = this;
     const reactData = $xeTable;
@@ -13071,13 +13188,6 @@ const Methods = {
     });
     return insertRecords;
   },
-  hasPendingByRow(row) {
-    const {
-      pendingRowMaps
-    } = this;
-    const rowid = getRowid(this, row);
-    return !!pendingRowMaps[rowid];
-  },
   clearPendingRow() {
     this.pendingRowMaps = {};
     return this.$nextTick();
@@ -14230,6 +14340,7 @@ const Methods = {
       direction,
       ...params
     };
+    updateRowExpandStyle($xeTable);
     checkLastSyncScroll($xeTable, isRollX, isRollY);
     if (rowOpts.isHover || highlightHoverRow) {
       $xeTable.clearHoverRow();
@@ -14271,7 +14382,12 @@ const Methods = {
   },
   triggerBodyScrollEvent(evnt, fixedType) {
     const $xeTable = this;
+    const reactData = $xeTable;
     const internalData = $xeTable;
+    const {
+      scrollYLoad,
+      scrollXLoad
+    } = reactData;
     const {
       elemStore,
       intoRunScroll,
@@ -14291,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;
     }
@@ -14337,13 +14454,18 @@ const Methods = {
         setScrollTop(rightScrollElem, scrollTop);
       }
       setScrollTop(yHandleEl, scrollTop);
-      $xeTable.triggerScrollYEvent(evnt);
+      setScrollTop(rowExpandEl, scrollTop);
+      if (scrollYLoad) {
+        $xeTable.triggerScrollYEvent(evnt);
+      }
     }
     if (isRollX) {
       setScrollLeft(xHandleEl, scrollLeft);
       setScrollLeft(headerScrollElem, scrollLeft);
       setScrollLeft(footerScrollElem, scrollLeft);
-      $xeTable.triggerScrollXEvent(evnt);
+      if (scrollXLoad) {
+        $xeTable.triggerScrollXEvent(evnt);
+      }
     }
     $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
       type: 'body',
@@ -14352,7 +14474,11 @@ const Methods = {
   },
   triggerHeaderScrollEvent(evnt, fixedType) {
     const $xeTable = this;
+    const reactData = $xeTable;
     const internalData = $xeTable;
+    const {
+      scrollXLoad
+    } = reactData;
     const {
       elemStore,
       intoRunScroll,
@@ -14389,7 +14515,9 @@ const Methods = {
     setScrollLeft(xHandleEl, scrollLeft);
     setScrollLeft(footerScrollElem, scrollLeft);
     setScrollLeft(bodyScrollElem, scrollLeft);
-    $xeTable.triggerScrollXEvent(evnt);
+    if (scrollXLoad) {
+      $xeTable.triggerScrollXEvent(evnt);
+    }
     $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
       type: 'header',
       fixed: fixedType
@@ -14397,7 +14525,11 @@ const Methods = {
   },
   triggerFooterScrollEvent(evnt, fixedType) {
     const $xeTable = this;
+    const reactData = $xeTable;
     const internalData = $xeTable;
+    const {
+      scrollXLoad
+    } = reactData;
     const {
       elemStore,
       intoRunScroll,
@@ -14434,7 +14566,9 @@ const Methods = {
     setScrollLeft(xHandleEl, scrollLeft);
     setScrollLeft(headerScrollElem, scrollLeft);
     setScrollLeft(bodyScrollElem, scrollLeft);
-    $xeTable.triggerScrollXEvent(evnt);
+    if (scrollXLoad) {
+      $xeTable.triggerScrollXEvent(evnt);
+    }
     $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
       type: 'footer',
       fixed: fixedType
@@ -14456,6 +14590,9 @@ const Methods = {
     const {
       highlightHoverRow
     } = tableProps;
+    const {
+      scrollYLoad
+    } = reactData;
     const {
       elemStore,
       lastScrollTop,
@@ -14467,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;
     }
@@ -14502,27 +14640,24 @@ const Methods = {
         setScrollTop(bodyScrollElem, currTopNum);
         setScrollTop(leftScrollElem, currTopNum);
         setScrollTop(rightScrollElem, currTopNum);
-        $xeTable.triggerScrollYEvent(evnt);
+        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,
@@ -14556,7 +14691,9 @@ const Methods = {
     setScrollLeft(bodyScrollElem, scrollLeft);
     setScrollLeft(headerScrollElem, scrollLeft);
     setScrollLeft(footerScrollElem, scrollLeft);
-    $xeTable.triggerScrollXEvent(evnt);
+    if (scrollXLoad) {
+      $xeTable.triggerScrollXEvent(evnt);
+    }
     $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
       type: 'table',
       fixed: ''
@@ -14564,7 +14701,11 @@ const Methods = {
   },
   triggerVirtualScrollYEvent(evnt) {
     const $xeTable = this;
+    const reactData = $xeTable;
     const internalData = $xeTable;
+    const {
+      scrollYLoad
+    } = reactData;
     const {
       elemStore,
       inWheelScroll,
@@ -14582,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 {
@@ -14598,7 +14740,10 @@ const Methods = {
     setScrollTop(bodyScrollElem, scrollTop);
     setScrollTop(leftScrollElem, scrollTop);
     setScrollTop(rightScrollElem, scrollTop);
-    $xeTable.triggerScrollYEvent(evnt);
+    setScrollTop(rowExpandEl, scrollTop);
+    if (scrollYLoad) {
+      $xeTable.triggerScrollYEvent(evnt);
+    }
     $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
       type: 'table',
       fixed: ''
@@ -14611,6 +14756,7 @@ const Methods = {
       isAllOverflow
     } = reactData;
     handleTableColumn($xeTable);
+    $xeTable.updateScrollXSpace();
     return $xeTable.$nextTick().then(() => {
       handleTableColumn($xeTable);
       $xeTable.updateScrollXSpace();
@@ -14678,6 +14824,7 @@ const Methods = {
   updateScrollYData() {
     const $xeTable = this;
     $xeTable.handleTableData();
+    $xeTable.updateScrollYSpace();
     return $xeTable.$nextTick().then(() => {
       $xeTable.handleTableData();
       $xeTable.updateScrollYSpace();
@@ -14690,7 +14837,9 @@ const Methods = {
     const internalData = $xeTable;
     const {
       isAllOverflow,
-      scrollYLoad
+      scrollYLoad,
+      expandColumn,
+      rowExpandedMaps
     } = reactData;
     const {
       scrollYStore,
@@ -14702,6 +14851,7 @@ const Methods = {
     const {
       startIndex
     } = scrollYStore;
+    const expandOpts = $xeTable.computeExpandOpts;
     const rowOpts = $xeTable.computeRowOpts;
     const cellOpts = $xeTable.computeCellOpts;
     const defaultRowHeight = $xeTable.computeDefaultRowHeight;
@@ -14711,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 {
@@ -14720,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 {
@@ -14750,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);
     });
@@ -15621,7 +15783,8 @@ function renderRows(h, _vm, fixedType, isOptimizeMode, tableData, tableColumn) {
     expandColumn,
     selectRadioRow,
     pendingRowMaps,
-    isDragColMove
+    isDragColMove,
+    rowExpandHeightFlag
   } = tableReactData;
   const {
     fullAllDataRowIdData
@@ -15663,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,
@@ -15747,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) {
@@ -15897,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;
@@ -15984,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'],
@@ -20263,6 +20437,27 @@ const {
   renderer: edit_mixin_renderer,
   getI18n: mixin_getI18n
 } = core_.VxeUI;
+function getEditColumnModel(row, column) {
+  const {
+    model,
+    editRender
+  } = column;
+  if (editRender) {
+    model.value = getCellValue(row, column);
+    model.update = false;
+  }
+}
+function setEditColumnModel(row, column) {
+  const {
+    model,
+    editRender
+  } = column;
+  if (editRender && model.update) {
+    setCellValue(row, column, model.value);
+    model.update = false;
+    model.value = null;
+  }
+}
 function removeCellSelectedClass($xeTable) {
   const el = $xeTable.$refs.refElem;
   if (el) {
@@ -20272,6 +20467,28 @@ function removeCellSelectedClass($xeTable) {
     }
   }
 }
+function syncActivedCell($xeTable) {
+  const reactData = $xeTable;
+  const {
+    editStore,
+    tableColumn
+  } = reactData;
+  const editOpts = $xeTable.computeEditOpts;
+  const {
+    actived
+  } = editStore;
+  const {
+    row,
+    column
+  } = actived;
+  if (row || column) {
+    if (editOpts.mode === 'row') {
+      tableColumn.forEach(column => setEditColumnModel(row, column));
+    } else {
+      setEditColumnModel(row, column);
+    }
+  }
+}
 function insertTreeRow(_vm, newRecords, isAppend) {
   const {
     tableFullTreeData,
@@ -20322,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;
@@ -20347,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;
@@ -20406,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;
@@ -20444,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;
@@ -20505,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;
@@ -20626,58 +20848,268 @@ function handleInsertChildRowAt($xeTable, records, parentRow, targetRow, isInser
     rows: []
   });
 }
-/* harmony default export */ var edit_mixin = ({
-  methods: {
-    /**
-     * 往表格中插入临时数据
-     *
-     * @param {*} records
-     */
-    _insert(records) {
-      return handleInsertRowAt(this, records, null);
-    },
-    /**
-     * 往表格指定行中插入临时数据
-     * 如果 row 为空则从插入到顶部
-     * 如果 row 为 -1 则从插入到底部
-     * 如果 row 为有效行则插入到该行的位置
-     * @param {Object/Array} records 新的数据
-     * @param {Row} targetRow 指定行
-     * @returns
-     */
-    _insertAt(records, targetRow) {
-      return handleInsertRowAt(this, records, targetRow);
-    },
-    _insertNextAt(records, targetRow) {
-      return handleInsertRowAt(this, records, targetRow, true);
-    },
-    _insertChild(records, parentRow) {
-      return handleInsertChildRowAt(this, records, parentRow, null);
-    },
-    _insertChildAt(records, parentRow, targetRow) {
-      return handleInsertChildRowAt(this, records, parentRow, targetRow);
-    },
-    _insertChildNextAt(records, parentRow, targetRow) {
-      return handleInsertChildRowAt(this, records, parentRow, targetRow, true);
-    },
-    /**
-     * 删除指定行数据
-     * 如果传 row 则删除一行
-     * 如果传 rows 则删除多行
-     * 如果为空则删除所有
-     */
-    _remove(rows) {
-      const $xeTable = this;
-      const props = $xeTable;
-      const reactData = $xeTable;
-      const internalData = $xeTable;
-      const {
-        treeConfig
-      } = props;
-      const {
-        mergeList,
-        editStore,
-        selectCheckboxMaps
+function handleClearEdit($xeTable, evnt, targetRow) {
+  const props = $xeTable;
+  const reactData = $xeTable;
+  const {
+    mouseConfig
+  } = props;
+  const {
+    editStore
+  } = reactData;
+  const {
+    actived,
+    focused
+  } = editStore;
+  const {
+    row,
+    column
+  } = actived;
+  const validOpts = $xeTable.computeValidOpts;
+  const mouseOpts = $xeTable.computeMouseOpts;
+  if (row || column) {
+    if (targetRow && getRowid($xeTable, targetRow) !== getRowid($xeTable, row)) {
+      return $xeTable.$nextTick();
+    }
+    syncActivedCell($xeTable);
+    actived.args = null;
+    actived.row = null;
+    actived.column = null;
+    $xeTable.updateFooter();
+    $xeTable.dispatchEvent('edit-closed', {
+      row,
+      rowIndex: $xeTable.getRowIndex(row),
+      $rowIndex: $xeTable.getVMRowIndex(row),
+      column,
+      columnIndex: $xeTable.getColumnIndex(column),
+      $columnIndex: $xeTable.getVMColumnIndex(column)
+    }, evnt || null);
+  }
+  focused.row = null;
+  focused.column = null;
+  if (validOpts.autoClear) {
+    if (validOpts.msgMode !== 'full' || mixin_getConfig().cellVaildMode === 'obsolete') {
+      if ($xeTable.clearValidate) {
+        return $xeTable.clearValidate();
+      }
+    }
+  }
+  return $xeTable.$nextTick().then(() => {
+    if (mouseConfig && mouseOpts.area && $xeTable.handleRecalculateCellAreas) {
+      return $xeTable.handleRecalculateCellAreas();
+    }
+  });
+}
+function handleEditActive($xeTable, params, evnt, isFocus) {
+  const props = $xeTable;
+  const reactData = $xeTable;
+  const {
+    editConfig,
+    mouseConfig
+  } = props;
+  const {
+    editStore,
+    tableColumn
+  } = reactData;
+  const editOpts = $xeTable.computeEditOpts;
+  const {
+    mode
+  } = editOpts;
+  const {
+    actived,
+    focused
+  } = editStore;
+  const {
+    row,
+    column
+  } = params;
+  const {
+    editRender
+  } = column;
+  const cell = params.cell || $xeTable.getCellElement(row, column);
+  const beforeEditMethod = editOpts.beforeEditMethod || editOpts.activeMethod;
+  params.cell = cell;
+  if (cell && isEnableConf(editConfig) && isEnableConf(editRender)) {
+    // 激活编辑
+    if (!$xeTable.isPendingByRow(row)) {
+      if (actived.row !== row || (mode === 'cell' ? actived.column !== column : false)) {
+        // 判断是否禁用编辑
+        let type = 'edit-disabled';
+        if (!beforeEditMethod || beforeEditMethod({
+          ...params,
+          $table: $xeTable,
+          $grid: $xeTable.xegrid
+        })) {
+          if (mouseConfig) {
+            $xeTable.clearSelected();
+            if ($xeTable.clearCellAreas) {
+              $xeTable.clearCellAreas();
+              $xeTable.clearCopyCellArea();
+            }
+          }
+          $xeTable.closeTooltip();
+          if (actived.column) {
+            handleClearEdit($xeTable, evnt);
+          }
+          type = 'edit-activated';
+          column.renderHeight = cell.offsetHeight;
+          actived.args = params;
+          actived.row = row;
+          actived.column = column;
+          if (mode === 'row') {
+            tableColumn.forEach(column => getEditColumnModel(row, column));
+          } else {
+            getEditColumnModel(row, column);
+          }
+          const afterEditMethod = editOpts.afterEditMethod;
+          $xeTable.$nextTick(() => {
+            if (isFocus) {
+              $xeTable.handleFocus(params, evnt);
+            }
+            if (afterEditMethod) {
+              afterEditMethod({
+                ...params,
+                $table: $xeTable,
+                $grid: $xeTable.xegrid
+              });
+            }
+          });
+        }
+        $xeTable.dispatchEvent(type, {
+          row,
+          rowIndex: $xeTable.getRowIndex(row),
+          $rowIndex: $xeTable.getVMRowIndex(row),
+          column,
+          columnIndex: $xeTable.getColumnIndex(column),
+          $columnIndex: $xeTable.getVMColumnIndex(column)
+        }, evnt);
+        // v4已废弃
+        if (type === 'edit-activated') {
+          $xeTable.dispatchEvent('edit-actived', {
+            row,
+            rowIndex: $xeTable.getRowIndex(row),
+            $rowIndex: $xeTable.getVMRowIndex(row),
+            column,
+            columnIndex: $xeTable.getColumnIndex(column),
+            $columnIndex: $xeTable.getVMColumnIndex(column)
+          }, evnt);
+        }
+      } else {
+        const {
+          column: oldColumn
+        } = actived;
+        if (mouseConfig) {
+          $xeTable.clearSelected();
+          if ($xeTable.clearCellAreas) {
+            $xeTable.clearCellAreas();
+            $xeTable.clearCopyCellArea();
+          }
+        }
+        if (oldColumn !== column) {
+          const {
+            model: oldModel
+          } = oldColumn;
+          if (oldModel.update) {
+            setCellValue(row, oldColumn, oldModel.value);
+          }
+          if ($xeTable.clearValidate) {
+            $xeTable.clearValidate(row, column);
+          }
+        }
+        column.renderHeight = cell.offsetHeight;
+        actived.args = params;
+        actived.column = column;
+        if (isFocus) {
+          setTimeout(() => {
+            $xeTable.handleFocus(params, evnt);
+          });
+        }
+      }
+      focused.column = null;
+      focused.row = null;
+      $xeTable.focus();
+    }
+  }
+  return $xeTable.$nextTick();
+}
+function handleEditCell($xeTable, row, fieldOrColumn, isPos) {
+  const props = $xeTable;
+  const internalData = $xeTable;
+  const {
+    editConfig
+  } = props;
+  const column = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isString(fieldOrColumn) ? $xeTable.getColumnByField(fieldOrColumn) : fieldOrColumn;
+  if (row && column && isEnableConf(editConfig) && isEnableConf(column.editRender)) {
+    return Promise.resolve(isPos ? $xeTable.scrollToRow(row, column) : null).then(() => {
+      const cell = $xeTable.getCellElement(row, column);
+      if (cell) {
+        handleEditActive($xeTable, {
+          row,
+          rowIndex: $xeTable.getRowIndex(row),
+          column,
+          columnIndex: $xeTable.getColumnIndex(column),
+          cell,
+          $table: $xeTable
+        }, null, false);
+        internalData._lastCallTime = Date.now();
+      }
+      return $xeTable.$nextTick();
+    });
+  }
+  return $xeTable.$nextTick();
+}
+/* harmony default export */ var edit_mixin = ({
+  methods: {
+    /**
+     * 往表格中插入临时数据
+     *
+     * @param {*} records
+     */
+    _insert(records) {
+      return handleInsertRowAt(this, records, null);
+    },
+    /**
+     * 往表格指定行中插入临时数据
+     * 如果 row 为空则从插入到顶部
+     * 如果 row 为 -1 则从插入到底部
+     * 如果 row 为有效行则插入到该行的位置
+     * @param {Object/Array} records 新的数据
+     * @param {Row} targetRow 指定行
+     * @returns
+     */
+    _insertAt(records, targetRow) {
+      return handleInsertRowAt(this, records, targetRow);
+    },
+    _insertNextAt(records, targetRow) {
+      return handleInsertRowAt(this, records, targetRow, true);
+    },
+    _insertChild(records, parentRow) {
+      return handleInsertChildRowAt(this, records, parentRow, null);
+    },
+    _insertChildAt(records, parentRow, targetRow) {
+      return handleInsertChildRowAt(this, records, parentRow, targetRow);
+    },
+    _insertChildNextAt(records, parentRow, targetRow) {
+      return handleInsertChildRowAt(this, records, parentRow, targetRow, true);
+    },
+    /**
+     * 删除指定行数据
+     * 如果传 row 则删除一行
+     * 如果传 rows 则删除多行
+     * 如果为空则删除所有
+     */
+    _remove(rows) {
+      const $xeTable = this;
+      const props = $xeTable;
+      const reactData = $xeTable;
+      const internalData = $xeTable;
+      const {
+        treeConfig
+      } = props;
+      const {
+        mergeList,
+        editStore,
+        selectCheckboxMaps
       } = reactData;
       const {
         tableFullTreeData,
@@ -20906,6 +21338,7 @@ function handleInsertChildRowAt($xeTable, records, parentRow, targetRow, isInser
      * 如果是树表格，子节点更改状态不会影响父节点的更新状态
      */
     _getUpdateRecords() {
+      const $xeTable = this;
       const {
         keepSource,
         tableFullData,
@@ -20923,7 +21356,7 @@ function handleInsertChildRowAt($xeTable, records, parentRow, targetRow, isInser
           column
         } = actived;
         if (row || column) {
-          this._syncActivedCell();
+          syncActivedCell($xeTable);
         }
         if (treeConfig) {
           return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().filterTree(tableFullData, row => isUpdateByRow(row), treeOpts);
@@ -20936,107 +21369,8 @@ function handleInsertChildRowAt($xeTable, records, parentRow, targetRow, isInser
      * 处理激活编辑
      */
     handleEdit(params, evnt) {
-      const {
-        editStore,
-        editOpts,
-        tableColumn,
-        editConfig,
-        mouseConfig
-      } = this;
-      const {
-        mode
-      } = editOpts;
-      const {
-        actived,
-        focused
-      } = editStore;
-      const {
-        row,
-        column
-      } = params;
-      const {
-        editRender
-      } = column;
-      const cell = params.cell = params.cell || this.getCellElement(row, column);
-      const beforeEditMethod = editOpts.beforeEditMethod || editOpts.activeMethod;
-      if (cell && isEnableConf(editConfig) && isEnableConf(editRender)) {
-        // 激活编辑
-        if (!this.hasPendingByRow(row)) {
-          if (actived.row !== row || (mode === 'cell' ? actived.column !== column : false)) {
-            // 判断是否禁用编辑
-            let type = 'edit-disabled';
-            if (!beforeEditMethod || beforeEditMethod({
-              ...params,
-              $table: this,
-              $grid: this.$xegrid
-            })) {
-              if (mouseConfig) {
-                this.clearSelected(evnt);
-                this.clearCellAreas(evnt);
-                this.clearCopyCellArea(evnt);
-              }
-              this.closeTooltip();
-              if (actived.column) {
-                this.handleClearEdit(evnt);
-              }
-              type = 'edit-activated';
-              column.renderHeight = cell.offsetHeight;
-              actived.args = params;
-              actived.row = row;
-              actived.column = column;
-              if (mode === 'row') {
-                tableColumn.forEach(column => this._getColumnModel(row, column));
-              } else {
-                this._getColumnModel(row, column);
-              }
-              const afterEditMethod = editOpts.afterEditMethod;
-              this.$nextTick(() => {
-                this.handleFocus(params, evnt);
-                if (afterEditMethod) {
-                  afterEditMethod({
-                    ...params,
-                    $table: this,
-                    $grid: this.$xegrid
-                  });
-                }
-              });
-            }
-            this.emitEvent(type, params, evnt);
-            // v4已废弃
-            if (type === 'edit-activated') {
-              this.emitEvent('edit-actived', params, evnt);
-            }
-          } else {
-            const {
-              column: oldColumn
-            } = actived;
-            if (mouseConfig) {
-              this.clearSelected(evnt);
-              this.clearCellAreas(evnt);
-              this.clearCopyCellArea(evnt);
-            }
-            if (oldColumn !== column) {
-              const {
-                model: oldModel
-              } = oldColumn;
-              if (oldModel.update) {
-                setCellValue(row, oldColumn, oldModel.value);
-              }
-              this.clearValidate();
-            }
-            column.renderHeight = cell.offsetHeight;
-            actived.args = params;
-            actived.column = column;
-            setTimeout(() => {
-              this.handleFocus(params, evnt);
-            });
-          }
-          focused.column = null;
-          focused.row = null;
-          this.focus();
-        }
-      }
-      return this.$nextTick();
+      const $xeTable = this;
+      return handleEditActive($xeTable, params, evnt, true);
     },
     /**
      * @deprecated
@@ -21045,46 +21379,14 @@ function handleInsertChildRowAt($xeTable, records, parentRow, targetRow, isInser
       return this.handleEdit(params, evnt);
     },
     _getColumnModel(row, column) {
-      const {
-        model,
-        editRender
-      } = column;
-      if (editRender) {
-        model.value = getCellValue(row, column);
-        model.update = false;
-      }
+      getEditColumnModel(row, column);
     },
     _setColumnModel(row, column) {
-      const {
-        model,
-        editRender
-      } = column;
-      if (editRender && model.update) {
-        setCellValue(row, column, model.value);
-        model.update = false;
-        model.value = null;
-      }
+      setEditColumnModel(row, column);
     },
     _syncActivedCell() {
-      const {
-        tableColumn,
-        editStore,
-        editOpts
-      } = this;
-      const {
-        actived
-      } = editStore;
-      const {
-        row,
-        column
-      } = actived;
-      if (row || column) {
-        if (editOpts.mode === 'row') {
-          tableColumn.forEach(column => this._setColumnModel(row, column));
-        } else {
-          this._setColumnModel(row, column);
-        }
-      }
+      const $xeTable = this;
+      syncActivedCell($xeTable);
     },
     _clearActived(row) {
       if (true) {
@@ -21097,63 +21399,15 @@ function handleInsertChildRowAt($xeTable, records, parentRow, targetRow, isInser
      * 清除激活的编辑
      */
     _clearEdit(row) {
-      return this.handleClearEdit(null, row);
+      const $xeTable = this;
+      return handleClearEdit($xeTable, null, row);
     },
     /**
      * 取消编辑
      */
     handleClearEdit(evnt, targetRow) {
       const $xeTable = this;
-      const props = $xeTable;
-      const reactData = $xeTable;
-      const {
-        mouseConfig
-      } = props;
-      const {
-        editStore
-      } = reactData;
-      const {
-        actived,
-        focused
-      } = editStore;
-      const {
-        row,
-        column
-      } = actived;
-      const validOpts = $xeTable.validOpts;
-      const mouseOpts = $xeTable.computeMouseOpts;
-      if (row || column) {
-        if (targetRow && getRowid($xeTable, targetRow) !== getRowid($xeTable, row)) {
-          return $xeTable.$nextTick();
-        }
-        $xeTable._syncActivedCell();
-        actived.args = null;
-        actived.row = null;
-        actived.column = null;
-        $xeTable.updateFooter();
-        $xeTable.emitEvent('edit-closed', {
-          row,
-          rowIndex: $xeTable.getRowIndex(row),
-          $rowIndex: $xeTable.getVMRowIndex(row),
-          column,
-          columnIndex: $xeTable.getColumnIndex(column),
-          $columnIndex: $xeTable.getVMColumnIndex(column)
-        }, evnt);
-      }
-      focused.row = null;
-      focused.column = null;
-      if (validOpts.autoClear) {
-        if (validOpts.msgMode !== 'full' || mixin_getConfig().cellVaildMode === 'obsolete') {
-          if ($xeTable.clearValidate) {
-            return $xeTable.clearValidate();
-          }
-        }
-      }
-      return $xeTable.$nextTick().then(() => {
-        if (mouseConfig && mouseOpts.area && $xeTable.handleRecalculateCellAreas) {
-          return $xeTable.handleRecalculateCellAreas();
-        }
-      });
+      return handleClearEdit($xeTable, evnt, targetRow);
     },
     _getActiveRecord() {
       if (true) {
@@ -21270,11 +21524,12 @@ function handleInsertChildRowAt($xeTable, records, parentRow, targetRow, isInser
      * 激活行编辑
      */
     _setEditRow(row, fieldOrColumn) {
+      const $xeTable = this;
       let column = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().find(this.visibleColumn, column => isEnableConf(column.editRender));
       if (fieldOrColumn) {
         column = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isString(fieldOrColumn) ? this.getColumnByField(fieldOrColumn) : fieldOrColumn;
       }
-      return this.setEditCell(row, column);
+      return handleEditCell($xeTable, row, column, false);
     },
     _setActiveCell(row, fieldOrColumn) {
       if (true) {
@@ -21287,27 +21542,8 @@ function handleInsertChildRowAt($xeTable, records, parentRow, targetRow, isInser
      * 激活单元格编辑
      */
     _setEditCell(row, fieldOrColumn) {
-      const {
-        editConfig
-      } = this;
-      const column = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isString(fieldOrColumn) ? this.getColumnByField(fieldOrColumn) : fieldOrColumn;
-      if (row && column && isEnableConf(editConfig) && isEnableConf(column.editRender)) {
-        return this.scrollToRow(row, true).then(() => {
-          const cell = this.getCellElement(row, column);
-          if (cell) {
-            this.handleEdit({
-              row,
-              rowIndex: this.getRowIndex(row),
-              column,
-              columnIndex: this.getColumnIndex(column),
-              cell,
-              $table: this
-            });
-            this.lastCallTime = Date.now();
-          }
-        });
-      }
-      return this.$nextTick();
+      const $xeTable = this;
+      return handleEditCell($xeTable, row, fieldOrColumn, true);
     },
     /**
      * 只对 trigger=dblclick 有效，选中单元格
@@ -21339,6 +21575,7 @@ function handleInsertChildRowAt($xeTable, records, parentRow, targetRow, isInser
      * 处理选中源
      */
     handleSelected(params, evnt) {
+      const $xeTable = this;
       const {
         mouseConfig,
         mouseOpts,
@@ -21357,7 +21594,7 @@ function handleInsertChildRowAt($xeTable, records, parentRow, targetRow, isInser
       const selectMethod = () => {
         if (isMouseSelected && (selected.row !== row || selected.column !== column)) {
           if (actived.row !== row || (editOpts.mode === 'cell' ? actived.column !== column : false)) {
-            this.handleClearEdit(evnt);
+            handleClearEdit($xeTable, evnt);
             this.clearSelected(evnt);
             this.clearCellAreas(evnt);
             this.clearCopyCellArea(evnt);
@@ -24755,6 +24992,7 @@ function validErrorRuleValue(rule, val) {
 
 
 
+
 
 
 const {
@@ -24923,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',
@@ -24981,6 +25309,7 @@ function renderViewport(h, $xeTable) {
   } = props;
   const {
     overflowX,
+    scrollYLoad,
     tableData,
     tableColumn,
     tableGroupColumn,
@@ -24991,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'
   }, [
@@ -25029,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;
@@ -25279,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,
@@ -25685,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,
@@ -26162,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();
     }