vxe-table 3.12.15 → 3.12.17

package/es/table/module/edit/mixin.js

@@ -5,6 +5,21 @@ import { getCellValue, setCellValue, getRowid } from '../../src/util';
 import { browse, removeClass, addClass } from '../../../ui/src/dom';
 import { warnLog, errLog } from '../../../ui/src/log';
 const { getConfig, renderer, getI18n } = 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) {
@@ -14,6 +29,21 @@ 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, afterFullData, fullDataRowIdData, fullAllDataRowIdData, treeOpts } = _vm;
     const { rowField, parentField, mapChildrenField } = treeOpts;
@@ -37,7 +67,7 @@ function insertTreeRow(_vm, newRecords, isAppend) {
             }
             parentChilds[funcName](item);
             mapChilds[funcName](item);
-            const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, $index: -1, treeIndex: -1, items: parentChilds, parent: parentRow, level: parentLevel + 1, height: 0, resizeHeight: 0, oTop: 0 };
+            const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, $index: -1, treeIndex: -1, items: parentChilds, parent: parentRow, level: parentLevel + 1, height: 0, resizeHeight: 0, oTop: 0, expandHeight: 0 };
             fullDataRowIdData[rowid] = rest;
             fullAllDataRowIdData[rowid] = rest;
         }
@@ -49,7 +79,7 @@ function insertTreeRow(_vm, newRecords, isAppend) {
             }
             afterFullData[funcName](item);
             tableFullTreeData[funcName](item);
-            const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, $index: -1, treeIndex: -1, items: tableFullTreeData, parent: null, level: 0, height: 0, resizeHeight: 0, oTop: 0 };
+            const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, $index: -1, treeIndex: -1, items: tableFullTreeData, parent: null, level: 0, height: 0, resizeHeight: 0, oTop: 0, expandHeight: 0 };
             fullDataRowIdData[rowid] = rest;
             fullAllDataRowIdData[rowid] = rest;
         }
@@ -77,7 +107,7 @@ function handleInsertRowAt($xeTable, records, targetRow, isInsertNextRow) {
         else {
             newRecords.forEach(item => {
                 const rowid = getRowid($xeTable, item);
-                const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, $index: -1, treeIndex: -1, items: afterFullData, parent: null, level: 0, height: 0, resizeHeight: 0, oTop: 0 };
+                const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, $index: -1, treeIndex: -1, items: afterFullData, parent: null, level: 0, height: 0, resizeHeight: 0, oTop: 0, expandHeight: 0 };
                 fullDataRowIdData[rowid] = rest;
                 fullAllDataRowIdData[rowid] = rest;
                 afterFullData.unshift(item);
@@ -101,7 +131,7 @@ function handleInsertRowAt($xeTable, records, targetRow, isInsertNextRow) {
             else {
                 newRecords.forEach(item => {
                     const rowid = getRowid($xeTable, item);
-                    const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, $index: -1, treeIndex: -1, items: afterFullData, parent: null, level: 0, height: 0, resizeHeight: 0, oTop: 0 };
+                    const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, $index: -1, treeIndex: -1, items: afterFullData, parent: null, level: 0, height: 0, resizeHeight: 0, oTop: 0, expandHeight: 0 };
                     fullDataRowIdData[rowid] = rest;
                     fullAllDataRowIdData[rowid] = rest;
                     afterFullData.push(item);
@@ -142,7 +172,7 @@ function handleInsertRowAt($xeTable, records, targetRow, isInsertNextRow) {
                             targetIndex = targetIndex + 1;
                         }
                         parentMapChilds.splice(targetIndex, 0, item);
-                        const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, $index: -1, treeIndex: -1, items: parentMapChilds, parent: parentRow, level: parentLevel + 1, height: 0, resizeHeight: 0, oTop: 0 };
+                        const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, $index: -1, treeIndex: -1, items: parentMapChilds, parent: parentRow, level: parentLevel + 1, height: 0, resizeHeight: 0, oTop: 0, expandHeight: 0 };
                         fullDataRowIdData[rowid] = rest;
                         fullAllDataRowIdData[rowid] = rest;
                     });
@@ -250,6 +280,178 @@ function handleInsertChildRowAt($xeTable, records, parentRow, targetRow, isInser
     }
     return Promise.resolve({ row: null, rows: [] });
 }
