vxe-table 4.12.0-beta.8 → 4.12.0

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

@@ -320,6 +320,7 @@ hooks.add('tableEditModule', {
             return nextTick().then(() => $xeTable.updateCellAreas());
         };
         const handleEditActive = (params, evnt, isFocus, isPos) => {
+            const $xeGrid = $xeTable.xeGrid;
             const { editConfig, mouseConfig } = props;
             const { editStore, tableColumn } = reactData;
             const editOpts = computeEditOpts.value;
@@ -336,7 +337,7 @@ hooks.add('tableEditModule', {
                     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 (!beforeEditMethod || beforeEditMethod(Object.assign(Object.assign({}, params), { $table: $xeTable, $grid: $xeGrid }))) {
                             if (mouseConfig) {
                                 $xeTable.clearSelected();
                                 if ($xeTable.clearCellAreas) {
@@ -365,7 +366,7 @@ hooks.add('tableEditModule', {
                                     $xeTable.handleFocus(params, evnt);
                                 }
                                 if (afterEditMethod) {
-                                    afterEditMethod(Object.assign(Object.assign({}, params), { $table: $xeTable, $grid: $xeTable.xegrid }));
+                                    afterEditMethod(Object.assign(Object.assign({}, params), { $table: $xeTable, $grid: $xeGrid }));
                                 }
                             });
                         }
@@ -485,15 +486,14 @@ hooks.add('tableEditModule', {
              */
             remove(rows) {
                 const { treeConfig } = props;
-                const { mergeList, editStore, selectCheckboxMaps } = reactData;
-                const { tableFullTreeData, afterFullData, tableFullData } = internalData;
+                const { mergeList, editStore } = reactData;
+                const { tableFullTreeData, selectCheckboxMaps, afterFullData, tableFullData, pendingRowMaps } = internalData;
                 const checkboxOpts = computeCheckboxOpts.value;
                 const treeOpts = computeTreeOpts.value;
                 const { transform, mapChildrenField } = treeOpts;
                 const childrenField = treeOpts.children || treeOpts.childrenField;
                 const { actived, removeMaps } = editStore;
                 const insertDataRowMaps = Object.assign({}, editStore.insertMaps);
-                const pendingDataRowMaps = Object.assign({}, reactData.pendingRowMaps);
                 const { checkField } = checkboxOpts;
                 let delList = [];
                 if (!rows) {
@@ -511,14 +511,13 @@ hooks.add('tableEditModule', {
                 });
                 // 如果绑定了多选属性，则更新状态
                 if (!checkField) {
-                    const selectRowMaps = Object.assign({}, selectCheckboxMaps);
                     rows.forEach((row) => {
                         const rowid = getRowid($xeTable, row);
-                        if (selectRowMaps[rowid]) {
-                            delete selectRowMaps[rowid];
+                        if (selectCheckboxMaps[rowid]) {
+                            delete selectCheckboxMaps[rowid];
                         }
                     });
-                    reactData.selectCheckboxMaps = selectRowMaps;
+                    reactData.updateCheckboxFlag++;
                 }
                 // 从数据源中移除
                 if (tableFullData === rows) {
@@ -581,12 +580,12 @@ hooks.add('tableEditModule', {
                     if (insertDataRowMaps[rowid]) {
                         delete insertDataRowMaps[rowid];
                     }
-                    if (pendingDataRowMaps[rowid]) {
-                        delete pendingDataRowMaps[rowid];
+                    if (pendingRowMaps[rowid]) {
+                        delete pendingRowMaps[rowid];
                     }
                 });
                 editStore.insertMaps = insertDataRowMaps;
-                reactData.pendingRowMaps = pendingDataRowMaps;
+                reactData.pendingRowFlag++;
                 $xeTable.updateFooter();
                 $xeTable.cacheRowMap(false);
                 $xeTable.handleTableData(treeConfig && transform);

package/es/table/module/export/export-panel.js

@@ -139,6 +139,7 @@ export default defineComponent({
             }
         };
         const renderVN = () => {
+            const $xeGrid = $xeTable.xeGrid;
             const { defaultOptions, storeData } = props;
             const { isAll: isAllChecked, isIndeterminate: isAllIndeterminate } = reactData;
             const { hasTree, hasMerge, isPrint, hasColgroup, columns } = storeData;
@@ -216,7 +217,7 @@ export default defineComponent({
                     default: () => {
                         const params = {
                             $table: $xeTable,
-                            $grid: $xeTable.xegrid,
+                            $grid: $xeGrid,
                             options: defaultOptions,
                             columns,
                             params: defaultOptions.params
@@ -460,7 +461,7 @@ export default defineComponent({
                     footer() {
                         const params = {
                             $table: $xeTable,
-                            $grid: $xeTable.xegrid,
+                            $grid: $xeGrid,
                             options: defaultOptions,
                             columns,
                             params: defaultOptions.params

package/es/table/module/export/import-panel.js

@@ -76,6 +76,7 @@ export default defineComponent({
             });
         };
         const renderVN = () => {
+            const $xeGrid = $xeTable.xeGrid;
             const { defaultOptions, storeData } = props;
             const selectName = computeSelectName.value;
             const hasFile = computeHasFile.value;
@@ -110,7 +111,7 @@ export default defineComponent({
                     default: () => {
                         const params = {
                             $table: $xeTable,
-                            $grid: $xeTable.xegrid,
+                            $grid: $xeGrid,
                             options: defaultOptions,
                             params: defaultOptions.params
                         };
@@ -186,7 +187,7 @@ export default defineComponent({
                     footer() {
                         const params = {
                             $table: $xeTable,
-                            $grid: $xeTable.xegrid,
+                            $grid: $xeGrid,
                             options: defaultOptions,
                             params: defaultOptions.params
                         };

package/es/table/module/filter/panel.js

@@ -84,14 +84,24 @@ export default defineComponent({
             if (filterSlot) {
                 return [
                     h('div', {
-                        class: 'vxe-table--filter-template'
+                        class: 'vxe-table--filter-template',
+                        style: maxHeight
+                            ? {
+                                maxHeight: `${maxHeight}px`
+                            }
+                            : {}
                     }, $xeTable.callSlot(filterSlot, params))
                 ];
             }
             else if (rtFilter) {
                 return [
                     h('div', {
-                        class: 'vxe-table--filter-template'
+                        class: 'vxe-table--filter-template',
+                        style: maxHeight
+                            ? {
+                                maxHeight: `${maxHeight}px`
+                            }
+                            : {}
                     }, getSlotVNs(rtFilter(filterRender, params)))
                 ];
             }

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

@@ -28,7 +28,7 @@ hooks.add('tableKeyboardModule', {
     setupTable($xeTable) {
         const { props, reactData, internalData } = $xeTable;
         const { refElem } = $xeTable.getRefMaps();
-        const { computeEditOpts, computeCheckboxOpts, computeMouseOpts, computeTreeOpts, computeRowOpts, computeCellOpts, computeDefaultRowHeight } = $xeTable.getComputeMaps();
+        const { computeEditOpts, computeCheckboxOpts, computeMouseOpts, computeTreeOpts, computeRowOpts, computeColumnOpts, computeCellOpts, computeDefaultRowHeight, computeCurrentRowOpts, computeCurrentColumnOpts } = $xeTable.getComputeMaps();
         function getCheckboxRangeRows(evnt, params, targetTrElem, trRect, offsetClientTop, moveRange) {
             const { showOverflow } = props;
             const { fullAllDataRowIdData, isResizeCellHeight } = internalData;
@@ -281,12 +281,48 @@ hooks.add('tableKeyboardModule', {
                 }
             }
         };
+        const handleMoveSelected = (evnt, args, isLeftArrow, isUpArrow, isRightArrow, isDwArrow) => {
+            const { afterFullData, visibleColumn } = internalData;
+            const params = Object.assign({}, args);
+            const _rowIndex = $xeTable.getVTRowIndex(params.row);
+            const _columnIndex = $xeTable.getVTColumnIndex(params.column);
+            evnt.preventDefault();
+            if (isUpArrow && _rowIndex > 0) {
+                // 移动到上一行
+                params.rowIndex = _rowIndex - 1;
+                params.row = afterFullData[params.rowIndex];
+            }
+            else if (isDwArrow && _rowIndex < afterFullData.length - 1) {
+                // 移动到下一行
+                params.rowIndex = _rowIndex + 1;
+                params.row = afterFullData[params.rowIndex];
+            }
+            else if (isLeftArrow && _columnIndex) {
+                // 移动到左侧单元格
+                params.columnIndex = _columnIndex - 1;
+                params.column = visibleColumn[params.columnIndex];
+            }
+            else if (isRightArrow && _columnIndex < visibleColumn.length - 1) {
+                // 移动到右侧单元格
+                params.columnIndex = _columnIndex + 1;
+                params.column = visibleColumn[params.columnIndex];
+            }
+            $xeTable.scrollToRow(params.row, params.column).then(() => {
+                params.cell = $xeTable.getCellElement(params.row, params.column);
+                $xeTable.handleSelected(params, evnt);
+            });
+            return params;
+        };
         const keyboardMethods = {
             // 处理 Tab 键移动
             moveTabSelected(args, isLeft, evnt) {
                 const { editConfig } = props;
                 const { afterFullData, visibleColumn } = internalData;
                 const editOpts = computeEditOpts.value;
+                const rowOpts = computeRowOpts.value;
+                const currentRowOpts = computeCurrentRowOpts.value;
+                const columnOpts = computeColumnOpts.value;
+                const currentColumnOpts = computeCurrentColumnOpts.value;
                 let targetRow;
                 let targetRowIndex;
                 let targetColumnIndex;
@@ -333,6 +369,12 @@ hooks.add('tableKeyboardModule', {
                     params.columnIndex = targetColumnIndex;
                     params.column = targetColumn;
                     params.cell = $xeTable.getCellElement(params.row, params.column);
+                    if (rowOpts.isCurrent && currentRowOpts.isFollowSelected) {
+                        $xeTable.triggerCurrentRowEvent(evnt, params);
+                    }
+                    if (columnOpts.isCurrent && currentColumnOpts.isFollowSelected) {
+                        $xeTable.triggerCurrentColumnEvent(evnt, params);
+                    }
                     if (editConfig) {
                         if (editOpts.trigger === 'click' || editOpts.trigger === 'dblclick') {
                             if (editOpts.mode === 'row') {
@@ -340,13 +382,17 @@ hooks.add('tableKeyboardModule', {
                             }
                             else {
                                 $xeTable.scrollToRow(params.row, params.column)
-                                    .then(() => $xeTable.handleSelected(params, evnt));
+                                    .then(() => {
+                                    $xeTable.handleSelected(params, evnt);
+                                });
                             }
                         }
                     }
                     else {
                         $xeTable.scrollToRow(params.row, params.column)
-                            .then(() => $xeTable.handleSelected(params, evnt));
+                            .then(() => {
+                            $xeTable.handleSelected(params, evnt);
+                        });
                     }
                 }
             },
@@ -358,7 +404,6 @@ hooks.add('tableKeyboardModule', {
                 const treeOpts = computeTreeOpts.value;
                 const childrenField = treeOpts.children || treeOpts.childrenField;
                 let targetRow;
-                evnt.preventDefault();
                 if (currentRow) {
                     if (treeConfig) {
                         const { index, items } = XEUtils.findTree(afterFullData, item => item === currentRow, { children: childrenField });
@@ -383,6 +428,7 @@ hooks.add('tableKeyboardModule', {
                     targetRow = afterFullData[0];
                 }
                 if (targetRow) {
+                    evnt.preventDefault();
                     const params = {
                         $table: $xeTable,
                         row: targetRow,
@@ -393,37 +439,66 @@ hooks.add('tableKeyboardModule', {
                         .then(() => $xeTable.triggerCurrentRowEvent(evnt, params));
                 }
             },
+            // 处理当前列方向键移动
+            moveCurrentColumn(isLeftArrow, isRightArrow, evnt) {
+                const { currentColumn } = reactData;
+                const { visibleColumn } = internalData;
+                let targetCol = null;
+                if (currentColumn) {
+                    const _columnIndex = $xeTable.getVTColumnIndex(currentColumn);
+                    if (isLeftArrow && _columnIndex > 0) {
+                        targetCol = visibleColumn[_columnIndex - 1];
+                    }
+                    else if (isRightArrow && _columnIndex < visibleColumn.length - 1) {
+                        targetCol = visibleColumn[_columnIndex + 1];
+                    }
+                }
+                else {
+                    targetCol = visibleColumn[0];
+                }
+                if (targetCol) {
+                    evnt.preventDefault();
+                    const params = {
+                        $table: $xeTable,
+                        column: targetCol,
+                        columnIndex: $xeTable.getColumnIndex(targetCol),
+                        $columnIndex: $xeTable.getVMColumnIndex(targetCol)
+                    };
+                    $xeTable.scrollToColumn(targetCol)
+                        .then(() => $xeTable.triggerCurrentColumnEvent(evnt, params));
+                }
+            },
             // 处理可编辑方向键移动
-            moveSelected(args, isLeftArrow, isUpArrow, isRightArrow, isDwArrow, evnt) {
-                const { afterFullData, visibleColumn } = internalData;
-                const params = Object.assign({}, args);
-                const _rowIndex = $xeTable.getVTRowIndex(params.row);
-                const _columnIndex = $xeTable.getVTColumnIndex(params.column);
-                evnt.preventDefault();
-                if (isUpArrow && _rowIndex > 0) {
-                    // 移动到上一行
-                    params.rowIndex = _rowIndex - 1;
-                    params.row = afterFullData[params.rowIndex];
+            moveArrowSelected(args, isLeftArrow, isUpArrow, isRightArrow, isDwArrow, evnt) {
+                const { highlightCurrentRow, highlightCurrentColumn } = props;
+                const rowOpts = computeRowOpts.value;
+                const columnOpts = computeColumnOpts.value;
+                handleMoveSelected(evnt, args, isLeftArrow, isUpArrow, isRightArrow, isDwArrow);
+                // 当前行按键上下移动
+                if ((isUpArrow || isDwArrow) && (rowOpts.isCurrent || highlightCurrentRow)) {
+                    $xeTable.moveCurrentRow(isUpArrow, isDwArrow, evnt);
                 }
-                else if (isDwArrow && _rowIndex < afterFullData.length - 1) {
-                    // 移动到下一行
-                    params.rowIndex = _rowIndex + 1;
-                    params.row = afterFullData[params.rowIndex];
+                // 当前行按键左右移动
+                if ((isLeftArrow || isRightArrow) && (columnOpts.isCurrent || highlightCurrentColumn)) {
+                    $xeTable.moveCurrentColumn(isLeftArrow, isRightArrow, evnt);
                 }
-                else if (isLeftArrow && _columnIndex) {
-                    // 移动到左侧单元格
-                    params.columnIndex = _columnIndex - 1;
-                    params.column = visibleColumn[params.columnIndex];
+            },
+            moveEnterSelected(args, isLeftArrow, isUpArrow, isRightArrow, isDwArrow, evnt) {
+                const rowOpts = computeRowOpts.value;
+                const currentRowOpts = computeCurrentRowOpts.value;
+                const columnOpts = computeColumnOpts.value;
+                const currentColumnOpts = computeCurrentColumnOpts.value;
+                const params = handleMoveSelected(evnt, args, isLeftArrow, isUpArrow, isRightArrow, isDwArrow);
+                if ((rowOpts.isCurrent && currentRowOpts.isFollowSelected)) {
+                    $xeTable.triggerCurrentRowEvent(evnt, params);
                 }
-                else if (isRightArrow && _columnIndex < visibleColumn.length - 1) {
-                    // 移动到右侧单元格
-                    params.columnIndex = _columnIndex + 1;
-                    params.column = visibleColumn[params.columnIndex];
+                if (columnOpts.isCurrent && currentColumnOpts.isFollowSelected) {
+                    $xeTable.triggerCurrentColumnEvent(evnt, params);
                 }
-                $xeTable.scrollToRow(params.row, params.column).then(() => {
-                    params.cell = $xeTable.getCellElement(params.row, params.column);
-                    $xeTable.handleSelected(params, evnt);
-                });
+            },
+            // 已废弃，待删除
+            moveSelected(args, isLeftArrow, isUpArrow, isRightArrow, isDwArrow, evnt) {
+                handleMoveSelected(evnt, args, isLeftArrow, isUpArrow, isRightArrow, isDwArrow);
             },
             handleCellMousedownEvent
         };

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

@@ -280,10 +280,11 @@ hooks.add('tableMenuModule', {
              * 快捷菜单点击事件
              */
             ctxMenuLinkEvent(evnt, menu) {
+                const $xeGrid = $xeTable.xeGrid;
                 // 如果一级菜单有配置 code 则允许点击，否则不能点击
                 if (!menu.disabled && (menu.code || !menu.children || !menu.children.length)) {
                     const gMenuOpts = menus.get(menu.code);
-                    const params = Object.assign({}, internalData._currMenuParams, { menu, $table: $xeTable, $grid: $xeTable.xegrid, $event: evnt });
+                    const params = Object.assign({}, internalData._currMenuParams, { menu, $table: $xeTable, $grid: $xeGrid, $event: evnt });
                     const tmMethod = gMenuOpts ? (gMenuOpts.tableMenuMethod || gMenuOpts.menuMethod) : null;
                     if (tmMethod) {
                         tmMethod(params, evnt);

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

@@ -85,8 +85,8 @@ hooks.add('tableValidatorModule', {
         const beginValidate = (rows, cols, cb, isFull) => {
             const validRest = {};
             const { editRules, treeConfig } = props;
-            const { editStore, pendingRowMaps } = reactData;
-            const { afterFullData } = internalData;
+            const { editStore } = reactData;
+            const { afterFullData, pendingRowMaps } = internalData;
             const { removeMaps } = editStore;
             const treeOpts = computeTreeOpts.value;
             const childrenField = treeOpts.children || treeOpts.childrenField;
@@ -353,6 +353,7 @@ hooks.add('tableValidatorModule', {
              *  trigger=blur|change 触发方式（除非特殊场景，否则默认为空就行）
              */
             validCellRules(validType, row, column, val) {
+                const $xeGrid = $xeTable.xeGrid;
                 const { editRules } = props;
                 const { field } = column;
                 const errorRules = [];
@@ -375,7 +376,7 @@ hooks.add('tableValidatorModule', {
                                         columnIndex: $xeTable.getColumnIndex(column),
                                         field: column.field,
                                         $table: $xeTable,
-                                        $grid: $xeTable.xegrid
+                                        $grid: $xeGrid
                                     };
                                     let customValid;
                                     if (XEUtils.isString(validator)) {

package/es/table/render/index.js

@@ -5,7 +5,7 @@ import { getCellValue, setCellValue } from '../../table/src/util';
 import { getFuncText, formatText, isEmptyValue } from '../../ui/src/utils';
 import { getOnName, getModelEvent, getChangeEvent } from '../../ui/src/vn';
 import { errLog } from '../../ui/src/log';
-const { getConfig, renderer, getI18n } = VxeUI;
+const { getConfig, renderer, getI18n, getComponent } = VxeUI;
 const componentDefaultModelProp = 'modelValue';
 const defaultCompProps = {};
 function handleDefaultValue(value, defaultVal, initVal) {
@@ -29,7 +29,7 @@ function getOldComponentName(name) {
     return `vxe-${name.replace('$', '')}`;
 }
 function getDefaultComponent({ name }) {
-    return resolveComponent(name);
+    return getComponent(name);
 }
 /**
  * 已废弃
@@ -335,7 +335,7 @@ function oldEditRender(renderOpts, params) {
  */
 function oldButtonEditRender(renderOpts, params) {
     return [
-        h(resolveComponent('vxe-button'), Object.assign(Object.assign({}, getCellEditProps(renderOpts, params, null)), getComponentOns(renderOpts, params)))
+        h(getComponent('vxe-button'), Object.assign(Object.assign({}, getCellEditProps(renderOpts, params, null)), getComponentOns(renderOpts, params)))
     ];
 }
 /**

package/es/table/src/body.js

@@ -1,7 +1,7 @@
 import { defineComponent, TransitionGroup, h, ref, inject, nextTick, onMounted, onUnmounted } from 'vue';
 import XEUtils from 'xe-utils';
 import { VxeUI } from '../../ui';
-import { getOffsetSize, calcTreeLine, mergeBodyMethod, getRowid } from './util';
+import { getOffsetSize, calcTreeLine, mergeBodyMethod, getRowid, createHandleGetRowId } from './util';
 import { updateCellTitle, getPropClass } from '../../ui/src/dom';
 import { isEnableConf } from '../../ui/src/utils';
 import { getSlotVNs } from '../../ui/src/vn';
@@ -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, computeResizableOpts } = $xeTable.getComputeMaps();
+        const { computeEditOpts, computeMouseOpts, computeCellOffsetWidth, 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();
@@ -36,7 +36,7 @@ export default defineComponent({
             const { lastScrollTime, isDragResize } = tableReactData;
             return !!(isDragResize || (lastScrollTime && Date.now() < lastScrollTime + delayHover));
         };
-        const renderLine = (params, cellHeight) => {
+        const renderLine = (rowid, params, cellHeight) => {
             const { row, column } = params;
             const { afterFullData } = tableInternalData;
             const { treeConfig } = tableProps;
@@ -46,7 +46,6 @@ export default defineComponent({
             if (slots && slots.line) {
                 return $xeTable.callSlot(slots.line, params);
             }
-            const rowid = getRowid($xeTable, row);
             const rest = fullAllDataRowIdData[rowid];
             let rLevel = 0;
             let prevRow = null;
@@ -78,9 +77,10 @@ export default defineComponent({
          * 渲染列
          */
         const renderTdColumn = (seq, rowid, fixedType, isOptimizeMode, rowLevel, row, rowIndex, $rowIndex, _rowIndex, column, $columnIndex, columns, items) => {
-            const { fullAllDataRowIdData } = tableInternalData;
+            const $xeGrid = $xeTable.xeGrid;
+            const { fullAllDataRowIdData, fullColumnIdData, visibleColumn } = tableInternalData;
             const { columnKey, resizable: allResizable, showOverflow: allShowOverflow, border, height, cellClassName: allCellClassName, cellStyle, align: allAlign, spanMethod, mouseConfig, editConfig, editRules, tooltipConfig, padding: allPadding } = tableProps;
-            const { tableData, dragRow, overflowX, currentColumn, scrollXLoad, scrollYLoad, calcCellHeightFlag, resizeHeightFlag, mergeList, editStore, isAllOverflow, validErrorMaps } = tableReactData;
+            const { tableData, dragRow, overflowX, currentColumn, scrollXLoad, scrollYLoad, calcCellHeightFlag, resizeHeightFlag, resizeWidthFlag, mergeList, editStore, isAllOverflow, validErrorMaps } = tableReactData;
             const { afterFullData, scrollXStore, scrollYStore } = tableInternalData;
             const cellOpts = computeCellOpts.value;
             const validOpts = computeValidOpts.value;
@@ -97,19 +97,21 @@ export default defineComponent({
             const columnOpts = computeColumnOpts.value;
             const mouseOpts = computeMouseOpts.value;
             const areaOpts = computeAreaOpts.value;
+            const cellOffsetWidth = computeCellOffsetWidth.value;
             const { selectCellToRow } = areaOpts;
             const { type, cellRender, editRender, align, showOverflow, className, treeNode, rowResize, padding, verticalAlign, slots } = column;
             const { verticalAlign: allVerticalAlign } = cellOpts;
             const { actived } = editStore;
-            const rowRest = fullAllDataRowIdData[rowid];
+            const rowRest = fullAllDataRowIdData[rowid] || {};
             const colid = column.id;
+            const colRest = fullColumnIdData[colid] || {};
             const renderOpts = editRender || cellRender;
             const compConf = renderOpts ? renderer.get(renderOpts.name) : null;
             const compCellClassName = compConf ? (compConf.tableCellClassName || compConf.cellClassName) : null;
             const compCellStyle = compConf ? (compConf.tableCellStyle || compConf.cellStyle) : '';
             const showAllTip = tooltipOpts.showAll;
-            const columnIndex = $xeTable.getColumnIndex(column);
-            const _columnIndex = $xeTable.getVTColumnIndex(column);
+            const columnIndex = colRest.index;
+            const _columnIndex = colRest._index;
             const isEdit = isEnableConf(editRender);
             const resizeHeight = resizeHeightFlag ? rowRest.resizeHeight : 0;
             let fixedHiddenColumn = fixedType ? column.fixed !== fixedType : column.fixed && overflowX;
@@ -131,7 +133,7 @@ export default defineComponent({
             const tdAttrs = { colid };
             const cellParams = {
                 $table: $xeTable,
-                $grid: $xeTable.xegrid,
+                $grid: $xeGrid,
                 isEdit: false,
                 seq,
                 rowid,
@@ -263,6 +265,18 @@ export default defineComponent({
                 }
             }
             const tcStyle = {};
+            if (hasEllipsis && resizeWidthFlag) {
+                let tsColspan = tdAttrs.colspan || 0;
+                if (tsColspan > 1) {
+                    for (let index = 1; index < tsColspan; index++) {
+                        const nextColumn = visibleColumn[columnIndex + index];
+                        if (nextColumn) {
+                            tsColspan += nextColumn.renderWidth;
+                        }
+                    }
+                }
+                tcStyle.width = `${column.renderWidth - (cellOffsetWidth * tsColspan)}px`;
+            }
             if (scrollYLoad || hasEllipsis || isCsHeight || isRsHeight) {
                 tcStyle.height = `${cellHeight}px`;
             }
@@ -283,7 +297,7 @@ export default defineComponent({
             }
             else {
                 // 渲染单元格
-                tdVNs.push(...renderLine(cellParams, cellHeight), h('div', {
+                tdVNs.push(...renderLine(rowid, cellParams, cellHeight), h('div', {
                     key: 'tc',
                     class: ['vxe-cell', {
                             'c--title': showTitle,
@@ -386,8 +400,8 @@ 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, rowExpandHeightFlag } = tableReactData;
-            const { fullAllDataRowIdData } = tableInternalData;
+            const { hasFixedColumn, treeExpandedFlag, isColLoading, scrollXLoad, scrollYLoad, isAllOverflow, rowExpandedFlag, expandColumn, selectRadioRow, pendingRowFlag, isDragColMove, rowExpandHeightFlag } = tableReactData;
+            const { fullAllDataRowIdData, treeExpandedMaps, pendingRowMaps, rowExpandedMaps } = tableInternalData;
             const checkboxOpts = computeCheckboxOpts.value;
             const radioOpts = computeRadioOpts.value;
             const treeOpts = computeTreeOpts.value;
@@ -398,6 +412,7 @@ export default defineComponent({
             const { transform, seqMode } = treeOpts;
             const childrenField = treeOpts.children || treeOpts.childrenField;
             const rows = [];
+            const { handleGetRowId } = createHandleGetRowId($xeTable);
             tableData.forEach((row, $rowIndex) => {
                 const trOn = {};
                 let rowIndex = $rowIndex;
@@ -418,8 +433,8 @@ export default defineComponent({
                         $xeTable.clearHoverRow();
                     };
                 }
-                const rowid = getRowid($xeTable, row);
-                const rowRest = fullAllDataRowIdData[rowid];
+                const rowid = handleGetRowId(row);
+                const rowRest = fullAllDataRowIdData[rowid] || {};
                 let rowLevel = 0;
                 let seq = -1;
                 let _rowIndex = 0;
@@ -435,7 +450,7 @@ export default defineComponent({
                 }
                 const params = { $table: $xeTable, seq, rowid, fixed: fixedType, type: renderType, level: rowLevel, row, rowIndex, $rowIndex, _rowIndex };
                 // 行是否被展开
-                const isExpandRow = expandColumn && !!rowExpandedMaps[rowid];
+                const isExpandRow = expandColumn && !!rowExpandedFlag && !!rowExpandedMaps[rowid];
                 // 树节点是否被展开
                 let isExpandTree = false;
                 let rowChildren = [];
@@ -445,7 +460,7 @@ export default defineComponent({
                 }
                 if (treeConfig && !scrollYLoad && !transform) {
                     rowChildren = row[childrenField];
-                    isExpandTree = rowChildren && rowChildren.length > 0 && !!treeExpandedMaps[rowid];
+                    isExpandTree = !!treeExpandedFlag && rowChildren && rowChildren.length > 0 && !!treeExpandedMaps[rowid];
                 }
                 // 拖拽行事件
                 if (rowOpts.drag && (!treeConfig || transform)) {
@@ -464,7 +479,7 @@ export default defineComponent({
                         'row--new': isNewRow && (editOpts.showStatus || editOpts.showInsertStatus),
                         'row--radio': radioOpts.highlight && $xeTable.eqRow(selectRadioRow, row),
                         'row--checked': checkboxOpts.highlight && $xeTable.isCheckedByCheckboxRow(row),
-                        'row--pending': !!pendingRowMaps[rowid]
+                        'row--pending': !!pendingRowFlag && !!pendingRowMaps[rowid]
                     },
                     getPropClass(rowClassName, params)
                 ];
@@ -568,6 +583,7 @@ export default defineComponent({
         });
         const renderVN = () => {
             const { slots } = tableContext;
+            const $xeGrid = $xeTable.xeGrid;
             const { fixedColumn, fixedType, tableColumn } = props;
             const { spanMethod, footerSpanMethod, mouseConfig } = tableProps;
             const { isGroup, tableData, isRowLoading, isColLoading, overflowX, scrollXLoad, scrollYLoad, isAllOverflow, isDragRowMove, expandColumn, dragRow, dragCol } = tableReactData;
@@ -589,7 +605,7 @@ export default defineComponent({
                     isOptimizeMode = true;
                 }
             }
-            if (fixedType || !overflowX) {
+            if (!isColLoading && (fixedType || !overflowX)) {
                 renderColumnList = visibleColumn;
             }
             if (fixedType) {
@@ -648,7 +664,7 @@ export default defineComponent({
             let emptyContent;
             const emptySlot = slots ? slots.empty : null;
             if (emptySlot) {
-                emptyContent = $xeTable.callSlot(emptySlot, { $table: $xeTable, $grid: $xeTable.xegrid });
+                emptyContent = $xeTable.callSlot(emptySlot, { $table: $xeTable, $grid: $xeGrid });
             }
             else {
                 const compConf = emptyOpts.name ? renderer.get(emptyOpts.name) : null;
@@ -697,7 +713,10 @@ export default defineComponent({
                         }, renderColumnList.map((column, $columnIndex) => {
                             return h('col', {
                                 name: column.id,
-                                key: $columnIndex
+                                key: $columnIndex,
+                                style: {
+                                    width: `${column.renderWidth}px`
+                                }
                             });
                         })),
                         /**