vxe-table 3.12.15 → 3.12.17

package/es/table/src/methods.js

@@ -1,5 +1,5 @@
 import XEUtils from 'xe-utils';
-import { browse, getTpImg, isPx, isScale, hasClass, addClass, removeClass, getEventTargetNode, getPaddingTopBottomSize, getOffsetPos, setScrollTop, setScrollLeft } from '../../ui/src/dom';
+import { browse, getTpImg, isPx, isScale, hasClass, addClass, removeClass, getEventTargetNode, getPaddingTopBottomSize, getOffsetPos, setScrollTop, setScrollLeft, toCssUnit } from '../../ui/src/dom';
 import { getLastZIndex, nextZIndex, hasChildrenList, getFuncText, isEnableConf, formatText, eqEmptyValue } from '../../ui/src/utils';
 import { VxeUI } from '../../ui';
 import Cell from './cell';
@@ -308,7 +308,7 @@ function updateAfterListIndex($xeTable) {
             rowRest._index = index;
         }
         else {
-            const rest = { row, rowid, seq, index: -1, $index: -1, _index: index, treeIndex: -1, items: [], parent: null, level: 0, height: 0, resizeHeight: 0, oTop: 0 };
+            const rest = { row, rowid, seq, index: -1, $index: -1, _index: index, treeIndex: -1, items: [], parent: null, level: 0, height: 0, resizeHeight: 0, oTop: 0, expandHeight: 0 };
             fullAllDataRowIdData[rowid] = rest;
             fullDataRowIdData[rowid] = rest;
         }
@@ -339,7 +339,7 @@ function updateAfterDataIndex($xeTable) {
                 rowRest.treeIndex = index;
             }
             else {
-                const rest = { row, rowid, seq, index: -1, $index: -1, _index: -1, treeIndex: -1, items: [], parent: null, level: 0, height: 0, resizeHeight: 0, oTop: 0 };
+                const rest = { row, rowid, seq, index: -1, $index: -1, _index: -1, treeIndex: -1, items: [], parent: null, level: 0, height: 0, resizeHeight: 0, oTop: 0, expandHeight: 0 };
                 fullAllDataRowIdData[rowid] = rest;
                 fullDataRowIdData[rowid] = rest;
             }
