vxe-table 4.10.13 → 4.10.15-beta.0

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

@@ -38,7 +38,7 @@ hooks.add('tableEditModule', {
                 }
             }
         };
-        function syncActivedCell() {
+        const syncActivedCell = () => {
             const { editStore, tableColumn } = reactData;
             const editOpts = computeEditOpts.value;
             const { actived } = editStore;
@@ -51,8 +51,8 @@ hooks.add('tableEditModule', {
                     setEditColumnModel(row, column);
                 }
             }
-        }
-        function insertTreeRow(newRecords, isAppend) {
+        };
+        const insertTreeRow = (newRecords, isAppend) => {
             const { tableFullTreeData, afterFullData, fullDataRowIdData, fullAllDataRowIdData } = internalData;
             const treeOpts = computeTreeOpts.value;
             const { rowField, parentField, mapChildrenField } = treeOpts;
@@ -76,7 +76,7 @@ hooks.add('tableEditModule', {
                     }
                     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;
                 }
@@ -88,12 +88,12 @@ hooks.add('tableEditModule', {
                     }
                     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;
                 }
             });
-        }
+        };
         const handleInsertRowAt = (records, targetRow, isInsertNextRow) => {
             const { treeConfig } = props;
             const { mergeList, editStore } = reactData;
@@ -113,7 +113,7 @@ hooks.add('tableEditModule', {
                 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);
@@ -137,7 +137,7 @@ hooks.add('tableEditModule', {
                     else {
                         newRecords.forEach(item => {
                             const rowid = getRowid($xeTable, item);
-                            const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, treeIndex: -1, $index: -1, items: afterFullData, parent: null, level: 0, height: 0, resizeHeight: 0, oTop: 0 };
+                            const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, treeIndex: -1, $index: -1, items: afterFullData, parent: null, level: 0, height: 0, resizeHeight: 0, oTop: 0, expandHeight: 0 };
                             fullDataRowIdData[rowid] = rest;
                             fullAllDataRowIdData[rowid] = rest;
                             afterFullData.push(item);
@@ -178,7 +178,7 @@ hooks.add('tableEditModule', {
                                     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;
                             });
@@ -325,6 +325,132 @@ hooks.add('tableEditModule', {
                 }
             });
         };
+        const handleEditActive = (params, evnt, isFocus) => {
+            const { editConfig, mouseConfig } = props;
+            const { editStore, tableColumn } = reactData;
+            const editOpts = computeEditOpts.value;
+            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(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;
+                            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 nextTick();
+        };
+        const handleEditCell = (row, fieldOrColumn, isPos) => {
+            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({
+                            row,
+                            rowIndex: $xeTable.getRowIndex(row),
+                            column,
+                            columnIndex: $xeTable.getColumnIndex(column),
+                            cell,
+                            $table: $xeTable
+                        }, null, false);
+                        internalData._lastCallTime = Date.now();
+                    }
+                    return nextTick();
+                });
+            }
+            return nextTick();
+        };
         editMethods = {
             /**
              * 往表格中插入临时数据
@@ -658,7 +784,7 @@ hooks.add('tableEditModule', {
                 if (fieldOrColumn) {
                     column = XEUtils.isString(fieldOrColumn) ? $xeTable.getColumnByField(fieldOrColumn) : fieldOrColumn;
                 }
-                return $xeTable.setEditCell(row, column);
+                return handleEditCell(row, column, false);
             },
             setActiveCell(row, fieldOrColumn) {
                 if (process.env.NODE_ENV === 'development') {
@@ -671,26 +797,7 @@ hooks.add('tableEditModule', {
              * 激活单元格编辑
              */
             setEditCell(row, fieldOrColumn) {
-                const { editConfig } = props;
-                const column = XEUtils.isString(fieldOrColumn) ? $xeTable.getColumnByField(fieldOrColumn) : fieldOrColumn;
-                if (row && column && isEnableConf(editConfig) && isEnableConf(column.editRender)) {
-                    return $xeTable.scrollToRow(row, column).then(() => {
-                        const cell = $xeTable.getCellElement(row, column);
-                        if (cell) {
-                            editPrivateMethods.handleEdit({
-                                row,
-                                rowIndex: $xeTable.getRowIndex(row),
-                                column,
-                                columnIndex: $xeTable.getColumnIndex(column),
-                                cell,
-                                $table: $xeTable
-                            });
-                            internalData._lastCallTime = Date.now();
-                        }
-                        return nextTick();
-                    });
-                }
-                return nextTick();
+                return handleEditCell(row, fieldOrColumn, true);
             },
             /**
              * 只对 trigger=dblclick 有效，选中单元格
@@ -721,104 +828,7 @@ hooks.add('tableEditModule', {
              * 处理激活编辑
              */
             handleEdit(params, evnt) {
-                const { editConfig, mouseConfig } = props;
-                const { editStore, tableColumn } = reactData;
-                const editOpts = computeEditOpts.value;
-                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) {
-                                    editMethods.clearSelected();
-                                    if ($xeTable.clearCellAreas) {
-                                        $xeTable.clearCellAreas();
-                                        $xeTable.clearCopyCellArea();
-                                    }
-                                }
-                                $xeTable.closeTooltip();
-                                if (actived.column) {
-                                    handleClearEdit(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;
-                                nextTick(() => {
-                                    editPrivateMethods.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) {
-                                editMethods.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;
-                            setTimeout(() => {
-                                editPrivateMethods.handleFocus(params, evnt);
-                            });
-                        }
-                        focused.column = null;
-                        focused.row = null;
-                        $xeTable.focus();
-                    }
-                }
-                return nextTick();
+                return handleEditActive(params, evnt, true);
             },
             /**
              * @deprecated

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'],