vxe-table 3.14.0-beta.9 → 3.14.0

package/packages/table/src/body.ts

@@ -2,7 +2,7 @@ import { PropType, CreateElement } from 'vue'
 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'
 
@@ -22,7 +22,7 @@ const isVMScrollProcess = ($xeTable: VxeTableConstructor & VxeTablePrivateMethod
   return !!(isDragResize || (lastScrollTime && Date.now() < lastScrollTime + (delayHover as number)))
 }
 
-function renderLine (h: CreateElement, _vm: any, params: VxeTableDefines.CellRenderBodyParams, cellHeight: number) {
+function renderLine (h: CreateElement, _vm: any, rowid: string, params: VxeTableDefines.CellRenderBodyParams, cellHeight: number) {
   const $xeTable = _vm.$parent as VxeTableConstructor & VxeTablePrivateMethods
   const tableProps = $xeTable
   const tableInternalData = $xeTable as unknown as TableInternalData
@@ -36,7 +36,6 @@ function renderLine (h: CreateElement, _vm: any, params: VxeTableDefines.CellRen
   if (slots && (slots as any).line) {
     return $xeTable.callSlot((slots as any).line, params, h)
   }
-  const rowid = getRowid($xeTable, row)
   const rest = fullAllDataRowIdData[rowid]
   let rLevel = 0
   let prevRow = null
@@ -89,10 +88,11 @@ function renderTdColumn (
   const tableProps = $xeTable
   const tableReactData = $xeTable as unknown as TableReactData
   const tableInternalData = $xeTable as unknown as TableInternalData
+  const $xeGrid = $xeTable.$xeGrid
 
-  const { fullAllDataRowIdData } = tableInternalData
+  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
@@ -108,19 +108,21 @@ function renderTdColumn (
   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
@@ -144,7 +146,7 @@ function renderTdColumn (
     $table: VxeTableConstructor<any> & VxeTablePrivateMethods
   } = {
     $table: $xeTable,
-    $grid: $xeTable.xegrid,
+    $grid: $xeGrid,
     isEdit: false,
     seq,
     rowid,
@@ -277,6 +279,18 @@ function renderTdColumn (
   }
 
   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 {
@@ -299,7 +313,7 @@ function renderTdColumn (
   } else {
     // 渲染单元格
     tdVNs.push(
-      ...renderLine(h, _vm, cellParams, cellHeight),
+      ...renderLine(h, _vm, rowid, cellParams, cellHeight),
       h('div', {
         key: 'tc',
         class: ['vxe-cell', {
@@ -436,8 +450,8 @@ function renderRows (h: CreateElement, _vm: any, fixedType: 'left' | 'right' | '
   const tableInternalData = $xeTable as unknown as TableInternalData
 
   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
@@ -448,6 +462,7 @@ function renderRows (h: CreateElement, _vm: any, fixedType: 'left' | 'right' | '
   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> = {}
     let rowIndex = $rowIndex
@@ -468,8 +483,8 @@ function renderRows (h: CreateElement, _vm: any, fixedType: 'left' | 'right' | '
         $xeTable.clearHoverRow()
       }
     }
-    const rowid = getRowid($xeTable, row)
-    const rowRest = fullAllDataRowIdData[rowid]
+    const rowid = handleGetRowId(row)
+    const rowRest = fullAllDataRowIdData[rowid] || {}
     let rowLevel = 0
     let seq: string | number = -1
     let _rowIndex = 0
@@ -484,7 +499,7 @@ function renderRows (h: CreateElement, _vm: any, fixedType: 'left' | 'right' | '
     }
     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 = []
@@ -495,7 +510,7 @@ function renderRows (h: CreateElement, _vm: any, fixedType: 'left' | 'right' | '
     }
     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)) {
@@ -514,7 +529,7 @@ function renderRows (h: CreateElement, _vm: any, fixedType: 'left' | 'right' | '
         '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) : ''
     ]
@@ -670,6 +685,7 @@ export default {
     const tableProps = $xeTable
     const tableReactData = $xeTable as unknown as TableReactData
     const tableInternalData = $xeTable as unknown as TableInternalData
+    const $xeGrid = $xeTable.$xeGrid
 
     const { xID, $scopedSlots } = $xeTable
     const { fixedColumn, fixedType, tableColumn } = props
@@ -695,7 +711,7 @@ export default {
       }
     }
 
-    if (fixedType || !overflowX) {
+    if (!isColLoading && (fixedType || !overflowX)) {
       renderColumnList = visibleColumn
     }
 
@@ -755,7 +771,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
       const rtEmptyView = compConf ? (compConf.renderTableEmpty || compConf.renderTableEmptyView || compConf.renderEmpty) : null
@@ -814,7 +830,10 @@ export default {
               attrs: {
                 name: column.id
               },
-              key: $columnIndex
+              key: $columnIndex,
+              style: {
+                width: `${column.renderWidth}px`
+              }
             })
           })),
           /**

package/packages/table/src/cell.ts

@@ -323,7 +323,7 @@ function renderFooterHandle (h: CreateElement, params: VxeTableDefines.CellRende
 }
 
 export const Cell = {
-  createColumn ($xetable: any, _vm: any) {
+  createColumn ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, _vm: any) {
     const { type } = _vm
     const renConfs: any = {
       renderHeader: renderHeaderHandle,
@@ -333,7 +333,7 @@ export const Cell = {
     if (type === 'expand') {
       renConfs.renderData = Cell.renderExpandData
     }
-    return createColumn($xetable, _vm, renConfs)
+    return createColumn($xeTable, _vm, renConfs)
   },
   /**
    * 列头标题
@@ -402,8 +402,8 @@ export const Cell = {
     const { $table, isHidden } = params
     const tableReactData = $table as unknown as TableReactData
     const tableInternalData = $table as unknown as TableInternalData
-    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
@@ -423,7 +423,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]
@@ -580,7 +580,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: Record<string, any> = {}
     if (!isHidden) {
       ons.click = (evnt: any) => {
@@ -593,11 +594,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,
@@ -609,18 +610,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)
             ]
           : []))
       ])
@@ -630,8 +631,10 @@ export const Cell = {
     const { $table, row, column, isHidden } = params
     const tableProps = $table
     const tableReactData = $table as unknown as TableReactData
+    const tableInternalData = $table as unknown as TableInternalData
     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
@@ -644,7 +647,7 @@ export const Cell = {
     const ons: Record<string, any> = {}
     if (!isHidden) {
       const rowid = getRowid($table, row)
-      isChecked = !!selectCheckboxMaps[rowid]
+      isChecked = !!updateCheckboxFlag && !!selectCheckboxMaps[rowid]
       ons.click = (evnt: any) => {
         if (!isDisabled && isVisible) {
           $table.triggerCheckRowEvent(evnt, params, !isChecked)
@@ -654,7 +657,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 }
@@ -695,8 +698,10 @@ export const Cell = {
     const { $table, row, column, isHidden } = params
     const tableProps = $table
     const tableReactData = $table as unknown as TableReactData
+    const tableInternalData = $table as unknown as TableInternalData
     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
@@ -710,7 +715,7 @@ export const Cell = {
     const ons: Record<string, any> = {}
     if (!isHidden) {
       const rowid = getRowid($table, row)
-      isChecked = XEUtils.get(row, checkField)
+      isChecked = !!updateCheckboxFlag && XEUtils.get(row, checkField)
       ons.click = (evnt: any) => {
         if (!isDisabled && isVisible) {
           $table.triggerCheckRowEvent(evnt, params, !isChecked)
@@ -720,7 +725,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 }
@@ -763,8 +768,8 @@ export const Cell = {
    */
   renderExpandCell (h: CreateElement, params: VxeTableDefines.CellRenderBodyParams & { $table: VxeTableConstructor & VxeTablePrivateMethods }) {
     const { $table, isHidden, row, column } = params
-    const tableReactData = $table as unknown as TableReactData
-    const { rowExpandedMaps, rowExpandLazyLoadedMaps } = tableReactData
+    const tableInternalData = $table as unknown as TableInternalData
+    const { rowExpandedMaps, rowExpandLazyLoadedMaps } = tableInternalData
     const expandOpts = $table.computeExpandOpts
     const { lazy, labelField, iconLoaded, showIcon, iconOpen, iconClose, visibleMethod } = expandOpts
     const { slots } = column
@@ -871,7 +876,7 @@ export const Cell = {
   renderSortIcon (h: CreateElement, params: (VxeTableDefines.CellRenderHeaderParams | VxeTableDefines.CellRenderHeaderParams) & { $table: VxeTableConstructor & VxeTablePrivateMethods }) {
     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', {
@@ -882,7 +887,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
               ? {
@@ -898,7 +903,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/packages/table/src/column.ts

@@ -3,7 +3,7 @@ import Cell from './cell'
 import { defineVxeComponent } from '../../ui/src/comp'
 import { assembleColumn, destroyColumn } from './util'
 
-import type { VxeColumnPropTypes } from '../../../types'
+import type { VxeColumnPropTypes, VxeTableConstructor, VxeTablePrivateMethods } from '../../../types'
 
 export const columnProps = {
   // 列唯一主键
@@ -136,13 +136,15 @@ export const columnProps = {
 export const columnWatch: Record<string, any> = {}
 Object.keys(columnProps).forEach(name => {
   columnWatch[name] = function (value: any) {
+    const $xeTable = this.$xeTable as VxeTableConstructor & VxeTablePrivateMethods
+
     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()
       }
     }
   }
@@ -153,21 +155,23 @@ export default /* define-vxe-component start */ defineVxeComponent({
   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: any) {
-    this.columnConfig = this.createColumn(this.$xetable, this)
+    const $xeTable = this.$xeTable as VxeTableConstructor & VxeTablePrivateMethods
+
+    this.columnConfig = this.createColumn($xeTable, this)
   },
   mounted () {
     this.columnConfig.slots = this.$scopedSlots

package/packages/table/src/columnInfo.ts

@@ -4,16 +4,19 @@ import { toFilters } from './util'
 import { getFuncText } from '../../ui/src/utils'
 import { warnLog, errLog } from '../../ui/src/log'
 
+import type { VxeTableConstructor, VxeTablePrivateMethods, VxeGridConstructor, GridPrivateMethods } from '../../../types'
+
 const { getI18n, formats } = VxeUI
 
 export class ColumnInfo {
   /* eslint-disable @typescript-eslint/no-use-before-define */
-  constructor ($xetable: any, _vm: any, { renderHeader, renderCell, renderFooter, renderData }: any = {}) {
-    const $xegrid = $xetable.$xegrid
-    const proxyOpts = $xegrid ? $xegrid.proxyOpts : null
+  constructor ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, _vm: any, { renderHeader, renderCell, renderFooter, renderData }: any = {}) {
+    const tableProps = $xeTable
+    const $xeGrid = $xeTable.$xeGrid as VxeGridConstructor & GridPrivateMethods
+
+    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) {
@@ -27,7 +30,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'])
       }
     }
@@ -144,7 +147,7 @@ export class ColumnInfo {
       slots: _vm.slots
     })
     if (proxyOpts && proxyOpts.beforeColumn) {
-      proxyOpts.beforeColumn({ $grid: $xegrid, column: this })
+      proxyOpts.beforeColumn({ $grid: $xeGrid, column: this })
     }
   }
 

package/packages/table/src/footer.ts

@@ -31,11 +31,12 @@ function renderRows (h: CreateElement, _vm: any, tableColumn: VxeTableDefines.Co
   const tableProps = $xeTable
   const tableReactData = $xeTable as unknown as TableReactData
   const tableInternalData = $xeTable as unknown as TableInternalData
+  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
@@ -47,6 +48,7 @@ function renderRows (h: CreateElement, _vm: any, tableColumn: VxeTableDefines.Co
   return tableColumn.map((column: any, $columnIndex: any) => {
     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
@@ -62,14 +64,14 @@ function renderRows (h: CreateElement, _vm: any, tableColumn: VxeTableDefines.Co
     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,
@@ -314,7 +316,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 as VxeTableDefines.ColumnInfo[]
     let isOptimizeMode = false
@@ -327,7 +329,7 @@ export default {
       }
     }
 
-    if (fixedType || !overflowX) {
+    if (!isColLoading && (fixedType || !overflowX)) {
       renderColumnList = visibleColumn
     }
 
@@ -404,7 +406,10 @@ export default {
               attrs: {
                 name: column.id
               },
-              key: $columnIndex
+              key: $columnIndex,
+              style: {
+                width: `${column.renderWidth}px`
+              }
             })
           })),
           /**

package/packages/table/src/group.ts

@@ -3,26 +3,30 @@ import { defineVxeComponent } from '../../ui/src/comp'
 import { assembleColumn, destroyColumn } from './util'
 import { columnProps, columnWatch } from './column'
 
+import type { VxeTableConstructor, VxeTablePrivateMethods } from '../../../types'
+
 export default /* define-vxe-component start */ defineVxeComponent({
   name: 'VxeColgroup',
   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: any) {
-    this.columnConfig = this.createColumn(this.$xetable, this)
+    const $xeTable = this.$xeTable as VxeTableConstructor & VxeTablePrivateMethods
+
+    this.columnConfig = this.createColumn($xeTable, this)
   },
   mounted () {
     const { $scopedSlots } = this

package/packages/table/src/header.ts

@@ -13,7 +13,7 @@ const cellType = 'header'
 const renderRows = (h: CreateElement, _vm: any, isGroup: boolean, isOptimizeMode: boolean, cols: VxeTableDefines.ColumnInfo[], $rowIndex: number) => {
   const props = _vm
   const $xeTable = _vm.$parent as VxeTableConstructor & VxeTablePrivateMethods
-  const $xeGrid = $xeTable.xegrid
+  const $xeGrid = $xeTable.$xeGrid
   const tableProps = $xeTable
   const tableReactData = $xeTable as unknown as TableReactData
   const tableInternalData = $xeTable as unknown as TableInternalData
@@ -21,7 +21,7 @@ const renderRows = (h: CreateElement, _vm: any, isGroup: boolean, isOptimizeMode
   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
@@ -33,6 +33,7 @@ const renderRows = (h: CreateElement, _vm: any, isGroup: boolean, isOptimizeMode
     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
@@ -50,8 +51,8 @@ const renderRows = (h: CreateElement, _vm: any, isGroup: boolean, isOptimizeMode
       firstFilterOption = filters[0]
       hasFilter = filters.some((item: VxeColumnPropTypes.FilterItem) => 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: Record<string, string | number | null> = {
       colid,
@@ -272,7 +273,7 @@ export default {
     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
@@ -292,7 +293,7 @@ export default {
         }
       }
 
-      if (fixedType || !overflowX) {
+      if (!isColLoading && (fixedType || !overflowX)) {
         renderColumnList = visibleColumn
       }
 
@@ -374,7 +375,10 @@ export default {
               attrs: {
                 name: column.id
               },
-              key: $columnIndex
+              key: $columnIndex,
+              style: {
+                width: `${column.renderWidth}px`
+              }
             })
           })),
           /**
@@ -413,8 +417,11 @@ export default {
   },
   methods: {
     uploadColumn () {
-      const { $parent: $xetable } = this
-      this.headerColumn = $xetable.isGroup ? convertHeaderColumnToRows(this.tableGroupColumn) : []
+      const $xeTable = this.$parent as VxeTableConstructor & VxeTablePrivateMethods
+      const tableReactData = $xeTable as unknown as TableReactData
+
+      const { isGroup } = tableReactData
+      this.headerColumn = isGroup ? convertHeaderColumnToRows(this.tableGroupColumn) : []
     }
   } as any
 } as any