@@ -403,6 +403,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) {
@@ -472,6 +473,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'];
@@ -580,7 +586,7 @@ function updateStyle($xeTable) {
                 let isOptimizeMode = false;
                 // 如果是使用优化模式
                 if (scrollXLoad || scrollYLoad || isAllOverflow) {
-                    if (expandColumn || spanMethod || footerSpanMethod) {
+                    if ((expandColumn && expandOpts.mode !== 'fixed') || spanMethod || footerSpanMethod) {
                         // 如果不支持优化模式
                     }
                     else {
@@ -707,6 +713,13 @@ 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 { isAllOverflow } = reactData;
@@ -740,8 +753,9 @@ function computeRowHeight($xeTable) {
 function handleVirtualYVisible($xeTable, currScrollTop) {
     const reactData = $xeTable;
     const internalData = $xeTable;
-    const { isAllOverflow } = reactData;
+    const { isAllOverflow, expandColumn, rowExpandedMaps } = reactData;
     const { elemStore, isResizeCellHeight, afterFullData, fullAllDataRowIdData } = internalData;
+    const expandOpts = $xeTable.computeExpandOpts;
     const rowOpts = $xeTable.computeRowOpts;
     const cellOpts = $xeTable.computeCellOpts;
     const defaultRowHeight = $xeTable.computeDefaultRowHeight;
@@ -754,7 +768,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;
         }
@@ -773,6 +787,10 @@ function handleVirtualYVisible($xeTable, currScrollTop) {
                         break;
                     }
                 }
+                // 是否展开行
+                if (expandColumn && rowExpandedMaps[rowid]) {
+                    offsetTop += rowRest.expandHeight || expandOpts.height || 0;
+                }
             }
         }
         return { toVisibleIndex: Math.max(0, toVisibleIndex), visibleSize: Math.max(6, visibleSize) };
@@ -1393,9 +1411,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) {
             // 初始化时需要在列计算之后再执行优化运算，达到最优显示效果
@@ -1403,6 +1430,7 @@ function handleRecalculateLayout($xeTable, reFull) {
             calcCellWidth($xeTable);
             autoCellWidth($xeTable);
             updateStyle($xeTable);
+            updateRowExpandStyle($xeTable);
             return computeScrollLoad($xeTable);
         }
     });
@@ -1823,7 +1851,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');
@@ -1833,8 +1861,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(() => {
@@ -1842,7 +1870,65 @@ 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;
+                    }
+                }
+            }
+            XEUtils.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) {
@@ -2223,7 +2309,7 @@ const Methods = {
             }
             let cacheItem = fullAllDataRowIdData[rowid];
             if (isReset || !cacheItem) {
-                cacheItem = { row, rowid, seq, index: -1, _index: -1, $index: -1, treeIndex: index, items, parent: parentRow, level, height: 0, resizeHeight: 0, oTop: 0 };
+                cacheItem = { row, rowid, seq, index: -1, _index: -1, $index: -1, treeIndex: index, items, parent: parentRow, level, height: 0, resizeHeight: 0, oTop: 0, expandHeight: 0 };
             }
             cacheItem.row = row;
             cacheItem.items = items;
@@ -2297,7 +2383,7 @@ const Methods = {
             XEUtils.eachTree(rows, (childRow, index, items, path, parentItem, nodes) => {
                 const rowid = getRowid($xeTable, childRow);
                 const parentRow = parentItem || parentRest.row;
-                const rest = { row: childRow, rowid, seq: -1, index, _index: -1, $index: -1, treeIndex: -1, items, parent: parentRow, level: parentLevel + nodes.length, height: 0, resizeHeight: 0, oTop: 0 };
+                const rest = { row: childRow, rowid, seq: -1, index, _index: -1, $index: -1, treeIndex: -1, items, parent: parentRow, level: parentLevel + nodes.length, height: 0, resizeHeight: 0, oTop: 0, expandHeight: 0 };
                 fullDataRowIdData[rowid] = rest;
                 fullAllDataRowIdData[rowid] = rest;
             }, { children: childrenField });
@@ -4121,6 +4207,7 @@ const Methods = {
             const el = $xeTable.$refs.refElem;
             if (el && el.clientWidth) {
                 autoCellWidth($xeTable);
+                updateRowExpandStyle($xeTable);
             }
             if (rceTimeout) {
                 clearTimeout(rceTimeout);
@@ -6839,6 +6926,17 @@ 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;
@@ -6853,11 +6951,6 @@ const Methods = {
         });
         return insertRecords;
     },
-    hasPendingByRow(row) {
-        const { pendingRowMaps } = this;
-        const rowid = getRowid(this, row);
-        return !!pendingRowMaps[rowid];
-    },
     clearPendingRow() {
         this.pendingRowMaps = {};
         return this.$nextTick();
@@ -7775,6 +7868,7 @@ const Methods = {
             isLeft,
             isRight,
             direction }, params);
+        updateRowExpandStyle($xeTable);
         checkLastSyncScroll($xeTable, isRollX, isRollY);
         if (rowOpts.isHover || highlightHoverRow) {
             $xeTable.clearHoverRow();
@@ -7818,7 +7912,9 @@ const Methods = {
     },
     triggerBodyScrollEvent(evnt, fixedType) {
         const $xeTable = this;
+        const reactData = $xeTable;
         const internalData = $xeTable;
+        const { scrollYLoad, scrollXLoad } = reactData;
         const { elemStore, intoRunScroll, lastScrollTop, lastScrollLeft, inWheelScroll, inVirtualScroll, inHeaderScroll, inBodyScroll, scrollRenderType, inFooterScroll } = internalData;
         const xHandleEl = $xeTable.$refs.refScrollXHandleElem;
         const yHandleEl = $xeTable.$refs.refScrollYHandleElem;
@@ -7827,6 +7923,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;
         }
@@ -7877,13 +7974,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',
@@ -7892,7 +7994,9 @@ const Methods = {
     },
     triggerHeaderScrollEvent(evnt, fixedType) {
         const $xeTable = this;
+        const reactData = $xeTable;
         const internalData = $xeTable;
+        const { scrollXLoad } = reactData;
         const { elemStore, intoRunScroll, inWheelScroll, inVirtualScroll, inBodyScroll, inFooterScroll } = internalData;
         const xHandleEl = $xeTable.$refs.refScrollXHandleElem;
         const yHandleEl = $xeTable.$refs.refScrollYHandleElem;
@@ -7922,7 +8026,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
@@ -7930,7 +8036,9 @@ const Methods = {
     },
     triggerFooterScrollEvent(evnt, fixedType) {
         const $xeTable = this;
+        const reactData = $xeTable;
         const internalData = $xeTable;
+        const { scrollXLoad } = reactData;
         const { elemStore, intoRunScroll, inWheelScroll, inVirtualScroll, inHeaderScroll, inBodyScroll } = internalData;
         const xHandleEl = $xeTable.$refs.refScrollXHandleElem;
         const yHandleEl = $xeTable.$refs.refScrollYHandleElem;
@@ -7960,7 +8068,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
@@ -7976,6 +8086,7 @@ const Methods = {
             return;
         }
         const { highlightHoverRow } = tableProps;
+        const { scrollYLoad } = reactData;
         const { elemStore, lastScrollTop, lastScrollLeft } = internalData;
         const rowOpts = $xeTable.computeRowOpts;
         const xHandleEl = $xeTable.$refs.refScrollXHandleElem;
@@ -7983,6 +8094,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;
         }
@@ -8018,27 +8130,22 @@ 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, lastScrollTop, inHeaderScroll, inBodyScroll, inFooterScroll } = internalData;
         if (inHeaderScroll || inBodyScroll || inFooterScroll) {
             return;
@@ -8063,7 +8170,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: ''
@@ -8071,7 +8180,9 @@ const Methods = {
     },
     triggerVirtualScrollYEvent(evnt) {
         const $xeTable = this;
+        const reactData = $xeTable;
         const internalData = $xeTable;
+        const { scrollYLoad } = reactData;
         const { elemStore, inWheelScroll, lastScrollLeft, inHeaderScroll, inBodyScroll, inFooterScroll } = internalData;
         if (inHeaderScroll || inBodyScroll || inFooterScroll) {
             return;
@@ -8082,6 +8193,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 { scrollTop } = wrapperEl;
@@ -8096,7 +8208,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: ''
@@ -8107,6 +8222,7 @@ const Methods = {
         const reactData = $xeTable;
         const { isAllOverflow } = reactData;
         handleTableColumn($xeTable);
+        $xeTable.updateScrollXSpace();
         return $xeTable.$nextTick().then(() => {
             handleTableColumn($xeTable);
             $xeTable.updateScrollXSpace();
@@ -8166,6 +8282,7 @@ const Methods = {
     updateScrollYData() {
         const $xeTable = this;
         $xeTable.handleTableData();
+        $xeTable.updateScrollYSpace();
         return $xeTable.$nextTick().then(() => {
             $xeTable.handleTableData();
             $xeTable.updateScrollYSpace();
@@ -8176,9 +8293,10 @@ const Methods = {
         const $xeTable = this;
         const reactData = $xeTable;
         const internalData = $xeTable;
-        const { isAllOverflow, scrollYLoad } = reactData;
+        const { isAllOverflow, scrollYLoad, expandColumn, rowExpandedMaps } = reactData;
         const { scrollYStore, elemStore, isResizeCellHeight, afterFullData, fullAllDataRowIdData } = internalData;
         const { startIndex } = scrollYStore;
+        const expandOpts = $xeTable.computeExpandOpts;
         const rowOpts = $xeTable.computeRowOpts;
         const cellOpts = $xeTable.computeCellOpts;
         const defaultRowHeight = $xeTable.computeDefaultRowHeight;
@@ -8188,7 +8306,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);
             }
@@ -8198,12 +8316,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;
+                    }
                 }
             }
         }
@@ -8229,6 +8355,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);
         });

package/es/table/src/table.js

@@ -1,6 +1,7 @@
 import XEUtils from 'xe-utils';
 import { getFuncText, isEnableConf } from '../../ui/src/utils';
 import { initTpImg } from '../../ui/src/dom';
+import { getRowid } from './util';
 import { VxeUI } from '../../ui';
 import methods from './methods';
 import TableBodyComponent from './body';
@@ -173,6 +174,74 @@ 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 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',
@@ -242,11 +311,18 @@ function renderViewport(h, $xeTable) {
     const props = $xeTable;
     const reactData = $xeTable;
     const { showHeader, showFooter } = props;
-    const { overflowX, tableData, tableColumn, tableGroupColumn, footerTableData, columnStore } = reactData;
+    const { overflowX, scrollYLoad, tableData, tableColumn, tableGroupColumn, footerTableData, columnStore } = reactData;
     const { 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'
@@ -292,7 +368,8 @@ function renderViewport(h, $xeTable) {
         }, [
             leftList && leftList.length && overflowX ? renderFixed(h, $xeTable, 'left') : renderEmptyElement($xeTable),
             rightList && rightList.length && overflowX ? renderFixed(h, $xeTable, 'right') : renderEmptyElement($xeTable)
-        ])
+        ]),
+        renderRowExpandedVNs(h, $xeTable)
     ]);
 }
 function renderBody(h, $xeTable) {
@@ -560,8 +637,9 @@ export default {
                 mini: 36
             },
             scrollVMLoading: false,
-            calcCellHeightFlag: 0,
-            resizeHeightFlag: 0,
+            rowExpandHeightFlag: 1,
+            calcCellHeightFlag: 1,
+            resizeHeightFlag: 1,
             isCustomStatus: false,
             isDragRowMove: false,
             dragRow: null,
@@ -934,6 +1012,24 @@ export default {
         computeCustomOpts() {
             return Object.assign({}, 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;
+                });
+                XEUtils.each(rowExpandedMaps, (row, rowid) => {
+                    if (rowKeys[rowid]) {
+                        expandList.push(row);
+                    }
+                });
+            }
+            return expandList;
+        },
         computeAutoWidthColumnList() {
             const { tableColumn, visibleColumn } = this;
             return tableColumn.length || visibleColumn.length ? visibleColumn.filter((column) => column.width === 'auto' || column.minWidth === 'auto') : [];
@@ -1367,27 +1463,9 @@ export default {
     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();
         }