vxe-table 4.12.0-beta.9 → 4.12.1

package/packages/table/src/body.ts

@@ -1,7 +1,7 @@
 import { defineComponent, TransitionGroup, h, ref, Ref, PropType, 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'
@@ -27,7 +27,7 @@ export default defineComponent({
     const $xeTable = inject('$xeTable', {} as VxeTableConstructor & VxeTablePrivateMethods)
 
     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() as Ref<HTMLDivElement>
     const refBodyScroll = ref() as Ref<HTMLDivElement>
@@ -45,7 +45,7 @@ export default defineComponent({
       return !!(isDragResize || (lastScrollTime && Date.now() < lastScrollTime + (delayHover as number)))
     }
 
-    const renderLine = (params: VxeTableDefines.CellRenderBodyParams, cellHeight: number) => {
+    const renderLine = (rowid: string, params: VxeTableDefines.CellRenderBodyParams, cellHeight: number) => {
       const { row, column } = params
       const { afterFullData } = tableInternalData
       const { treeConfig } = tableProps
@@ -55,7 +55,6 @@ export default defineComponent({
       if (slots && (slots as any).line) {
         return $xeTable.callSlot((slots as any).line, params)
       }
-      const rowid = getRowid($xeTable, row)
       const rest = fullAllDataRowIdData[rowid]
       let rLevel = 0
       let prevRow = null
@@ -102,9 +101,11 @@ export default defineComponent({
       columns: VxeTableDefines.ColumnInfo[],
       items: any[]
     ) => {
-      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
@@ -121,19 +122,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
@@ -157,7 +160,7 @@ export default defineComponent({
         $table: VxeTableConstructor<any> & VxeTablePrivateMethods
       } = {
         $table: $xeTable,
-        $grid: $xeTable.xegrid,
+        $grid: $xeGrid,
         isEdit: false,
         seq,
         rowid,
@@ -290,6 +293,18 @@ export default defineComponent({
       }
 
       const tcStyle: Record<string, string> = {}
+      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`
       } else {
@@ -312,7 +327,7 @@ export default defineComponent({
       } else {
         // 渲染单元格
         tdVNs.push(
-          ...renderLine(cellParams, cellHeight),
+          ...renderLine(rowid, cellParams, cellHeight),
           h('div', {
             key: 'tc',
             class: ['vxe-cell', {
@@ -436,8 +451,8 @@ export default defineComponent({
 
     const renderRows = (fixedType: 'left' | 'right' | '', isOptimizeMode: boolean, tableData: any[], tableColumn: VxeTableDefines.ColumnInfo[]) => {
       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
@@ -448,11 +463,15 @@ export default defineComponent({
       const { transform, seqMode } = treeOpts
       const childrenField = treeOpts.children || treeOpts.childrenField
       const rows: any[] = []
+      const { handleGetRowId } = createHandleGetRowId($xeTable)
       tableData.forEach((row, $rowIndex) => {
-        const trOn: Record<string, any> = {}
+        const rowid = handleGetRowId(row)
+        const rowRest = fullAllDataRowIdData[rowid] || {}
         let rowIndex = $rowIndex
-        // 确保任何情况下 rowIndex 都精准指向真实 data 索引
-        rowIndex = $xeTable.getRowIndex(row)
+        let rowLevel = 0
+        let seq: string | number = -1
+        let _rowIndex = -1
+        const trOn: Record<string, any> = {}
         // 当前行事件
         if (rowOpts.isHover || highlightHoverRow) {
           trOn.onMouseenter = (evnt: MouseEvent) => {
@@ -468,11 +487,6 @@ export default defineComponent({
             $xeTable.clearHoverRow()
           }
         }
-        const rowid = getRowid($xeTable, row)
-        const rowRest = fullAllDataRowIdData[rowid]
-        let rowLevel = 0
-        let seq: string | number = -1
-        let _rowIndex = 0
         if (rowRest) {
           rowLevel = rowRest.level
           if (treeConfig && transform && seqMode === 'increasing') {
@@ -480,11 +494,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 = []
@@ -494,7 +509,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)) {
@@ -513,7 +528,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)
         ]
@@ -639,6 +654,7 @@ export default defineComponent({
 
     const renderVN = () => {
       const { slots } = tableContext
+      const $xeGrid = $xeTable.xeGrid
 
       const { fixedColumn, fixedType, tableColumn } = props
       const { spanMethod, footerSpanMethod, mouseConfig } = tableProps
@@ -662,7 +678,7 @@ export default defineComponent({
         }
       }
 
-      if (fixedType || !overflowX) {
+      if (!isColLoading && (fixedType || !overflowX)) {
         renderColumnList = visibleColumn
       }
 
@@ -723,7 +739,7 @@ export default defineComponent({
       let emptyContent: string | VxeComponentSlotType | VxeComponentSlotType[]
       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
         const rtEmptyView = compConf ? (compConf.renderTableEmpty || compConf.renderTableEmptyView || compConf.renderEmpty) : null
@@ -776,7 +792,10 @@ export default defineComponent({
             }, renderColumnList.map((column, $columnIndex) => {
               return h('col', {
                 name: column.id,
-                key: $columnIndex
+                key: $columnIndex,
+                style: {
+                  width: `${column.renderWidth}px`
+                }
               })
             })),
             /**

package/packages/table/src/cell.ts

@@ -228,15 +228,27 @@ function getFooterContent (params: VxeTableDefines.CellRenderFooterParams & { $t
   })
   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)
@@ -248,7 +260,9 @@ function getFooterContent (params: VxeTableDefines.CellRenderFooterParams & { $t
     }
   }
   return [
-    formatText(itemValue, 1)
+    h('span', {
+      class: 'vxe-cell--label'
+    }, formatText(itemValue, 1))
   ]
 }
 
@@ -415,8 +429,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
@@ -436,7 +450,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]
@@ -598,7 +612,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: Record<string, any> = {}
     if (!isHidden) {
       ons.onClick = (evnt: MouseEvent) => {
@@ -611,11 +626,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,
@@ -626,17 +641,17 @@ export const Cell = {
             'is--disabled': isAllCheckboxDisabled,
             'is--indeterminate': isAllCheckboxIndeterminate
           }],
-          title: getI18n('vxe.table.allTitle'),
+          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)
             ]
           : []))
       ])
@@ -646,8 +661,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
@@ -661,7 +678,7 @@ export const Cell = {
     const ons: Record<string, any> = {}
     if (!isHidden) {
       const rowid = getRowid($table, row)
-      isChecked = !!selectCheckboxMaps[rowid]
+      isChecked = !!updateCheckboxFlag && !!selectCheckboxMaps[rowid]
       ons.onClick = (evnt: MouseEvent) => {
         if (!isDisabled && isVisible) {
           $table.triggerCheckRowEvent(evnt, params, !isChecked)
@@ -671,7 +688,7 @@ export const Cell = {
         isDisabled = !checkMethod({ row })
       }
       if (treeConfig) {
-        indeterminate = !!treeIndeterminateMaps[rowid]
+        indeterminate = !!treeIndeterminateRowMaps[rowid]
       }
     }
     const checkboxParams = { ...params, checked: isChecked, disabled: isDisabled, visible: isVisible, indeterminate }
@@ -712,8 +729,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
@@ -728,7 +747,7 @@ export const Cell = {
     const ons: Record<string, any> = {}
     if (!isHidden) {
       const rowid = getRowid($table, row)
-      isChecked = XEUtils.get(row, checkField as string)
+      isChecked = !!updateCheckboxFlag && XEUtils.get(row, checkField)
       ons.onClick = (evnt: MouseEvent) => {
         if (!isDisabled && isVisible) {
           $table.triggerCheckRowEvent(evnt, params, !isChecked)
@@ -738,7 +757,7 @@ export const Cell = {
         isDisabled = !checkMethod({ row })
       }
       if (treeConfig) {
-        isIndeterminate = !!treeIndeterminateMaps[rowid]
+        isIndeterminate = !!treeIndeterminateRowMaps[rowid]
       }
     }
     const checkboxParams = { ...params, checked: isChecked, disabled: isDisabled, visible: isVisible, indeterminate: isIndeterminate }
@@ -781,8 +800,8 @@ export const Cell = {
    */
   renderExpandCell (params: VxeTableDefines.CellRenderBodyParams & { $table: VxeTableConstructor & VxeTablePrivateMethods }) {
     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
@@ -889,7 +908,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 [
@@ -900,7 +919,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: Event) => {
                   evnt.stopPropagation()
@@ -912,7 +931,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: Event) => {
                   evnt.stopPropagation()

package/packages/table/src/columnInfo.ts

@@ -10,10 +10,11 @@ const { getI18n, formats } = VxeUI
 export class ColumnInfo {
   /* eslint-disable @typescript-eslint/no-use-before-define */
   constructor ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, _vm: any, { renderHeader, renderCell, renderFooter, renderData }: any = {}) {
-    const $xeGrid = $xeTable.xegrid
+    const tableProps = $xeTable.props
+    const $xeGrid = $xeTable.xeGrid
+
     const formatter: string | any[] = _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) {

package/packages/table/src/footer.ts

@@ -58,10 +58,12 @@ export default defineComponent({
     const refFooterXSpace = ref() as Ref<HTMLDivElement>
 
     const renderRows = (tableColumn: VxeTableDefines.ColumnInfo[], footerTableData: any[], row: any, $rowIndex: number, _rowIndex: number) => {
+      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
@@ -74,6 +76,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
@@ -89,14 +92,14 @@ export default defineComponent({
         const showResizable = (XEUtils.isBoolean(column.resizable) ? column.resizable : (columnOpts.resizable || allResizable))
         const attrs: any = { colid }
         const tfOns: any = {}
-        const columnIndex = $xeTable.getColumnIndex(column)
-        const _columnIndex = $xeTable.getVTColumnIndex(column)
+        const columnIndex = colRest.index
+        const _columnIndex = colRest._index
         const itemIndex = _columnIndex
         const cellParams: VxeTableDefines.CellRenderFooterParams & {
           $table: VxeTableConstructor<any> & VxeTablePrivateMethods
         } = {
           $table: $xeTable,
-          $grid: $xeTable.xegrid,
+          $grid: $xeGrid,
           row,
           rowIndex: _rowIndex,
           _rowIndex,
@@ -272,7 +275,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
@@ -285,7 +288,7 @@ export default defineComponent({
         }
       }
 
-      if (fixedType || !overflowX) {
+      if (!isColLoading && (fixedType || !overflowX)) {
         renderColumnList = visibleColumn
       }
 
@@ -354,7 +357,10 @@ export default defineComponent({
             }, renderColumnList.map((column, $columnIndex) => {
               return h('col', {
                 name: column.id,
-                key: $columnIndex
+                key: $columnIndex,
+                style: {
+                  width: `${column.renderWidth}px`
+                }
               })
             })),
             /**

package/packages/table/src/header.ts

@@ -43,10 +43,12 @@ export default defineComponent({
     }
 
     const renderRows = (isGroup: boolean, isOptimizeMode: boolean, cols: VxeTableDefines.ColumnInfo[], $rowIndex: number) => {
+      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
@@ -57,6 +59,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
@@ -74,11 +77,11 @@ export default defineComponent({
           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: VxeTableDefines.CellRenderHeaderParams & {
           $table: VxeTableConstructor & VxeTablePrivateMethods
-        } = { $table: $xeTable, $grid: $xeTable.xegrid, $rowIndex, column, columnIndex, $columnIndex, _columnIndex, firstFilterOption, fixed: fixedType, type: renderType, isHidden: fixedHiddenColumn, hasFilter }
+        } = { $table: $xeTable, $grid: $xeGrid, $rowIndex, column, columnIndex, $columnIndex, _columnIndex, firstFilterOption, fixed: fixedType, type: renderType, isHidden: fixedHiddenColumn, hasFilter }
         const thAttrs: Record<string, string | number | null> = {
           colid,
           colspan: column.colSpan > 1 ? column.colSpan : null,
@@ -223,7 +226,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
@@ -243,7 +246,7 @@ export default defineComponent({
           }
         }
 
-        if (fixedType || !overflowX) {
+        if (!isColLoading && (fixedType || !overflowX)) {
           renderColumnList = visibleColumn
         }
 
@@ -317,7 +320,10 @@ export default defineComponent({
             }, renderColumnList.map((column, $columnIndex) => {
               return h('col', {
                 name: column.id,
-                key: $columnIndex
+                key: $columnIndex,
+                style: {
+                  width: `${column.renderWidth}px`
+                }
               })
             })),
             /**

package/packages/table/src/props.ts

@@ -188,6 +188,8 @@ export default {
   resizeConfig: Object as PropType<VxeTablePropTypes.ResizeConfig>,
   // 列配置信息
   columnConfig: Object as PropType<VxeTablePropTypes.ColumnConfig>,
+  // 当前列配置信息
+  currentColumnConfig: Object as PropType<VxeTablePropTypes.CurrentColumnConfig>,
   // 单元格配置信息
   cellConfig: Object as PropType<VxeTablePropTypes.CellConfig>,
   // 表头单元格配置信息
@@ -196,6 +198,8 @@ export default {
   footerCellConfig: Object as PropType<VxeTablePropTypes.FooterCellConfig>,
   // 行配置信息
   rowConfig: Object as PropType<VxeTablePropTypes.RowConfig>,
+  // 当前行配置信息
+  currentRowConfig: Object as PropType<VxeTablePropTypes.CurrentRowConfig>,
   // 已废弃，被 rowDragConfig 替换
   dragConfig: Object as PropType<VxeTablePropTypes.DragConfig>,
   // 行拖拽排序配置项