vxe-table 3.14.0-beta.3 → 3.14.0-beta.30

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

@@ -95,17 +95,59 @@ function getCheckboxRangeRows($xeTable, evnt, params, targetTrElem, trRect, offs
     }
     return rangeRows;
 }
+function handleMoveSelected($xeTable, evnt, args, isLeftArrow, isUpArrow, isRightArrow, isDwArrow) {
+    const internalData = $xeTable;
+    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;
+}
 export default {
     methods: {
         // 处理 Tab 键移动
         moveTabSelected(args, isLeft, evnt) {
-            const { afterFullData, visibleColumn, editConfig, editOpts } = this;
+            const $xeTable = this;
+            const props = $xeTable;
+            const internalData = $xeTable;
+            const { editConfig } = props;
+            const { afterFullData, visibleColumn } = internalData;
+            const editOpts = $xeTable.computeEditOpts;
+            const rowOpts = $xeTable.computeRowOpts;
+            const currentRowOpts = $xeTable.computeCurrentRowOpts;
+            const columnOpts = $xeTable.computeColumnOpts;
+            const currentColumnOpts = $xeTable.computeCurrentColumnOpts;
             let targetRow;
             let targetRowIndex;
             let targetColumnIndex;
             const params = Object.assign({}, args);
-            const _rowIndex = this.getVTRowIndex(params.row);
-            const _columnIndex = this.getVTColumnIndex(params.column);
+            const _rowIndex = $xeTable.getVTRowIndex(params.row);
+            const _columnIndex = $xeTable.getVTColumnIndex(params.column);
             evnt.preventDefault();
             if (isLeft) {
                 // 向左
@@ -145,30 +187,46 @@ export default {
                 }
                 params.columnIndex = targetColumnIndex;
                 params.column = targetColumn;
-                params.cell = this.getCellElement(params.row, params.column);
+                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') {
-                            this.handleEdit(params, evnt);
+                            $xeTable.handleEdit(params, evnt);
                         }
                         else {
-                            this.scrollToRow(params.row, params.column)
-                                .then(() => this.handleSelected(params, evnt));
+                            $xeTable.scrollToRow(params.row, params.column)
+                                .then(() => {
+                                $xeTable.handleSelected(params, evnt);
+                            });
                         }
                     }
                 }
                 else {
-                    this.scrollToRow(params.row, params.column)
-                        .then(() => this.handleSelected(params, evnt));
+                    $xeTable.scrollToRow(params.row, params.column)
+                        .then(() => {
+                        $xeTable.handleSelected(params, evnt);
+                    });
                 }
             }
         },
         // 处理当前行方向键移动
         moveCurrentRow(isUpArrow, isDwArrow, evnt) {
-            const { currentRow, treeConfig, treeOpts, afterFullData } = this;
+            const $xeTable = this;
+            const props = $xeTable;
+            const reactData = $xeTable;
+            const internalData = $xeTable;
+            const { treeConfig } = props;
+            const { currentRow } = reactData;
+            const { afterFullData } = internalData;
+            const treeOpts = $xeTable.computeTreeOpts;
             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 });
