vxe-table 4.12.0-beta.9 → 4.12.1

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,11 +412,15 @@ 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 = {};
+                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;
+                const trOn = {};
                 // 当前行事件
                 if (rowOpts.isHover || highlightHoverRow) {
                     trOn.onMouseenter = (evnt) => {
@@ -418,11 +436,6 @@ export default defineComponent({
                         $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') {
@@ -431,11 +444,12 @@ export default defineComponent({
                     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 = [];
@@ -445,7 +459,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 +478,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 +582,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 +604,7 @@ export default defineComponent({
                     isOptimizeMode = true;
                 }
             }
-            if (fixedType || !overflowX) {
+            if (!isColLoading && (fixedType || !overflowX)) {
                 renderColumnList = visibleColumn;
             }
             if (fixedType) {
@@ -648,7 +663,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 +712,10 @@ export default defineComponent({
                         }, renderColumnList.map((column, $columnIndex) => {
                             return h('col', {
                                 name: column.id,
-                                key: $columnIndex
+                                key: $columnIndex,
+                                style: {
+                                    width: `${column.renderWidth}px`
+                                }
                             });
                         })),
                         /**

package/es/table/src/cell.js

@@ -201,15 +201,27 @@ function getFooterContent(params) {
     });
     if (footerFormatter) {
         if (XEUtils.isFunction(footerFormatter)) {
-            return `${footerFormatter(footParams)}`;
+            return [
+                h('span', {
+                    class: 'vxe-cell--label'
+                }, `${footerFormatter(footParams)}`)
+            ];
         }
         const isArr = XEUtils.isArray(footerFormatter);
         const gFormatOpts = isArr ? formats.get(footerFormatter[0]) : formats.get(footerFormatter);
         const footerFormatMethod = gFormatOpts ? gFormatOpts.tableFooterCellFormatMethod : null;
         if (footerFormatMethod) {
-            return `${isArr ? footerFormatMethod(footParams, ...footerFormatter.slice(1)) : footerFormatMethod(footParams)}`;
+            return [
+                h('span', {
+                    class: 'vxe-cell--label'
+                }, `${isArr ? footerFormatMethod(footParams, ...footerFormatter.slice(1)) : footerFormatMethod(footParams)}`)
+            ];
         }
-        return '';
+        return [
+            h('span', {
+                class: 'vxe-cell--label'
+            }, '')
+        ];
     }
     if (renderOpts) {
         const compConf = renderer.get(renderOpts.name);
@@ -221,7 +233,9 @@ function getFooterContent(params) {
         }
     }
     return [
-        formatText(itemValue, 1)
+        h('span', {
+            class: 'vxe-cell--label'
+        }, formatText(itemValue, 1))
     ];
 }
 function getDefaultCellLabel(params) {
@@ -380,8 +394,8 @@ export const Cell = {
         const tableReactData = $table.reactData;
         const tableInternalData = $table.internalData;
         const { computeTreeOpts } = $table.getComputeMaps();
-        const { treeExpandedMaps, treeExpandLazyLoadedMaps } = tableReactData;
-        const { fullAllDataRowIdData } = tableInternalData;
+        const { treeExpandedFlag } = tableReactData;
+        const { fullAllDataRowIdData, treeExpandedMaps, treeExpandLazyLoadedMaps } = tableInternalData;
         const treeOpts = computeTreeOpts.value;
         const { row, column, level } = params;
         const { slots } = column;
@@ -401,7 +415,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];
@@ -548,7 +562,8 @@ export const Cell = {
         const headerSlot = slots ? slots.header : null;
         const titleSlot = slots ? slots.title : null;
         const checkboxOpts = computeCheckboxOpts.value;
-        const headerTitle = column.getTitle();
+        const { checkStrictly, showHeader, headerTitle } = checkboxOpts;
+        const colTitle = column.getTitle();
         const ons = {};
         if (!isHidden) {
             ons.onClick = (evnt) => {
@@ -561,11 +576,11 @@ export const Cell = {
         if (headerSlot) {
             return renderHeaderCellBaseVNs(params, renderTitleContent(checkboxParams, $table.callSlot(headerSlot, checkboxParams)));
         }
-        if (checkboxOpts.checkStrictly ? !checkboxOpts.showHeader : checkboxOpts.showHeader === false) {
+        if (checkStrictly ? !showHeader : showHeader === false) {
             return renderHeaderCellBaseVNs(params, renderTitleContent(checkboxParams, [
                 h('span', {
                     class: 'vxe-checkbox--label'
-                }, titleSlot ? $table.callSlot(titleSlot, checkboxParams) : headerTitle)
+                }, titleSlot ? $table.callSlot(titleSlot, checkboxParams) : colTitle)
             ]));
         }
         return renderHeaderCellBaseVNs(params, renderTitleContent(checkboxParams, [
@@ -573,15 +588,15 @@ export const Cell = {
                         'is--checked': isAllCheckboxSelected,
                         'is--disabled': isAllCheckboxDisabled,
                         'is--indeterminate': isAllCheckboxIndeterminate
-                    }], title: getI18n('vxe.table.allTitle') }, ons), [
+                    }], title: XEUtils.eqNull(headerTitle) ? getI18n('vxe.table.allTitle') : `${headerTitle || ''}` }, 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) : headerTitle)
+                    }, titleSlot ? $table.callSlot(titleSlot, checkboxParams) : colTitle)
                 ]
                 : []))
         ]));
@@ -590,8 +605,10 @@ export const Cell = {
         const { $table, row, column, isHidden } = params;
         const tableProps = $table.props;
         const tableReactData = $table.reactData;
+        const tableInternalData = $table.internalData;
         const { treeConfig } = tableProps;
-        const { selectCheckboxMaps, treeIndeterminateMaps } = tableReactData;
+        const { updateCheckboxFlag } = tableReactData;
+        const { selectCheckboxMaps, treeIndeterminateRowMaps } = tableInternalData;
         const { computeCheckboxOpts } = $table.getComputeMaps();
         const checkboxOpts = computeCheckboxOpts.value;
         const { labelField, checkMethod, visibleMethod } = checkboxOpts;
@@ -605,7 +622,7 @@ export const Cell = {
         const ons = {};
         if (!isHidden) {
             const rowid = getRowid($table, row);
-            isChecked = !!selectCheckboxMaps[rowid];
+            isChecked = !!updateCheckboxFlag && !!selectCheckboxMaps[rowid];
             ons.onClick = (evnt) => {
                 if (!isDisabled && isVisible) {
                     $table.triggerCheckRowEvent(evnt, params, !isChecked);
@@ -615,7 +632,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 });
@@ -649,8 +666,10 @@ export const Cell = {
         const { $table, row, column, isHidden } = params;
         const tableProps = $table.props;
         const tableReactData = $table.reactData;
+        const tableInternalData = $table.internalData;
         const { treeConfig } = tableProps;
-        const { treeIndeterminateMaps } = tableReactData;
+        const { updateCheckboxFlag } = tableReactData;
+        const { treeIndeterminateRowMaps } = tableInternalData;
         const { computeCheckboxOpts } = $table.getComputeMaps();
         const checkboxOpts = computeCheckboxOpts.value;
         const { labelField, checkField, checkMethod, visibleMethod } = checkboxOpts;
@@ -665,7 +684,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.onClick = (evnt) => {
                 if (!isDisabled && isVisible) {
                     $table.triggerCheckRowEvent(evnt, params, !isChecked);
@@ -675,7 +694,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 });
@@ -710,8 +729,8 @@ export const Cell = {
      */
     renderExpandCell(params) {
         const { $table, isHidden, row, column } = params;
-        const tableReactData = $table.reactData;
-        const { rowExpandedMaps, rowExpandLazyLoadedMaps } = tableReactData;
+        const tableInternalData = $table.internalData;
+        const { rowExpandedMaps, rowExpandLazyLoadedMaps } = tableInternalData;
         const { computeExpandOpts } = $table.getComputeMaps();
         const expandOpts = computeExpandOpts.value;
         const { lazy, labelField, iconLoaded, showIcon, iconOpen, iconClose, visibleMethod } = expandOpts;
@@ -809,7 +828,7 @@ export const Cell = {
         const { $table, column } = params;
         const { computeSortOpts } = $table.getComputeMaps();
         const sortOpts = computeSortOpts.value;
-        const { showIcon, allowBtn, iconLayout, iconAsc, iconDesc, iconVisibleMethod } = sortOpts;
+        const { showIcon, allowBtn, ascTitle, descTitle, iconLayout, iconAsc, iconDesc, iconVisibleMethod } = sortOpts;
         const { order } = column;
         if (showIcon && (!iconVisibleMethod || iconVisibleMethod(params))) {
             return [
@@ -820,7 +839,7 @@ export const Cell = {
                         class: ['vxe-sort--asc-btn', iconAsc || getIcon().TABLE_SORT_ASC, {
                                 'sort--active': order === 'asc'
                             }],
-                        title: getI18n('vxe.table.sortAsc'),
+                        title: XEUtils.eqNull(ascTitle) ? getI18n('vxe.table.sortAsc') : `${ascTitle || ''}`,
                         onClick: allowBtn
                             ? (evnt) => {
                                 evnt.stopPropagation();
@@ -832,7 +851,7 @@ export const Cell = {
                         class: ['vxe-sort--desc-btn', iconDesc || getIcon().TABLE_SORT_DESC, {
                                 'sort--active': order === 'desc'
                             }],
-                        title: getI18n('vxe.table.sortDesc'),
+                        title: XEUtils.eqNull(descTitle) ? getI18n('vxe.table.sortDesc') : `${descTitle || ''}`,
                         onClick: allowBtn
                             ? (evnt) => {
                                 evnt.stopPropagation();

package/es/table/src/columnInfo.js

@@ -7,10 +7,10 @@ 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 tableProps = $xeTable.props;
+        const $xeGrid = $xeTable.xeGrid;
         const formatter = _vm.formatter;
         const visible = XEUtils.isBoolean(_vm.visible) ? _vm.visible : true;
-        const { props: 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(', ')]);

package/es/table/src/footer.js

@@ -49,10 +49,11 @@ export default defineComponent({
         const refFooterTFoot = ref();
         const refFooterXSpace = ref();
         const renderRows = (tableColumn, footerTableData, row, $rowIndex, _rowIndex) => {
+            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 = computeTooltipOpts.value;
             const resizableOpts = computeResizableOpts.value;
             const { isAllColumnDrag } = resizableOpts;
@@ -64,6 +65,7 @@ export default defineComponent({
             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;
@@ -79,12 +81,12 @@ export default defineComponent({
                 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,
@@ -250,7 +252,7 @@ export default defineComponent({
             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;
             // 如果是使用优化模式
@@ -262,7 +264,7 @@ export default defineComponent({
                     isOptimizeMode = true;
                 }
             }
-            if (fixedType || !overflowX) {
+            if (!isColLoading && (fixedType || !overflowX)) {
                 renderColumnList = visibleColumn;
             }
             if (fixedType) {
@@ -329,7 +331,10 @@ export default defineComponent({
                         }, renderColumnList.map((column, $columnIndex) => {
                             return h('col', {
                                 name: column.id,
-                                key: $columnIndex
+                                key: $columnIndex,
+                                style: {
+                                    width: `${column.renderWidth}px`
+                                }
                             });
                         })),
                         /**

package/es/table/src/header.js

@@ -33,10 +33,11 @@ export default defineComponent({
             headerColumn.value = isGroup ? convertHeaderColumnToRows(props.tableGroupColumn) : [];
         };
         const renderRows = (isGroup, isOptimizeMode, cols, $rowIndex) => {
+            const $xeGrid = $xeTable.xeGrid;
             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 = computeColumnOpts.value;
             const columnDragOpts = computeColumnDragOpts.value;
             const cellOpts = computeCellOpts.value;
@@ -47,6 +48,7 @@ export default defineComponent({
             return cols.map((column, $columnIndex) => {
                 const { type, showHeaderOverflow, headerAlign, align, filters, headerClassName, editRender, cellRender } = column;
                 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;
@@ -64,9 +66,9 @@ export default defineComponent({
                     firstFilterOption = filters[0];
                     hasFilter = filters.some((item) => item.checked);
                 }
-                const columnIndex = $xeTable.getColumnIndex(column);
-                const _columnIndex = $xeTable.getVTColumnIndex(column);
-                const cellParams = { $table: $xeTable, $grid: $xeTable.xegrid, $rowIndex, column, columnIndex, $columnIndex, _columnIndex, firstFilterOption, fixed: fixedType, type: renderType, isHidden: fixedHiddenColumn, hasFilter };
+                const columnIndex = colRest.index;
+                const _columnIndex = colRest._index;
+                const cellParams = { $table: $xeTable, $grid: $xeGrid, $rowIndex, column, columnIndex, $columnIndex, _columnIndex, firstFilterOption, fixed: fixedType, type: renderType, isHidden: fixedHiddenColumn, hasFilter };
                 const thAttrs = {
                     colid,
                     colspan: column.colSpan > 1 ? column.colSpan : null,
@@ -199,7 +201,7 @@ export default defineComponent({
         const renderVN = () => {
             const { fixedType, fixedColumn, tableColumn } = props;
             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 = computeMouseOpts.value;
             let renderHeaderList = headerColumn.value;
@@ -218,7 +220,7 @@ export default defineComponent({
                         isOptimizeMode = true;
                     }
                 }
-                if (fixedType || !overflowX) {
+                if (!isColLoading && (fixedType || !overflowX)) {
                     renderColumnList = visibleColumn;
                 }
                 if (fixedType) {
@@ -290,7 +292,10 @@ export default defineComponent({
                         }, renderColumnList.map((column, $columnIndex) => {
                             return h('col', {
                                 name: column.id,
-                                key: $columnIndex
+                                key: $columnIndex,
+                                style: {
+                                    width: `${column.renderWidth}px`
+                                }
                             });
                         })),
                         /**

package/es/table/src/props.js

@@ -182,6 +182,8 @@ export default {
     resizeConfig: Object,
     // 列配置信息
     columnConfig: Object,
+    // 当前列配置信息
+    currentColumnConfig: Object,
     // 单元格配置信息
     cellConfig: Object,
     // 表头单元格配置信息
@@ -190,6 +192,8 @@ export default {
     footerCellConfig: Object,
     // 行配置信息
     rowConfig: Object,
+    // 当前行配置信息
+    currentRowConfig: Object,
     // 已废弃，被 rowDragConfig 替换
     dragConfig: Object,
     // 行拖拽排序配置项