vxe-table 4.10.13 → 4.10.15-beta.0

package/es/table/src/table.js

@@ -1,6 +1,6 @@
 import { defineComponent, h, reactive, ref, provide, inject, nextTick, onActivated, onDeactivated, onBeforeUnmount, onUnmounted, watch, computed, onMounted } from 'vue';
 import XEUtils from 'xe-utils';
-import { browse, initTpImg, getTpImg, isPx, isScale, hasClass, addClass, removeClass, getEventTargetNode, getPaddingTopBottomSize, getOffsetPos, setScrollTop, setScrollLeft } from '../../ui/src/dom';
+import { browse, initTpImg, 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';
@@ -250,8 +250,9 @@ export default defineComponent({
                 mini: 36
             },
             scrollVMLoading: false,
+            rowExpandHeightFlag: 1,
             calcCellHeightFlag: 1,
-            resizeHeightFlag: 0,
+            resizeHeightFlag: 1,
             isCustomStatus: false,
             isDragRowMove: false,
             dragRow: null,
@@ -368,6 +369,8 @@ export default defineComponent({
         const refDragTipElem = ref();
         const refDragRowLineElem = ref();
         const refDragColLineElem = ref();
+        const refRowExpandElem = ref();
+        const refRowExpandYSpaceElem = ref();
         const refScrollXVirtualElem = ref();
         const refScrollYVirtualElem = ref();
         const refScrollXHandleElem = ref();
@@ -604,6 +607,22 @@ export default defineComponent({
         const computeCustomOpts = computed(() => {
             return Object.assign({}, getConfig().table.customConfig, props.customConfig);
         });
+        const computeTableRowExpandedList = computed(() => {
+            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;
+        });
         const computeAutoWidthColumnList = computed(() => {
             const { visibleColumn } = internalData;
             const { tableColumn } = reactData;
@@ -842,6 +861,12 @@ export default defineComponent({
             }
             return { toVisibleIndex: 0, visibleSize: 6 };
         };
+        const calcVarRowHeightConfig = (sizeKey, sizeEl) => {
+            const { rowHeightStore } = reactData;
+            if (sizeEl && sizeEl.clientHeight) {
+                rowHeightStore[sizeKey] = sizeEl.clientHeight;
+            }
+        };
         const computeRowHeight = () => {
             const { isAllOverflow } = reactData;
             const tableHeader = refTableHeader.value;
@@ -872,8 +897,9 @@ export default defineComponent({
             return Math.max(18, rowHeight);
         };
         const handleVirtualYVisible = (currScrollTop) => {
-            const { isAllOverflow } = reactData;
+            const { isAllOverflow, expandColumn, rowExpandedMaps } = reactData;
             const { elemStore, isResizeCellHeight, afterFullData, fullAllDataRowIdData } = internalData;
+            const expandOpts = computeExpandOpts.value;
             const rowOpts = computeRowOpts.value;
             const cellOpts = computeCellOpts.value;
             const defaultRowHeight = computeDefaultRowHeight.value;
@@ -886,7 +912,7 @@ export default defineComponent({
                 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;
                 }
@@ -905,6 +931,10 @@ export default defineComponent({
                                 break;
                             }
                         }
+                        // 是否展开行
+                        if (expandColumn && rowExpandedMaps[rowid]) {
+                            offsetTop += rowRest.expandHeight || expandOpts.height || 0;
+                        }
                     }
                 }
                 return { toVisibleIndex: Math.max(0, toVisibleIndex), visibleSize: Math.max(6, visibleSize) };
@@ -1456,7 +1486,7 @@ export default defineComponent({
                     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;
                 }
@@ -1485,7 +1515,7 @@ export default defineComponent({
                         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;
                     }
@@ -1695,6 +1725,7 @@ export default defineComponent({
             const emptyPlaceholderElem = refEmptyPlaceholder.value;
             const cellOffsetWidth = computeCellOffsetWidth.value;
             const mouseOpts = computeMouseOpts.value;
+            const expandOpts = computeExpandOpts.value;
             const bodyWrapperElem = getRefElem(elemStore['main-body-wrapper']);
             const bodyTableElem = getRefElem(elemStore['main-body-table']);
             if (emptyPlaceholderElem) {
@@ -1764,6 +1795,11 @@ export default defineComponent({
                 yBottomCornerEl.style.top = `${headerHeight + bodyHeight}px`;
                 yBottomCornerEl.style.display = footerHeight ? 'block' : '';
             }
+            const rowExpandEl = refRowExpandElem.value;
+            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'];
@@ -1872,7 +1908,7 @@ export default defineComponent({
                         let isOptimizeMode = false;
                         // 如果是使用优化模式
                         if (scrollXLoad || scrollYLoad || isAllOverflow) {
-                            if (expandColumn || spanMethod || footerSpanMethod) {
+                            if ((expandColumn && expandOpts.mode !== 'fixed') || spanMethod || footerSpanMethod) {
                                 // 如果不支持优化模式
                             }
                             else {
@@ -2524,15 +2560,25 @@ export default defineComponent({
             if (!el || !el.clientWidth) {
                 return nextTick();
             }
+            const varEl = refVarElem.value;
+            if (varEl) {
+                const [defEl, mediumEl, smallEl, miniEl] = varEl.children;
+                calcVarRowHeightConfig('default', defEl);
+                calcVarRowHeightConfig('medium', mediumEl);
+                calcVarRowHeightConfig('small', smallEl);
+                calcVarRowHeightConfig('mini', miniEl);
+            }
             calcCellWidth();
             autoCellWidth();
             updateStyle();
+            updateRowExpandStyle();
             return computeScrollLoad().then(() => {
                 if (reFull === true) {
                     // 初始化时需要在列计算之后再执行优化运算，达到最优显示效果
                     calcCellWidth();
                     autoCellWidth();
                     updateStyle();
+                    updateRowExpandStyle();
                     return computeScrollLoad();
                 }
             });
@@ -3240,6 +3286,62 @@ export default defineComponent({
                 setTimeout(() => $xeTable.recalculate(true), 300);
             });
         };
+        const updateRowExpandStyle = () => {
+            const { expandColumn, scrollYLoad, rowExpandedMaps } = reactData;
+            const expandOpts = computeExpandOpts.value;
+            const rowOpts = computeRowOpts.value;
+            const cellOpts = computeCellOpts.value;
+            const defaultRowHeight = computeDefaultRowHeight.value;
+            const { mode } = expandOpts;
+            if (expandColumn && mode === 'fixed') {
+                const { elemStore, afterFullData, fullAllDataRowIdData } = internalData;
+                const rowExpandEl = refRowExpandElem.value;
+                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++;
+                    }
+                }
+            }
+        };
         tableMethods = {
             dispatchEvent,
             /**
@@ -3401,7 +3503,7 @@ export default defineComponent({
                     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 });
@@ -4259,6 +4361,7 @@ export default defineComponent({
                     const el = refElem.value;
                     if (el && el.clientWidth) {
                         autoCellWidth();
+                        updateRowExpandStyle();
                     }
                     if (rceTimeout) {
                         clearTimeout(rceTimeout);
@@ -6525,7 +6628,7 @@ export default defineComponent({
                     }
                     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;
@@ -8468,6 +8571,7 @@ export default defineComponent({
                     isLeft,
                     isRight,
                     direction }, params);
+                updateRowExpandStyle();
                 checkLastSyncScroll(isRollX, isRollY);
                 if (rowOpts.isHover || highlightHoverRow) {
                     $xeTable.clearHoverRow();
@@ -8508,6 +8612,7 @@ export default defineComponent({
                 }
             },
             triggerBodyScrollEvent(evnt, fixedType) {
+                const { scrollYLoad, scrollXLoad } = reactData;
                 const { elemStore, intoRunScroll, lastScrollTop, lastScrollLeft, inWheelScroll, inVirtualScroll, inHeaderScroll, inBodyScroll, scrollRenderType, inFooterScroll } = internalData;
                 const xHandleEl = refScrollXHandleElem.value;
                 const yHandleEl = refScrollYHandleElem.value;
@@ -8516,6 +8621,7 @@ export default defineComponent({
                 const rightScrollElem = getRefElem(elemStore['right-body-scroll']);
                 const headerScrollElem = getRefElem(elemStore['main-header-scroll']);
                 const footerScrollElem = getRefElem(elemStore['main-footer-scroll']);
+                const rowExpandEl = refRowExpandElem.value;
                 if (inWheelScroll || inVirtualScroll || inHeaderScroll || inFooterScroll) {
                     return;
                 }
@@ -8566,13 +8672,18 @@ export default defineComponent({
                         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',
@@ -8580,6 +8691,7 @@ export default defineComponent({
                 });
             },
             triggerHeaderScrollEvent(evnt, fixedType) {
+                const { scrollXLoad } = reactData;
                 const { elemStore, intoRunScroll, inWheelScroll, inVirtualScroll, inBodyScroll, inFooterScroll } = internalData;
                 const yHandleEl = refScrollYHandleElem.value;
                 const xHandleEl = refScrollXHandleElem.value;
@@ -8609,13 +8721,16 @@ export default defineComponent({
                 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
                 });
             },
             triggerFooterScrollEvent(evnt, fixedType) {
+                const { scrollXLoad } = reactData;
                 const { elemStore, intoRunScroll, inWheelScroll, inVirtualScroll, inHeaderScroll, inBodyScroll } = internalData;
                 const yHandleEl = refScrollYHandleElem.value;
                 const xHandleEl = refScrollXHandleElem.value;
@@ -8645,7 +8760,9 @@ export default defineComponent({
                 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
@@ -8657,6 +8774,7 @@ export default defineComponent({
                     return;
                 }
                 const { highlightHoverRow } = tableProps;
+                const { scrollYLoad } = reactData;
                 const { elemStore, lastScrollTop, lastScrollLeft } = internalData;
                 const rowOpts = computeRowOpts.value;
                 const xHandleEl = refScrollXHandleElem.value;
@@ -8664,6 +8782,7 @@ export default defineComponent({
                 const leftScrollElem = getRefElem(elemStore['left-body-scroll']);
                 const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
                 const rightScrollElem = getRefElem(elemStore['right-body-scroll']);
+                const rowExpandEl = refRowExpandElem.value;
                 if (!xHandleEl) {
                     return;
                 }
@@ -8699,25 +8818,19 @@ export default defineComponent({
                         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(scrollTop)
-                    // $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
-                    //   type: 'footer',
-                    //   fixed: ''
-                    // })
                 }
             },
             triggerVirtualScrollXEvent(evnt) {
+                const { scrollXLoad } = reactData;
                 const { elemStore, inWheelScroll, lastScrollTop, inHeaderScroll, inBodyScroll, inFooterScroll } = internalData;
                 if (inHeaderScroll || inBodyScroll || inFooterScroll) {
                     return;
@@ -8742,13 +8855,16 @@ export default defineComponent({
                 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: ''
                 });
             },
             triggerVirtualScrollYEvent(evnt) {
+                const { scrollYLoad } = reactData;
                 const { elemStore, inWheelScroll, lastScrollLeft, inHeaderScroll, inBodyScroll, inFooterScroll } = internalData;
                 if (inHeaderScroll || inBodyScroll || inFooterScroll) {
                     return;
@@ -8759,6 +8875,7 @@ export default defineComponent({
                 const leftScrollElem = getRefElem(elemStore['left-body-scroll']);
                 const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
                 const rightScrollElem = getRefElem(elemStore['right-body-scroll']);
+                const rowExpandEl = refRowExpandElem.value;
                 const xHandleEl = refScrollXHandleElem.value;
                 const wrapperEl = evnt.currentTarget;
                 const { scrollTop } = wrapperEl;
@@ -8773,7 +8890,10 @@ export default defineComponent({
                 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: ''
@@ -8851,9 +8971,10 @@ export default defineComponent({
             },
             // 更新纵向 Y 可视渲染上下剩余空间大小
             updateScrollYSpace() {
-                const { isAllOverflow, scrollYLoad } = reactData;
+                const { isAllOverflow, scrollYLoad, expandColumn, rowExpandedMaps } = reactData;
                 const { scrollYStore, elemStore, isResizeCellHeight, afterFullData, fullAllDataRowIdData } = internalData;
                 const { startIndex } = scrollYStore;
+                const expandOpts = computeExpandOpts.value;
                 const rowOpts = computeRowOpts.value;
                 const cellOpts = computeCellOpts.value;
                 const defaultRowHeight = computeDefaultRowHeight.value;
@@ -8863,7 +8984,7 @@ export default defineComponent({
                 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);
                     }
@@ -8873,12 +8994,20 @@ export default defineComponent({
                             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;
+                            }
                         }
                     }
                 }
@@ -8904,6 +9033,10 @@ export default defineComponent({
                 if (scrollYSpaceEl) {
                     scrollYSpaceEl.style.height = ySpaceHeight ? `${ySpaceHeight}px` : '';
                 }
+                const rowExpandYSpaceEl = refRowExpandYSpaceElem.value;
+                if (rowExpandYSpaceEl) {
+                    rowExpandYSpaceEl.style.height = ySpaceHeight ? `${ySpaceHeight}px` : '';
+                }
                 return nextTick().then(() => {
                     updateStyle();
                 });
@@ -8911,6 +9044,7 @@ export default defineComponent({
             updateScrollXData() {
                 const { isAllOverflow } = reactData;
                 handleTableColumn();
+                $xeTable.updateScrollYSpace();
                 return nextTick().then(() => {
                     handleTableColumn();
                     $xeTable.updateScrollXSpace();
@@ -8921,6 +9055,7 @@ export default defineComponent({
             },
             updateScrollYData() {
                 $xeTable.handleTableData();
+                $xeTable.updateScrollYSpace();
                 return nextTick().then(() => {
                     $xeTable.handleTableData();
                     $xeTable.updateScrollYSpace();
@@ -9148,6 +9283,69 @@ export default defineComponent({
             }
             return renderEmptyElement($xeTable);
         };
+        const renderRowExpandedVNs = () => {
+            const { treeConfig } = props;
+            const { expandColumn } = reactData;
+            const tableRowExpandedList = computeTableRowExpandedList.value;
+            const expandOpts = computeExpandOpts.value;
+            const { mode } = expandOpts;
+            if (mode !== 'fixed') {
+                return renderEmptyElement($xeTable);
+            }
+            const expandVNs = [
+                h('div', {
+                    key: 'repY',
+                    ref: refRowExpandYSpaceElem
+                })
+            ];
+            if (expandColumn) {
+                tableRowExpandedList.forEach((row) => {
+                    const expandOpts = computeExpandOpts.value;
+                    const { height: expandHeight, padding } = expandOpts;
+                    const { fullAllDataRowIdData } = internalData;
+                    const treeOpts = computeTreeOpts.value;
+                    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
+                            }],
+                        rowid,
+                        style: cellStyle
+                    }, expandColumn.renderData(expandParams)));
+                });
+            }
+            return h('div', {
+                ref: refRowExpandElem,
+                class: 'vxe-table--row-expanded-wrapper'
+            }, expandVNs);
+        };
         const renderScrollX = () => {
             return h('div', {
                 key: 'vsx',
@@ -9211,12 +9409,15 @@ export default defineComponent({
         };
         const renderViewport = () => {
             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;
-            return h('div', {
-                ref: refTableViewportElem,
-                class: 'vxe-table--viewport-wrapper'
-            }, [
+            const leftFixedWidth = computeLeftFixedWidth.value;
+            const rightFixedWidth = computeRightFixedWidth.value;
+            const ons = {};
+            if (scrollYLoad || leftFixedWidth || rightFixedWidth) {
+                ons.onWheel = $xeTable.triggerBodyWheelEvent;
+            }
+            return h('div', Object.assign({ ref: refTableViewportElem, class: 'vxe-table--viewport-wrapper' }, ons), [
                 h('div', {
                     class: 'vxe-table--main-wrapper'
                 }, [
@@ -9255,7 +9456,8 @@ export default defineComponent({
                 }, [
                     leftList && leftList.length && overflowX ? renderFixed('left') : renderEmptyElement($xeTable),
                     rightList && rightList.length && overflowX ? renderFixed('right') : renderEmptyElement($xeTable)
-                ])
+                ]),
+                renderRowExpandedVNs()
             ]);
         };
         const renderBody = () => {
@@ -9699,26 +9901,9 @@ export default defineComponent({
             tablePrivateMethods.preventEvent(null, 'deactivated', { $table: $xeTable });
         });
         onMounted(() => {
-            const { rowHeightStore } = reactData;
-            const varEl = refVarElem.value;
             const columnOpts = computeColumnOpts.value;
             const rowOpts = computeRowOpts.value;
             const customOpts = computeCustomOpts.value;
-            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();
             }

package/es/table/style.css

@@ -3042,6 +3042,32 @@
   flex-direction: row;
   align-items: center;
 }
+.vxe-table--render-default .vxe-table--row-expanded-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  pointer-events: none;
+}
+.vxe-table--render-default .vxe-body--row-expanded-cell {
+  position: absolute;
+  z-index: 5;
+  top: 0;
+  left: 0;
+  width: 100%;
+  overflow: auto;
+  background-color: var(--vxe-ui-layout-background-color);
+  pointer-events: all;
+}
+.vxe-table--render-default .vxe-body--row-expanded-cell.is--padding {
+  padding: var(--vxe-ui-table-expand-padding-default);
+}
+.vxe-table--render-default .vxe-body--row-expanded-place-column {
+  border-bottom: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
+  border-right: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
+}
 .vxe-table--render-default .vxe-table--expanded {
   cursor: pointer;
 }