@@ -180,7 +238,7 @@ export default {
                     }
                 }
                 else {
-                    const _rowIndex = this.getVTRowIndex(currentRow);
+                    const _rowIndex = $xeTable.getVTRowIndex(currentRow);
                     if (isUpArrow && _rowIndex > 0) {
                         targetRow = afterFullData[_rowIndex - 1];
                     }
@@ -193,42 +251,84 @@ export default {
                 targetRow = afterFullData[0];
             }
             if (targetRow) {
-                const params = { $table: this, row: targetRow };
-                this.scrollToRow(targetRow)
-                    .then(() => this.triggerCurrentRowEvent(evnt, params));
+                evnt.preventDefault();
+                const params = {
+                    $table: $xeTable,
+                    row: targetRow,
+                    rowIndex: $xeTable.getRowIndex(targetRow),
+                    $rowIndex: $xeTable.getVMRowIndex(targetRow)
+                };
+                $xeTable.scrollToRow(targetRow)
+                    .then(() => $xeTable.triggerCurrentRowEvent(evnt, params));
+            }
+        },
+        // 处理当前列方向键移动
+        moveCurrentColumn(isLeftArrow, isRightArrow, evnt) {
+            const $xeTable = this;
+            const reactData = $xeTable;
+            const internalData = $xeTable;
+            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 } = this;
-            const params = Object.assign({}, args);
-            const _rowIndex = this.getVTRowIndex(params.row);
-            const _columnIndex = this.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 $xeTable = this;
+            const props = $xeTable;
+            const { highlightCurrentRow, highlightCurrentColumn } = props;
+            const rowOpts = $xeTable.computeRowOpts;
+            const columnOpts = $xeTable.computeColumnOpts;
+            handleMoveSelected($xeTable, 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 $xeTable = this;
+            const rowOpts = $xeTable.computeRowOpts;
+            const currentRowOpts = $xeTable.computeCurrentRowOpts;
+            const columnOpts = $xeTable.computeColumnOpts;
+            const currentColumnOpts = $xeTable.computeCurrentColumnOpts;
+            const params = handleMoveSelected($xeTable, 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);
             }
