vxe-table 3.14.0-beta.9 → 3.14.1

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,
@@ -247,6 +249,18 @@ function renderTdColumn(h, _vm, seq, rowid, fixedType, isOptimizeMode, rowLevel,
         }
     }
     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`;
     }
@@ -267,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,
@@ -388,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;
@@ -400,11 +414,15 @@ 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 = {};
+        const rowid = handleGetRowId(row);
+        const rowRest = fullAllDataRowIdData[rowid] || {};
         let rowIndex = $rowIndex;
-        // 确保任何情况下 rowIndex 都精准指向真实 data 索引
-        rowIndex = $xeTable.getRowIndex(row);
+        let rowLevel = 0;
+        let seq = -1;
+        let _rowIndex = -1;
         // 当前行事件
         if (rowOpts.isHover || highlightHoverRow) {
             trOn.mouseenter = (evnt) => {
@@ -420,11 +438,6 @@ function renderRows(h, _vm, fixedType, isOptimizeMode, tableData, tableColumn) {
                 $xeTable.clearHoverRow();
             };
         }
-        const rowid = getRowid($xeTable, row);
-        const rowRest = fullAllDataRowIdData[rowid];
-        let rowLevel = 0;
-        let seq = -1;
-        let _rowIndex = 0;
         if (rowRest) {
             rowLevel = rowRest.level;
             if (treeConfig && transform && seqMode === 'increasing') {
@@ -433,11 +446,12 @@ function renderRows(h, _vm, fixedType, isOptimizeMode, tableData, tableColumn) {
             else {
                 seq = rowRest.seq;
             }
+            rowIndex = rowRest.index;
             _rowIndex = rowRest._index;
         }
         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 = [];
@@ -448,7 +462,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)) {
@@ -467,7 +481,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) : ''
         ];
@@ -615,6 +629,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;
@@ -637,7 +652,7 @@ export default {
                 isOptimizeMode = true;
             }
         }
-        if (fixedType || !overflowX) {
+        if (!isColLoading && (fixedType || !overflowX)) {
             renderColumnList = visibleColumn;
         }
         if (fixedType) {
@@ -695,7 +710,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;
@@ -754,7 +769,10 @@ export default {
                             attrs: {
                                 name: column.id
                             },
-                            key: $columnIndex
+                            key: $columnIndex,
+                            style: {
+                                width: `${column.renderWidth}px`
+                            }
                         });
                     })),
                     /**

package/es/table/src/cell.js

@@ -304,7 +304,7 @@ function renderFooterHandle(h, params) {
     return Cell.renderDefaultFooter(h, params);
 }
 export const Cell = {
-    createColumn($xetable, _vm) {
+    createColumn($xeTable, _vm) {
         const { type } = _vm;
         const renConfs = {
             renderHeader: renderHeaderHandle,
@@ -314,7 +314,7 @@ export const Cell = {
         if (type === 'expand') {
             renConfs.renderData = Cell.renderExpandData;
         }
-        return createColumn($xetable, _vm, renConfs);
+        return createColumn($xeTable, _vm, renConfs);
     },
     /**
      * 列头标题
@@ -382,8 +382,8 @@ export const Cell = {
         const { $table, isHidden } = params;
         const tableReactData = $table;
         const tableInternalData = $table;
-        const { treeExpandedMaps, treeExpandLazyLoadedMaps } = tableReactData;
-        const { fullAllDataRowIdData } = tableInternalData;
+        const { treeExpandedFlag } = tableReactData;
+        const { fullAllDataRowIdData, treeExpandedMaps, treeExpandLazyLoadedMaps } = tableInternalData;
         const treeOpts = $table.computeTreeOpts;
         const { row, column, level } = params;
         const { slots } = column;
@@ -403,7 +403,7 @@ export const Cell = {
         }
         if (!isHidden) {
             const rowid = getRowid($table, row);
-            isActive = !!treeExpandedMaps[rowid];
+            isActive = !!treeExpandedFlag && !!treeExpandedMaps[rowid];
             if (lazy) {
                 const rest = fullAllDataRowIdData[rowid];
                 isLazyLoading = !!treeExpandLazyLoadedMaps[rowid];
@@ -551,7 +551,8 @@ export const Cell = {
         const headerSlot = slots ? slots.header : null;
         const titleSlot = slots ? slots.title : null;
         const checkboxOpts = $table.computeCheckboxOpts;
-        const headerTitle = column.getTitle();
+        const { checkStrictly, showHeader, headerTitle } = checkboxOpts;
+        const colTitle = column.getTitle();
         const ons = {};
         if (!isHidden) {
             ons.click = (evnt) => {
@@ -564,11 +565,11 @@ export const Cell = {
         if (headerSlot) {
             return renderHeaderCellBaseVNs(h, params, renderTitleContent(h, checkboxParams, $table.callSlot(headerSlot, checkboxParams, h)));
         }
-        if (checkboxOpts.checkStrictly ? !checkboxOpts.showHeader : checkboxOpts.showHeader === false) {
+        if (checkStrictly ? !showHeader : showHeader === false) {
             return renderHeaderCellBaseVNs(h, params, renderTitleContent(h, checkboxParams, [
                 h('span', {
                     class: 'vxe-checkbox--label'
-                }, titleSlot ? $table.callSlot(titleSlot, checkboxParams, h) : headerTitle)
+                }, titleSlot ? $table.callSlot(titleSlot, checkboxParams, h) : colTitle)
             ]));
         }
         return renderHeaderCellBaseVNs(h, params, renderTitleContent(h, checkboxParams, [
@@ -579,18 +580,18 @@ export const Cell = {
                         'is--indeterminate': isAllCheckboxIndeterminate
                     }],
                 attrs: {
-                    title: getI18n('vxe.table.allTitle')
+                    title: XEUtils.eqNull(headerTitle) ? getI18n('vxe.table.allTitle') : `${headerTitle || ''}`
                 },
                 on: ons
             }, [
                 h('span', {
                     class: ['vxe-checkbox--icon', isAllCheckboxIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isAllCheckboxSelected ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
                 })
-            ].concat(titleSlot || headerTitle
+            ].concat(titleSlot || colTitle
                 ? [
                     h('span', {
                         class: 'vxe-checkbox--label'
-                    }, titleSlot ? $table.callSlot(titleSlot, checkboxParams, h) : headerTitle)
+                    }, titleSlot ? $table.callSlot(titleSlot, checkboxParams, h) : colTitle)
                 ]
                 : []))
         ]));
@@ -599,8 +600,10 @@ export const Cell = {
         const { $table, row, column, isHidden } = params;
         const tableProps = $table;
         const tableReactData = $table;
+        const tableInternalData = $table;
         const { treeConfig } = tableProps;
-        const { selectCheckboxMaps, treeIndeterminateMaps } = tableReactData;
+        const { updateCheckboxFlag } = tableReactData;
+        const { selectCheckboxMaps, treeIndeterminateRowMaps } = tableInternalData;
         const checkboxOpts = $table.computeCheckboxOpts;
         const { labelField, checkMethod, visibleMethod } = checkboxOpts;
         const { slots } = column;
@@ -613,7 +616,7 @@ export const Cell = {
         const ons = {};
         if (!isHidden) {
             const rowid = getRowid($table, row);
-            isChecked = !!selectCheckboxMaps[rowid];
+            isChecked = !!updateCheckboxFlag && !!selectCheckboxMaps[rowid];
             ons.click = (evnt) => {
                 if (!isDisabled && isVisible) {
                     $table.triggerCheckRowEvent(evnt, params, !isChecked);
@@ -623,7 +626,7 @@ export const Cell = {
                 isDisabled = !checkMethod({ row });
             }
             if (treeConfig) {
-                indeterminate = !!treeIndeterminateMaps[rowid];
+                indeterminate = !!treeIndeterminateRowMaps[rowid];
             }
         }
         const checkboxParams = Object.assign(Object.assign({}, params), { checked: isChecked, disabled: isDisabled, visible: isVisible, indeterminate });
@@ -660,8 +663,10 @@ export const Cell = {
         const { $table, row, column, isHidden } = params;
         const tableProps = $table;
         const tableReactData = $table;
+        const tableInternalData = $table;
         const { treeConfig } = tableProps;
-        const { treeIndeterminateMaps } = tableReactData;
+        const { updateCheckboxFlag } = tableReactData;
+        const { treeIndeterminateRowMaps } = tableInternalData;
         const checkboxOpts = $table.computeCheckboxOpts;
         const { labelField, checkField, checkMethod, visibleMethod } = checkboxOpts;
         const indeterminateField = checkboxOpts.indeterminateField || checkboxOpts.halfField;
@@ -675,7 +680,7 @@ export const Cell = {
         const ons = {};
         if (!isHidden) {
             const rowid = getRowid($table, row);
-            isChecked = XEUtils.get(row, checkField);
+            isChecked = !!updateCheckboxFlag && XEUtils.get(row, checkField);
             ons.click = (evnt) => {
                 if (!isDisabled && isVisible) {
                     $table.triggerCheckRowEvent(evnt, params, !isChecked);
@@ -685,7 +690,7 @@ export const Cell = {
                 isDisabled = !checkMethod({ row });
             }
             if (treeConfig) {
-                isIndeterminate = !!treeIndeterminateMaps[rowid];
+                isIndeterminate = !!treeIndeterminateRowMaps[rowid];
             }
         }
         const checkboxParams = Object.assign(Object.assign({}, params), { checked: isChecked, disabled: isDisabled, visible: isVisible, indeterminate: isIndeterminate });
@@ -723,8 +728,8 @@ export const Cell = {
      */
     renderExpandCell(h, params) {
         const { $table, isHidden, row, column } = params;
-        const tableReactData = $table;
-        const { rowExpandedMaps, rowExpandLazyLoadedMaps } = tableReactData;
+        const tableInternalData = $table;
+        const { rowExpandedMaps, rowExpandLazyLoadedMaps } = tableInternalData;
         const expandOpts = $table.computeExpandOpts;
         const { lazy, labelField, iconLoaded, showIcon, iconOpen, iconClose, visibleMethod } = expandOpts;
         const { slots } = column;
@@ -820,7 +825,7 @@ export const Cell = {
     renderSortIcon(h, params) {
         const { $table, column } = params;
         const sortOpts = $table.computeSortOpts;
-        const { showIcon, allowBtn, iconLayout, iconAsc, iconDesc, iconVisibleMethod } = sortOpts;
+        const { showIcon, allowBtn, ascTitle, descTitle, iconLayout, iconAsc, iconDesc, iconVisibleMethod } = sortOpts;
         if (showIcon && (!iconVisibleMethod || iconVisibleMethod(params))) {
             return [
                 h('span', {
@@ -831,7 +836,7 @@ export const Cell = {
                                 'sort--active': column.order === 'asc'
                             }],
                         attrs: {
-                            title: getI18n('vxe.table.sortAsc')
+                            title: XEUtils.eqNull(ascTitle) ? getI18n('vxe.table.sortAsc') : `${ascTitle || ''}`
                         },
                         on: allowBtn
                             ? {
@@ -847,7 +852,7 @@ export const Cell = {
                                 'sort--active': column.order === 'desc'
                             }],
                         attrs: {
-                            title: getI18n('vxe.table.sortDesc')
+                            title: XEUtils.eqNull(descTitle) ? getI18n('vxe.table.sortDesc') : `${descTitle || ''}`
                         },
                         on: allowBtn
                             ? {

package/es/table/src/column.js

@@ -131,14 +131,15 @@ export const columnProps = {
 export const columnWatch = {};
 Object.keys(columnProps).forEach(name => {
     columnWatch[name] = function (value) {
+        const $xeTable = this.$xeTable;
         this.columnConfig.update(name, value);
-        if (this.$xetable) {
+        if ($xeTable) {
             if (name === 'filters') {
-                this.$xetable.setFilter(this.columnConfig, value);
-                this.$xetable.handleUpdateDataQueue();
+                $xeTable.setFilter(this.columnConfig, value);
+                $xeTable.handleUpdateDataQueue();
             }
             else if (['visible', 'fixed', 'width', 'minWidth', 'maxWidth'].includes(name)) {
-                this.$xetable.handleRefreshColumnQueue();
+                $xeTable.handleRefreshColumnQueue();
             }
         }
     };
@@ -148,21 +149,22 @@ export default {
     props: columnProps,
     provide() {
         return {
-            $xecolumn: this,
-            $xegrid: null
+            $xeColumn: this,
+            $xeGrid: null
         };
     },
     inject: {
-        $xetable: {
+        $xeTable: {
             default: null
         },
-        $xecolumn: {
+        $xeColumn: {
             default: null
         }
     },
     watch: columnWatch,
     created() {
-        this.columnConfig = this.createColumn(this.$xetable, this);
+        const $xeTable = this.$xeTable;
+        this.columnConfig = this.createColumn($xeTable, this);
     },
     mounted() {
         this.columnConfig.slots = this.$scopedSlots;

package/es/table/src/columnInfo.js

@@ -6,12 +6,12 @@ import { warnLog, errLog } from '../../ui/src/log';
 const { getI18n, formats } = VxeUI;
 export class ColumnInfo {
     /* eslint-disable @typescript-eslint/no-use-before-define */
-    constructor($xetable, _vm, { renderHeader, renderCell, renderFooter, renderData } = {}) {
-        const $xegrid = $xetable.$xegrid;
-        const proxyOpts = $xegrid ? $xegrid.proxyOpts : null;
+    constructor($xeTable, _vm, { renderHeader, renderCell, renderFooter, renderData } = {}) {
+        const tableProps = $xeTable;
+        const $xeGrid = $xeTable.$xeGrid;
+        const proxyOpts = $xeGrid ? $xeGrid.proxyOpts : null;
         const formatter = _vm.formatter;
         const visible = XEUtils.isBoolean(_vm.visible) ? _vm.visible : true;
-        const tableProps = $xetable;
         const types = ['seq', 'checkbox', 'radio', 'expand', 'html'];
         if (_vm.type && types.indexOf(_vm.type) === -1) {
             warnLog('vxe.error.errProp', [`type=${_vm.type}`, types.join(', ')]);
@@ -24,7 +24,7 @@ export class ColumnInfo {
         }
         if (_vm.type === 'expand') {
             const { treeConfig } = tableProps;
-            if (treeConfig && ($xetable.treeOpts.showLine || $xetable.treeOpts.line)) {
+            if (treeConfig && ($xeTable.treeOpts.showLine || $xeTable.treeOpts.line)) {
                 errLog('vxe.error.errConflicts', ['tree-config.line', 'column.type=expand']);
             }
         }
@@ -136,7 +136,7 @@ export class ColumnInfo {
             slots: _vm.slots
         });
         if (proxyOpts && proxyOpts.beforeColumn) {
-            proxyOpts.beforeColumn({ $grid: $xegrid, column: this });
+            proxyOpts.beforeColumn({ $grid: $xeGrid, column: this });
         }
     }
     getTitle() {

package/es/table/src/footer.js

@@ -24,10 +24,11 @@ function renderRows(h, _vm, tableColumn, footerTableData, row, $rowIndex, _rowIn
     const tableProps = $xeTable;
     const tableReactData = $xeTable;
     const tableInternalData = $xeTable;
+    const $xeGrid = $xeTable.$xeGrid;
     const { fixedType } = props;
     const { resizable: allResizable, border, footerCellClassName, footerCellStyle, footerAlign: allFooterAlign, footerSpanMethod, align: allAlign, columnKey, showFooterOverflow: allColumnFooterOverflow } = tableProps;
     const { scrollXLoad, scrollYLoad, overflowX, currentColumn, mergeFooterList } = tableReactData;
-    const { scrollXStore } = tableInternalData;
+    const { fullColumnIdData, scrollXStore } = tableInternalData;
     const tooltipOpts = $xeTable.computeTooltipOpts;
     const { isAllColumnDrag } = $xeTable.resizableOpts;
     const columnOpts = $xeTable.computeColumnOpts;
@@ -38,6 +39,7 @@ function renderRows(h, _vm, tableColumn, footerTableData, row, $rowIndex, _rowIn
     return tableColumn.map((column, $columnIndex) => {
         const { type, showFooterOverflow, footerAlign, align, footerClassName, editRender, cellRender } = column;
         const colid = column.id;
+        const colRest = fullColumnIdData[colid] || {};
         const renderOpts = editRender || cellRender;
         const compConf = renderOpts ? renderer.get(renderOpts.name) : null;
         const showAllTip = tooltipOpts.showAll;
@@ -53,12 +55,12 @@ function renderRows(h, _vm, tableColumn, footerTableData, row, $rowIndex, _rowIn
         const showResizable = (XEUtils.isBoolean(column.resizable) ? column.resizable : (columnOpts.resizable || allResizable));
         const attrs = { colid };
         const tfOns = {};
-        const columnIndex = $xeTable.getColumnIndex(column);
-        const _columnIndex = $xeTable.getVTColumnIndex(column);
+        const columnIndex = colRest.index;
+        const _columnIndex = colRest._index;
         const itemIndex = _columnIndex;
         const cellParams = {
             $table: $xeTable,
-            $grid: $xeTable.xegrid,
+            $grid: $xeGrid,
             row,
             rowIndex: _rowIndex,
             _rowIndex,
@@ -293,7 +295,7 @@ export default {
         const { fixedType, fixedColumn, tableColumn } = props;
         const { spanMethod, footerSpanMethod, showFooterOverflow: allColumnFooterOverflow } = tableProps;
         const { visibleColumn, fullColumnIdData } = tableInternalData;
-        const { isGroup, overflowX, scrollXLoad, scrollYLoad, dragCol } = tableReactData;
+        const { isGroup, isColLoading, overflowX, scrollXLoad, scrollYLoad, dragCol } = tableReactData;
         let renderColumnList = tableColumn;
         let isOptimizeMode = false;
         // 如果是使用优化模式
@@ -305,7 +307,7 @@ export default {
                 isOptimizeMode = true;
             }
         }
-        if (fixedType || !overflowX) {
+        if (!isColLoading && (fixedType || !overflowX)) {
             renderColumnList = visibleColumn;
         }
         if (fixedType) {
@@ -380,7 +382,10 @@ export default {
                             attrs: {
                                 name: column.id
                             },
-                            key: $columnIndex
+                            key: $columnIndex,
+                            style: {
+                                width: `${column.renderWidth}px`
+                            }
                         });
                     })),
                     /**

package/es/table/src/group.js

@@ -7,21 +7,22 @@ export default {
     props: columnProps,
     provide() {
         return {
-            $xecolumn: this,
-            $xegrid: null
+            $xeColumn: this,
+            $xeGrid: null
         };
     },
     inject: {
-        $xetable: {
+        $xeTable: {
             default: null
         },
-        $xecolumn: {
+        $xeColumn: {
             default: null
         }
     },
     watch: columnWatch,
     created() {
-        this.columnConfig = this.createColumn(this.$xetable, this);
+        const $xeTable = this.$xeTable;
+        this.columnConfig = this.createColumn($xeTable, this);
     },
     mounted() {
         const { $scopedSlots } = this;

package/es/table/src/header.js

@@ -7,14 +7,14 @@ const cellType = 'header';
 const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
     const props = _vm;
     const $xeTable = _vm.$parent;
-    const $xeGrid = $xeTable.xegrid;
+    const $xeGrid = $xeTable.$xeGrid;
     const tableProps = $xeTable;
     const tableReactData = $xeTable;
     const tableInternalData = $xeTable;
     const { fixedType } = props;
     const { resizable: allResizable, columnKey, headerCellClassName, headerCellStyle, showHeaderOverflow: allColumnHeaderOverflow, headerAlign: allHeaderAlign, align: allAlign, mouseConfig } = tableProps;
     const { currentColumn, dragCol, scrollXLoad, scrollYLoad, overflowX } = tableReactData;
-    const { scrollXStore } = tableInternalData;
+    const { fullColumnIdData, scrollXStore } = tableInternalData;
     const columnOpts = $xeTable.computeColumnOpts;
     const columnDragOpts = $xeTable.computeColumnDragOpts;
     const cellOpts = $xeTable.computeCellOpts;
@@ -26,6 +26,7 @@ const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
         const { type, showHeaderOverflow, headerAlign, align, filters, headerClassName, editRender, cellRender } = column;
         // const { enabled } = tooltipOpts
         const colid = column.id;
+        const colRest = fullColumnIdData[colid] || {};
         const renderOpts = editRender || cellRender;
         const compConf = renderOpts ? renderer.get(renderOpts.name) : null;
         const isColGroup = column.children && column.children.length;
@@ -43,8 +44,8 @@ const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
             firstFilterOption = filters[0];
             hasFilter = filters.some((item) => item.checked);
         }
-        const columnIndex = $xeTable.getColumnIndex(column);
-        const _columnIndex = $xeTable.getVTColumnIndex(column);
+        const columnIndex = colRest.index;
+        const _columnIndex = colRest._index;
         const cellParams = { $table: $xeTable, $grid: $xeGrid, $rowIndex, column, columnIndex, $columnIndex, _columnIndex, firstFilterOption, fixed: fixedType, type: cellType, isHidden: fixedHiddenColumn, hasFilter };
         const thAttrs = {
             colid,
@@ -252,7 +253,7 @@ export default {
         const { fixedType, fixedColumn, tableColumn } = props;
         const { headerColumn } = this;
         const { mouseConfig, showHeaderOverflow: allColumnHeaderOverflow, spanMethod, footerSpanMethod } = tableProps;
-        const { isGroup, overflowX, scrollXLoad, scrollYLoad, dragCol } = tableReactData;
+        const { isGroup, isColLoading, overflowX, scrollXLoad, scrollYLoad, dragCol } = tableReactData;
         const { visibleColumn, fullColumnIdData } = tableInternalData;
         const mouseOpts = $xeTable.computeMouseOpts;
         let renderHeaderList = headerColumn;
@@ -271,7 +272,7 @@ export default {
                     isOptimizeMode = true;
                 }
             }
-            if (fixedType || !overflowX) {
+            if (!isColLoading && (fixedType || !overflowX)) {
                 renderColumnList = visibleColumn;
             }
             if (fixedType) {
@@ -351,7 +352,10 @@ export default {
                             attrs: {
                                 name: column.id
                             },
-                            key: $columnIndex
+                            key: $columnIndex,
+                            style: {
+                                width: `${column.renderWidth}px`
+                            }
                         });
                     })),
                     /**
@@ -390,8 +394,10 @@ export default {
     },
     methods: {
         uploadColumn() {
-            const { $parent: $xetable } = this;
-            this.headerColumn = $xetable.isGroup ? convertHeaderColumnToRows(this.tableGroupColumn) : [];
+            const $xeTable = this.$parent;
+            const tableReactData = $xeTable;
+            const { isGroup } = tableReactData;
+            this.headerColumn = isGroup ? convertHeaderColumnToRows(this.tableGroupColumn) : [];
         }
     }
 };