vxe-table 4.10.14 → 4.10.15

package/es/table/src/body.js

@@ -21,7 +21,7 @@ export default defineComponent({
     setup(props) {
         const $xeTable = inject('$xeTable', {});
         const { xID, props: tableProps, context: tableContext, reactData: tableReactData, internalData: tableInternalData } = $xeTable;
-        const { computeEditOpts, computeMouseOpts, computeAreaOpts, computeDefaultRowHeight, computeEmptyOpts, computeTooltipOpts, computeRadioOpts, computeExpandOpts, computeTreeOpts, computeCheckboxOpts, computeCellOpts, computeValidOpts, computeRowOpts, computeColumnOpts, computeRowDragOpts, computeColumnDragOpts, computeLeftFixedWidth, computeRightFixedWidth, computeResizableOpts } = $xeTable.getComputeMaps();
+        const { computeEditOpts, computeMouseOpts, computeAreaOpts, computeDefaultRowHeight, computeEmptyOpts, computeTooltipOpts, computeRadioOpts, computeExpandOpts, computeTreeOpts, computeCheckboxOpts, computeCellOpts, computeValidOpts, computeRowOpts, computeColumnOpts, computeRowDragOpts, computeColumnDragOpts, computeResizableOpts } = $xeTable.getComputeMaps();
         const refElem = ref();
         const refBodyScroll = ref();
         const refBodyTable = ref();
@@ -379,7 +379,7 @@ export default defineComponent({
         };
         const renderRows = (fixedType, isOptimizeMode, tableData, tableColumn) => {
             const { stripe, rowKey, highlightHoverRow, rowClassName, rowStyle, editConfig, treeConfig } = tableProps;
-            const { hasFixedColumn, treeExpandedMaps, isColLoading, scrollXLoad, scrollYLoad, isAllOverflow, rowExpandedMaps, expandColumn, selectRadioRow, pendingRowMaps, isDragColMove } = tableReactData;
+            const { hasFixedColumn, treeExpandedMaps, isColLoading, scrollXLoad, scrollYLoad, isAllOverflow, rowExpandedMaps, expandColumn, selectRadioRow, pendingRowMaps, isDragColMove, rowExpandHeightFlag } = tableReactData;
             const { fullAllDataRowIdData } = tableInternalData;
             const checkboxOpts = computeCheckboxOpts.value;
             const radioOpts = computeRadioOpts.value;
@@ -412,19 +412,19 @@ export default defineComponent({
                     };
                 }
                 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, seq, rowid, fixed: fixedType, type: renderType, level: rowLevel, row, rowIndex, $rowIndex, _rowIndex };
                 // 行是否被展开
@@ -472,39 +472,57 @@ export default defineComponent({
                 // 如果行被展开了
                 if (isExpandRow) {
                     const expandOpts = computeExpandOpts.value;
-                    const { height: expandHeight, padding } = expandOpts;
-                    const cellStyle = {};
-                    if (expandHeight) {
-                        cellStyle.height = `${expandHeight}px`;
-                    }
-                    if (treeConfig) {
-                        cellStyle.paddingLeft = `${(rowLevel * treeOpts.indent) + 30}px`;
+                    const { height: expandHeight, padding, mode: expandMode } = expandOpts;
+                    if (expandMode === 'fixed') {
+                        rows.push(h('tr', {
+                            class: 'vxe-body--row-expanded-place',
+                            key: `expand_${rowid}`,
+                            rowid
+                        }, [
+                            h('td', {
+                                class: 'vxe-body--row-expanded-place-column',
+                                colspan: tableColumn.length,
+                                style: {
+                                    height: `${rowExpandHeightFlag ? (rowRest.expandHeight || expandHeight) : 0}px`
+                                }
+                            })
+                        ]));
                     }
-                    const { showOverflow } = expandColumn;
-                    const hasEllipsis = (XEUtils.isUndefined(showOverflow) || XEUtils.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', Object.assign({ class: ['vxe-body--expanded-row', {
-                                'is--padding': padding
-                            }], key: `expand_${rowid}`, style: rowStyle ? (XEUtils.isFunction(rowStyle) ? rowStyle(expandParams) : rowStyle) : null }, trOn), [
-                        h('td', {
-                            class: {
-                                'vxe-body--expanded-column': 1,
-                                'fixed--hidden': fixedType && !hasFixedColumn,
-                                'col--ellipsis': hasEllipsis
-                            },
-                            colspan: tableColumn.length
+                    else {
+                        const cellStyle = {};
+                        if (expandHeight) {
+                            cellStyle.height = `${expandHeight}px`;
+                        }
+                        if (treeConfig) {
+                            cellStyle.paddingLeft = `${(rowLevel * treeOpts.indent) + 30}px`;
+                        }
+                        const { showOverflow } = expandColumn;
+                        const hasEllipsis = (XEUtils.isUndefined(showOverflow) || XEUtils.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('div', {
-                                class: {
-                                    'vxe-body--expanded-cell': 1,
-                                    'is--ellipsis': expandHeight
-                                },
-                                style: cellStyle
+                            h('td', {
+                                class: ['vxe-body--expanded-column', {
+                                        'fixed--hidden': fixedType && !hasFixedColumn,
+                                        'col--ellipsis': hasEllipsis
+                                    }],
+                                colspan: tableColumn.length
                             }, [
-                                expandColumn.renderData(expandParams)
+                                h('div', {
+                                    class: ['vxe-body--expanded-cell', {
+                                            'is--ellipsis': expandHeight
+                                        }],
+                                    style: cellStyle
+                                }, [
+                                    expandColumn.renderData(expandParams)
+                                ])
                             ])
-                        ])
-                    ]));
+                        ]));
+                    }
                 }
                 // 如果是树形表格
                 if (isExpandTree) {
@@ -551,14 +569,13 @@ export default defineComponent({
             const emptyOpts = computeEmptyOpts.value;
             const mouseOpts = computeMouseOpts.value;
             const rowDragOpts = computeRowDragOpts.value;
-            const leftFixedWidth = computeLeftFixedWidth.value;
-            const rightFixedWidth = computeRightFixedWidth.value;
+            const expandOpts = computeExpandOpts.value;
             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 {
@@ -639,9 +656,6 @@ export default defineComponent({
                     $xeTable.triggerBodyScrollEvent(evnt, fixedType);
                 }
             };
-            if (scrollYLoad || leftFixedWidth || rightFixedWidth) {
-                ons.onWheel = $xeTable.triggerBodyWheelEvent;
-            }
             return h('div', {
                 ref: refElem,
                 class: ['vxe-table--body-wrapper', fixedType ? `fixed-${fixedType}--wrapper` : 'body--wrapper'],