-            this.scrollToRow(params.row, params.column).then(() => {
-                params.cell = this.getCellElement(params.row, params.column);
-                this.handleSelected(params, evnt);
-            });
+        },
+        // 处理可编辑方向键移动
+        moveSelected(args, isLeftArrow, isUpArrow, isRightArrow, isDwArrow, evnt) {
+            const $xeTable = this;
+            handleMoveSelected($xeTable, evnt, args, isLeftArrow, isUpArrow, isRightArrow, isDwArrow);
         },
         handleCellMousedownEvent(evnt, params) {
             const $xeTable = this;

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

@@ -58,6 +58,7 @@ export default {
          */
         handleGlobalContextmenuEvent(evnt) {
             const $xeTable = this;
+            const $xeGrid = $xeTable.$xeGrid;
             const internalData = $xeTable;
             const { $refs, tId, editStore, menuConfig, contextMenu, ctxMenuStore, ctxMenuOpts, mouseConfig, mouseOpts } = this;
             const { selected } = editStore;
@@ -70,7 +71,7 @@ export default {
                 }
                 if (internalData._keyCtx) {
                     const type = 'body';
-                    const params = { type, $grid: this.$xegrid, $table: this, keyboard: true, columns: this.visibleColumn.slice(0), $event: evnt };
+                    const params = { type, $grid: $xeGrid, $table: this, keyboard: true, columns: this.visibleColumn.slice(0), $event: evnt };
                     // 如果开启单元格区域
                     if (mouseConfig && mouseOpts.area) {
                         const activeArea = this.getActiveCellArea();
@@ -98,7 +99,7 @@ export default {
                         // target=td|th，直接向上找 table 去匹配即可
                         return target.parentNode.parentNode.parentNode.getAttribute('xid') === tId;
                     });
-                    const params = { type: layout, $grid: this.$xegrid, $table: this, columns: this.visibleColumn.slice(0), $event: evnt };
+                    const params = { type: layout, $grid: $xeGrid, $table: this, columns: this.visibleColumn.slice(0), $event: evnt };
                     if (columnTargetNode.flag) {
                         const cell = columnTargetNode.targetElem;
                         const column = this.getColumnNode(cell).item;
@@ -261,10 +262,12 @@ export default {
          * 快捷菜单点击事件
          */
         ctxMenuLinkEvent(evnt, menu) {
+            const $xeTable = this;
+            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({ menu, $grid: this.$xegrid, $table: this, $event: evnt }, this.ctxMenuStore.args);
+                const params = Object.assign({ menu, $grid: $xeGrid, $table: this, $event: evnt }, this.ctxMenuStore.args);
                 if (gMenuOpts && gMenuOpts.menuMethod) {
                     gMenuOpts.menuMethod(params, evnt);
                 }

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

@@ -17,7 +17,7 @@ export default {
         }
     },
     render(h) {
-        const $xetable = this.$parent;
+        const $xeTable = this.$parent;
         const { _e, ctxMenuOpts, ctxMenuStore } = this;
         return h('div', {
             class: ['vxe-table--context-menu-wrapper', ctxMenuOpts.className, {
@@ -47,13 +47,13 @@ export default {
                                 class: 'vxe-context-menu--link',
                                 on: {
                                     click(evnt) {
-                                        $xetable.ctxMenuLinkEvent(evnt, item);
+                                        $xeTable.ctxMenuLinkEvent(evnt, item);
                                     },
                                     mouseover(evnt) {
-                                        $xetable.ctxMenuMouseoverEvent(evnt, item);
+                                        $xeTable.ctxMenuMouseoverEvent(evnt, item);
                                     },
                                     mouseout(evnt) {
-                                        $xetable.ctxMenuMouseoutEvent(evnt, item);
+                                        $xeTable.ctxMenuMouseoutEvent(evnt, item);
                                     }
                                 }
                             }, [
@@ -98,13 +98,13 @@ export default {
                                                 class: 'vxe-context-menu--link',
                                                 on: {
                                                     click(evnt) {
-                                                        $xetable.ctxMenuLinkEvent(evnt, child);
+                                                        $xeTable.ctxMenuLinkEvent(evnt, child);
                                                     },
                                                     mouseover(evnt) {
-                                                        $xetable.ctxMenuMouseoverEvent(evnt, item, child);
+                                                        $xeTable.ctxMenuMouseoverEvent(evnt, item, child);
                                                     },
                                                     mouseout(evnt) {
-                                                        $xetable.ctxMenuMouseoutEvent(evnt, item, child);
+                                                        $xeTable.ctxMenuMouseoutEvent(evnt, item);
                                                     }
                                                 }
                                             }, [

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

@@ -153,8 +153,8 @@ export default {
             const internalData = $xeTable;
             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 = $xeTable.computeTreeOpts;
             const childrenField = treeOpts.children || treeOpts.childrenField;

package/es/table/render/index.js

@@ -4,7 +4,7 @@ import { getCellValue, setCellValue } from '../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 = 'value';
 const defaultCompProps = {};
 function handleDefaultValue(value, defaultVal, initVal) {
@@ -35,7 +35,7 @@ function getOldComponent({ name }) {
     return getOldComponentName(name);
 }
 function getDefaultComponent({ name }) {
-    return name;
+    return getComponent(name) || name;
 }
 function handleConfirmFilter(params, checked, option) {
     const { $panel } = params;
@@ -678,7 +678,13 @@ renderer.mixin({
         tableFilterDefaultMethod: handleInputFilterMethod
     },
     FormatNumberInput: {
-        renderTableDefault: handleNumberCell
+        renderTableDefault: handleNumberCell,
+        tableFilterDefaultMethod: handleInputFilterMethod,
+        tableExportMethod(params) {
+            const { row, column } = params;
+            const cellValue = XEUtils.get(row, column.field);
+            return cellValue;
+        }
     },
     VxeNumberInput: {
         tableAutoFocus: 'input',
@@ -800,7 +806,9 @@ renderer.mixin({
     FormatSelect: {
         renderTableDefault(h, renderOpts, params) {
             return getCellLabelVNs(h, renderOpts, params, getSelectCellValue(renderOpts, params));
-        }
+        },
+        tableFilterDefaultMethod: handleFilterMethod,
+        tableExportMethod: handleExportSelectMethod
     },
     VxeTreeSelect: {
         tableAutoFocus: 'input',
@@ -830,7 +838,8 @@ renderer.mixin({
     FormatTreeSelect: {
         renderTableDefault(h, renderOpts, params) {
             return getCellLabelVNs(h, renderOpts, params, getTreeSelectCellValue(renderOpts, params));
-        }
+        },
+        tableExportMethod: handleExportTreeSelectMethod
     },
     VxeColorPicker: {
         tableAutoFocus: 'input',

package/es/table/src/body.js

@@ -1,7 +1,7 @@
 import XEUtils from 'xe-utils';
 import { VxeUI } from '../../ui';
 import { isEnableConf, getClass } from '../../ui/src/utils';
-import { getOffsetSize, calcTreeLine, mergeBodyMethod, getRowid } from './util';
+import { getOffsetSize, calcTreeLine, mergeBodyMethod, getRowid, createHandleGetRowId } from './util';
 import { updateCellTitle } from '../../ui/src/dom';
 import { getSlotVNs } from '../../ui/src/vn';
 const { getI18n, renderer, renderEmptyElement } = VxeUI;
@@ -14,7 +14,7 @@ const isVMScrollProcess = ($xeTable) => {
     const { lastScrollTime, isDragResize } = tableReactData;
     return !!(isDragResize || (lastScrollTime && Date.now() < lastScrollTime + delayHover));
 };
-function renderLine(h, _vm, params, cellHeight) {
+function renderLine(h, _vm, rowid, params, cellHeight) {
     const $xeTable = _vm.$parent;
     const tableProps = $xeTable;
     const tableInternalData = $xeTable;
@@ -27,7 +27,6 @@ function renderLine(h, _vm, params, cellHeight) {
     if (slots && slots.line) {
         return $xeTable.callSlot(slots.line, params, h);
     }
-    const rowid = getRowid($xeTable, row);
     const rest = fullAllDataRowIdData[rowid];
     let rLevel = 0;
     let prevRow = null;
@@ -63,9 +62,10 @@ function renderTdColumn(h, _vm, seq, rowid, fixedType, isOptimizeMode, rowLevel,
     const tableProps = $xeTable;
     const tableReactData = $xeTable;
     const tableInternalData = $xeTable;
-    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 = $xeTable.computeCellOpts;
     const validOpts = $xeTable.computeValidOpts;
@@ -81,19 +81,21 @@ function renderTdColumn(h, _vm, seq, rowid, fixedType, isOptimizeMode, rowLevel,
     const columnOpts = $xeTable.computeColumnOpts;
     const mouseOpts = $xeTable.computeMouseOpts;
     const areaOpts = $xeTable.computeAreaOpts;
+    const cellOffsetWidth = $xeTable.computeCellOffsetWidth;
     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;
@@ -115,7 +117,7 @@ function renderTdColumn(h, _vm, seq, rowid, fixedType, isOptimizeMode, rowLevel,
     const tdAttrs = { colid };
     const cellParams = {
         $table: $xeTable,
-        $grid: $xeTable.xegrid,
+        $grid: $xeGrid,
         isEdit: false,
         seq,
         rowid,
@@ -189,6 +191,7 @@ function renderTdColumn(h, _vm, seq, rowid, fixedType, isOptimizeMode, rowLevel,
     tdOns.dblclick = (evnt) => {
         $xeTable.triggerCellDblclickEvent(evnt, cellParams);
     };
+    let isMergeCell = false;
     // 合并行或列
     if (mergeList.length) {
         const spanRest = mergeBodyMethod(mergeList, _rowIndex, _columnIndex);
@@ -198,9 +201,11 @@ function renderTdColumn(h, _vm, seq, rowid, fixedType, isOptimizeMode, rowLevel,
                 return null;
             }
             if (rowspan > 1) {
+                isMergeCell = true;
                 tdAttrs.rowspan = rowspan;
             }
             if (colspan > 1) {
+                isMergeCell = true;
                 tdAttrs.colspan = colspan;
             }
         }
@@ -233,15 +238,29 @@ function renderTdColumn(h, _vm, seq, rowid, fixedType, isOptimizeMode, rowLevel,
     const isLastColumn = $columnIndex === columns.length - 1;
     const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto');
     let isVNPreEmptyStatus = false;
-    if (!dragRow || getRowid($xeTable, dragRow) !== rowid) {
-        if (scrollYLoad && (_rowIndex < scrollYStore.visibleStartIndex - scrollYStore.preloadSize || _rowIndex > scrollYStore.visibleEndIndex + scrollYStore.preloadSize)) {
-            isVNPreEmptyStatus = true;
-        }
-        else if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
-            isVNPreEmptyStatus = true;
+    if (!isMergeCell) {
+        if (!dragRow || getRowid($xeTable, dragRow) !== rowid) {
+            if (scrollYLoad && (_rowIndex < scrollYStore.visibleStartIndex - scrollYStore.preloadSize || _rowIndex > scrollYStore.visibleEndIndex + scrollYStore.preloadSize)) {
+                isVNPreEmptyStatus = true;
+            }
+            else if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
+                isVNPreEmptyStatus = true;
+            }
         }
     }
     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`;
     }
@@ -262,7 +281,7 @@ function renderTdColumn(h, _vm, seq, rowid, fixedType, isOptimizeMode, rowLevel,
     }
     else {
         // 渲染单元格
-        tdVNs.push(...renderLine(h, _vm, cellParams, cellHeight), h('div', {
+        tdVNs.push(...renderLine(h, _vm, rowid, cellParams, cellHeight), h('div', {
             key: 'tc',
             class: ['vxe-cell', {
                     'c--title': showTitle,
@@ -383,8 +402,8 @@ 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, 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 = $xeTable.computeCheckboxOpts;
     const radioOpts = $xeTable.computeRadioOpts;
     const treeOpts = $xeTable.computeTreeOpts;
@@ -395,6 +414,7 @@ function renderRows(h, _vm, fixedType, isOptimizeMode, tableData, tableColumn) {
     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;
@@ -415,8 +435,8 @@ function renderRows(h, _vm, fixedType, isOptimizeMode, tableData, tableColumn) {
                 $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;
@@ -432,7 +452,7 @@ function renderRows(h, _vm, fixedType, isOptimizeMode, tableData, tableColumn) {
         }
         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 = [];
@@ -443,7 +463,7 @@ function renderRows(h, _vm, fixedType, isOptimizeMode, tableData, tableColumn) {
         }
         if (treeConfig && !scrollYLoad && !transform) {
             rowChildren = row[childrenField];
-            isExpandTree = rowChildren && rowChildren.length && !!treeExpandedMaps[rowid];
+            isExpandTree = !!treeExpandedFlag && rowChildren && rowChildren.length > 0 && !!treeExpandedMaps[rowid];
         }
         // 拖拽行事件
         if (rowOpts.drag && (!treeConfig || transform)) {
@@ -462,7 +482,7 @@ function renderRows(h, _vm, fixedType, isOptimizeMode, tableData, tableColumn) {
                 'row--new': isNewRow && (editOpts.showStatus || editOpts.showInsertStatus),
                 'row--radio': radioOpts.highlight && selectRadioRow === row,
                 'row--checked': checkboxOpts.highlight && $xeTable.isCheckedByCheckboxRow(row),
-                'row--pending': !!pendingRowMaps[rowid]
+                'row--pending': !!pendingRowFlag && !!pendingRowMaps[rowid]
             },
             rowClassName ? (XEUtils.isFunction(rowClassName) ? rowClassName(params) : rowClassName) : ''
         ];
@@ -610,6 +630,7 @@ export default {
         const tableProps = $xeTable;
         const tableReactData = $xeTable;
         const tableInternalData = $xeTable;
+        const $xeGrid = $xeTable.$xeGrid;
         const { xID, $scopedSlots } = $xeTable;
         const { fixedColumn, fixedType, tableColumn } = props;
         const { spanMethod, footerSpanMethod, mouseConfig } = tableProps;
@@ -632,7 +653,7 @@ export default {
                 isOptimizeMode = true;
             }
         }
-        if (fixedType || !overflowX) {
+        if (!isColLoading && (fixedType || !overflowX)) {
             renderColumnList = visibleColumn;
         }
         if (fixedType) {
@@ -690,7 +711,7 @@ export default {
         }
         let emptyContent;
         if ($scopedSlots.empty) {
-            emptyContent = $scopedSlots.empty.call(this, { $table: $xeTable, $grid: $xeTable.xegrid });
+            emptyContent = $scopedSlots.empty.call(this, { $table: $xeTable, $grid: $xeGrid });
         }
         else {
             const compConf = emptyOpts.name ? renderer.get(emptyOpts.name) : null;
@@ -749,7 +770,10 @@ export default {
                             attrs: {
                                 name: column.id
                             },
-                            key: $columnIndex
+                            key: $columnIndex,
+                            style: {
+                                width: `${column.renderWidth}px`
+                            }
                         });
                     })),
                     /**