+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' || 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(Object.assign(Object.assign({}, 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(Object.assign(Object.assign({}, 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 = XEUtils.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();
+}
 export default {
     methods: {
         /**
@@ -493,12 +695,13 @@ export default {
          * 如果是树表格，子节点更改状态不会影响父节点的更新状态
          */
         _getUpdateRecords() {
+            const $xeTable = this;
             const { keepSource, tableFullData, isUpdateByRow, treeConfig, treeOpts, editStore } = this;
             if (keepSource) {
                 const { actived } = editStore;
                 const { row, column } = actived;
                 if (row || column) {
-                    this._syncActivedCell();
+                    syncActivedCell($xeTable);
                 }
                 if (treeConfig) {
                     return XEUtils.filterTree(tableFullData, row => isUpdateByRow(row), treeOpts);
@@ -511,81 +714,8 @@ export default {
          * 处理激活编辑
          */
         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(Object.assign(Object.assign({}, 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(Object.assign(Object.assign({}, 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
@@ -594,32 +724,14 @@ export default {
             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 (process.env.NODE_ENV === 'development') {
@@ -632,53 +744,15 @@ export default {
          * 清除激活的编辑
          */
         _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' || 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 (process.env.NODE_ENV === 'development') {
@@ -782,11 +856,12 @@ export default {
          * 激活行编辑
          */
         _setEditRow(row, fieldOrColumn) {
+            const $xeTable = this;
             let column = XEUtils.find(this.visibleColumn, column => isEnableConf(column.editRender));
             if (fieldOrColumn) {
                 column = XEUtils.isString(fieldOrColumn) ? this.getColumnByField(fieldOrColumn) : fieldOrColumn;
             }
-            return this.setEditCell(row, column);
+            return handleEditCell($xeTable, row, column, false);
         },
         _setActiveCell(row, fieldOrColumn) {
             if (process.env.NODE_ENV === 'development') {
@@ -799,18 +874,8 @@ export default {
          * 激活单元格编辑
          */
         _setEditCell(row, fieldOrColumn) {
-            const { editConfig } = this;
-            const column = XEUtils.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 有效，选中单元格
@@ -832,6 +897,7 @@ export default {
          * 处理选中源
          */
         handleSelected(params, evnt) {
+            const $xeTable = this;
             const { mouseConfig, mouseOpts, editOpts, editStore } = this;
             const { actived, selected } = editStore;
             const { row, column } = params;
@@ -839,7 +905,7 @@ export default {
             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);

package/es/table/src/body.js

@@ -381,7 +381,7 @@ function renderRows(h, _vm, fixedType, isOptimizeMode, tableData, tableColumn) {
     const tableReactData = $xeTable;
     const tableInternalData = $xeTable;
     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 = $xeTable.computeCheckboxOpts;
     const radioOpts = $xeTable.computeRadioOpts;
@@ -414,19 +414,19 @@ 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, seq, rowid, fixed: fixedType, type: renderType, level: rowLevel, row, rowIndex, $rowIndex, _rowIndex };
         // 行是否被展开
@@ -493,46 +493,63 @@ function renderRows(h, _vm, fixedType, isOptimizeMode, tableData, tableColumn) {
         // 如果行被展开了
         if (isExpandRow) {
             const expandOpts = $xeTable.computeExpandOpts;
-            const { height: expandHeight, padding } = expandOpts;
-            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}`,
-                style: rowStyle ? (XEUtils.isFunction(rowStyle) ? rowStyle(expandParams) : rowStyle) : undefined,
-                on: trOn
-            }, [
-                h('td', {
-                    class: {
-                        'vxe-body--expanded-column': 1,
-                        'fixed--hidden': fixedType && !hasFixedColumn,
-                        'col--ellipsis': hasEllipsis
-                    },
+            const { height: expandHeight, padding, mode: expandMode } = expandOpts;
+            if (expandMode === 'fixed') {
+                rows.push(h('tr', {
+                    class: 'vxe-body--row-expanded-place',
+                    key: `expand_${rowid}`,
                     attrs: {
-                        colspan: tableColumn.length
+                        rowid
                     }
                 }, [
-                    h('div', {
-                        class: {
-                            'vxe-body--expanded-cell': 1,
-                            'is--ellipsis': expandHeight
+                    h('td', {
+                        class: 'vxe-body--row-expanded-place-column',
+                        attrs: {
+                            colspan: tableColumn.length
                         },
-                        style: cellStyle
+                        style: {
+                            height: `${rowExpandHeightFlag ? (rowRest.expandHeight || expandHeight) : 0}px`
+                        }
+                    })
+                ]));
+            }
+            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('td', {
+                        class: ['vxe-body--expanded-column', {
+                                'fixed--hidden': fixedType && !hasFixedColumn,
+                                'col--ellipsis': hasEllipsis
+                            }],
+                        attrs: {
+                            colspan: tableColumn.length
+                        }
                     }, [
-                        expandColumn.renderData(h, expandParams)
+                        h('div', {
+                            class: ['vxe-body--expanded-cell', {
+                                    'is--ellipsis': expandHeight
+                                }],
+                            style: cellStyle
+                        }, [
+                            expandColumn.renderData(h, expandParams)
+                        ])
                     ])
-                ])
-            ]));
+                ]));
+            }
         }
         // 如果是树形表格
         if (isExpandTree) {
@@ -600,14 +617,13 @@ export default {
         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 {
@@ -687,9 +703,6 @@ export default {
                 $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'],