vxe-table 3.18.0 → 3.18.2

package/packages/table/module/edit/mixin.ts

@@ -107,14 +107,18 @@ function handleInsertRowAt ($xeTable: VxeTableConstructor & VxeTablePrivateMetho
 
   const { treeConfig } = props
   const { isRowGroupStatus } = reactData
-  const { tableFullTreeData, afterFullData, mergeBodyList, tableFullData, fullDataRowIdData, fullAllDataRowIdData, insertRowMaps } = internalData
+  const { tableFullTreeData, afterFullData, mergeBodyList, tableFullData, fullDataRowIdData, fullAllDataRowIdData, insertRowMaps, removeRowMaps } = internalData
   const treeOpts = $xeTable.computeTreeOpts
-  const { transform, rowField, mapChildrenField } = treeOpts
+  const { transform, parentField, rowField, mapChildrenField } = treeOpts
   const childrenField = treeOpts.children || treeOpts.childrenField
   if (!XEUtils.isArray(records)) {
     records = [records]
   }
   const newRecords: any[] = $xeTable.defineField(records.map(record => Object.assign(treeConfig && transform ? { [mapChildrenField]: [], [childrenField]: [] } : {}, record)))
+  let treeRecords: any[] = []
+  if (treeConfig && transform) {
+    treeRecords = XEUtils.toArrayTree(newRecords, { key: rowField, parentKey: parentField, children: childrenField })
+  }
   if (XEUtils.eqNull(targetRow)) {
     // 如果为虚拟树
     if (treeConfig && transform) {
@@ -168,42 +172,49 @@ function handleInsertRowAt ($xeTable: VxeTableConstructor & VxeTablePrivateMetho
     } else {
       // 如果为虚拟树
       if (treeConfig && transform) {
-        const matchMapObj = XEUtils.findTree(tableFullTreeData, (item: any) => targetRow[rowField] === item[rowField], { children: mapChildrenField })
+        const matchMapObj = XEUtils.findTree(tableFullTreeData, item => targetRow[rowField] === item[rowField], { children: mapChildrenField })
         if (matchMapObj) {
-          const { parent: parentRow } = matchMapObj as any
+          const { parent: parentRow } = matchMapObj
           const parentMapChilds = parentRow ? parentRow[mapChildrenField] : tableFullTreeData
           const parentRest = fullAllDataRowIdData[getRowid($xeTable, parentRow)]
           const parentLevel = parentRest ? parentRest.level : 0
-          newRecords.forEach((item: any, i: any) => {
-            const rowid = getRowid($xeTable, item)
-            if (item[treeOpts.parentField]) {
-              if (parentRow && item[treeOpts.parentField] !== parentRow[rowField]) {
-                errLog('vxe.error.errProp', [`${treeOpts.parentField}=${item[treeOpts.parentField]}`, `${treeOpts.parentField}=${parentRow[rowField]}`])
-              }
-            }
+          treeRecords.forEach((row, i) => {
             if (parentRow) {
-              item[treeOpts.parentField] = parentRow[rowField]
+              if (row[parentField] !== parentRow[rowField]) {
+                row[parentField] = parentRow[rowField]
+                errLog('vxe.error.errProp', [`${parentField}=${row[parentField]}`, `${parentField}=${parentRow[rowField]}`])
+              }
+            } else {
+              if (row[parentField] !== null) {
+                row[parentField] = null
+                errLog('vxe.error.errProp', [`${parentField}=${row[parentField]}`, 'null'])
+              }
             }
             let targetIndex = matchMapObj.index + i
             if (isInsertNextRow) {
               targetIndex = targetIndex + 1
             }
-            parentMapChilds.splice(targetIndex, 0, item)
+            parentMapChilds.splice(targetIndex, 0, row)
+          })
+          XEUtils.eachTree(treeRecords, (item) => {
+            const rowid = getRowid($xeTable, item)
             const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, $index: -1, treeIndex: -1, _tIndex: -1, items: parentMapChilds, parent: parentRow, level: parentLevel + 1, height: 0, resizeHeight: 0, oTop: 0, expandHeight: 0 }
+            if (item[childrenField]) {
+              item[mapChildrenField] = item[childrenField]
+            }
             fullDataRowIdData[rowid] = rest
             fullAllDataRowIdData[rowid] = rest
-          })
-
+          }, { children: childrenField })
           // 源
           if (parentRow) {
-            const matchObj = XEUtils.findTree(tableFullTreeData, (item: any) => targetRow[rowField] === item[rowField], { children: childrenField })
+            const matchObj = XEUtils.findTree(tableFullTreeData, item => targetRow[rowField] === item[rowField], { children: childrenField })
             if (matchObj) {
               const parentChilds = matchObj.items
               let targetIndex = matchObj.index
               if (isInsertNextRow) {
                 targetIndex = targetIndex + 1
               }
-              parentChilds.splice(targetIndex, 0, ...newRecords)
+              parentChilds.splice(targetIndex, 0, ...treeRecords)
             }
           }
         } else {
@@ -234,7 +245,7 @@ function handleInsertRowAt ($xeTable: VxeTableConstructor & VxeTablePrivateMetho
           afIndex = Math.min(afterFullData.length, afIndex + 1)
         }
         if (afIndex === -1) {
-          throw new Error(errLog('vxe.error.unableInsert'))
+          throw new Error(getI18n('vxe.error.unableInsert'))
         }
         afterFullData.splice(afIndex, 0, ...newRecords)
         const tfIndex = $xeTable.findRowIndexOf(tableFullData, targetRow)
@@ -255,10 +266,27 @@ function handleInsertRowAt ($xeTable: VxeTableConstructor & VxeTablePrivateMetho
       }
     }
   }
-  newRecords.forEach(newRow => {
+
+  const handleStatus = (newRow: any) => {
     const rowid = getRowid($xeTable, newRow)
-    insertRowMaps[rowid] = newRow
-  })
+    // 如果是被删除的数据，则还原状态
+    if (removeRowMaps[rowid]) {
+      delete removeRowMaps[rowid]
+      if (insertRowMaps[rowid]) {
+        delete insertRowMaps[rowid]
+      }
+    } else {
+      insertRowMaps[rowid] = newRow
+    }
+  }
+  // 如果为虚拟树
+  if (treeConfig && transform) {
+    XEUtils.eachTree(treeRecords, handleStatus, { children: mapChildrenField })
+  } else {
+    newRecords.forEach(handleStatus)
+  }
+
+  reactData.removeRowFlag++
   reactData.insertRowFlag++
   $xeTable.cacheRowMap(false)
   $xeTable.updateScrollYStatus()
@@ -815,7 +843,12 @@ export default {
       const { editStore } = reactData
       const { row, column } = editStore.actived
       if (column && row) {
-        return { row, column }
+        return {
+          row,
+          rowIndex: $xeTable.getRowIndex(row),
+          column,
+          columnIndex: $xeTable.getColumnIndex(column)
+        }
       }
       return null
     },
@@ -1008,7 +1041,10 @@ export default {
       const { editStore } = reactData
       const { row, column } = editStore.selected
       if (row && column) {
-        return { row, column }
+        return {
+          row,
+          column
+        }
       }
       return null
     },

package/packages/table/module/filter/mixin.ts

@@ -15,11 +15,13 @@ export default {
      * @param column
      */
     _openFilter (fieldOrColumn: any) {
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+
       const column = handleFieldOrColumn(this, fieldOrColumn)
       if (column && column.filters) {
         const { elemStore } = this
         const { fixed } = column
-        return this.scrollToColumn(column).then(() => {
+        return $xeTable.scrollToColumn(column).then(() => {
           const headerWrapperElem = elemStore[`${fixed || 'main'}-header-wrapper`] || elemStore['main-header-wrapper']
           if (headerWrapperElem) {
             const filterBtnElem = headerWrapperElem.querySelector(`.vxe-header--column.${column.id} .vxe-cell--filter`)
@@ -27,7 +29,7 @@ export default {
           }
         })
       }
-      return this.$nextTick()
+      return $xeTable.$nextTick()
     },
     /**
      * 修改筛选条件列表
@@ -195,9 +197,9 @@ export default {
       return filterList
     },
     handleColumnConfirmFilter (column: VxeTableDefines.ColumnInfo, evnt: Event | null) {
-      const $xeTable = this
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
       const props = $xeTable
-      const reactData = $xeTable
+      const reactData = $xeTable as unknown as TableReactData
 
       const { mouseConfig } = props
       const { scrollXLoad: oldScrollXLoad, scrollYLoad: oldScrollYLoad } = reactData
@@ -212,22 +214,22 @@ export default {
           datas.push(item.data)
         }
       })
-      const filterList = this.getCheckedFilters()
-      const params = { $table: this, $event: evnt, column, field, property: field, values, datas, filters: filterList, filterList }
+      const filterList = $xeTable.getCheckedFilters()
+      const params = { $table: $xeTable, $event: evnt as Event, column, field, property: field, values, datas, filters: filterList, filterList }
       // 如果是服务端筛选，则跳过本地筛选处理
       if (!filterOpts.remote) {
-        this.handleTableData(true)
-        this.checkSelectionStatus()
+        $xeTable.handleTableData(true)
+        $xeTable.checkSelectionStatus()
       }
-      if (mouseConfig && mouseOpts.area && this.handleFilterEvent) {
-        $xeTable.handleFilterEvent(evnt, params)
+      if (mouseConfig && mouseOpts.area && $xeTable.handleFilterEvent) {
+        $xeTable.handleFilterEvent(evnt as Event, params)
       }
       if (evnt) {
-        $xeTable.emitEvent('filter-change', params, evnt)
+        $xeTable.dispatchEvent('filter-change', params, evnt)
       }
       $xeTable.closeFilter()
       return $xeTable.updateFooter().then(() => {
-        const { scrollXLoad, scrollYLoad } = this
+        const { scrollXLoad, scrollYLoad } = reactData
         if ((oldScrollXLoad || scrollXLoad) || (oldScrollYLoad || scrollYLoad)) {
           if ((oldScrollXLoad || scrollXLoad)) {
             $xeTable.updateScrollXSpace()
@@ -259,6 +261,8 @@ export default {
       $xeTable.handleColumnConfirmFilter(column, evnt)
     },
     handleClearFilter (column: any) {
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+
       if (column) {
         const { filters, filterRender } = column
         if (filters) {
@@ -272,7 +276,7 @@ export default {
             }
           })
           if (filterResetMethod) {
-            filterResetMethod({ options: filters, column, $table: this })
+            filterResetMethod({ options: filters, column, $table: $xeTable })
           }
         }
       }

package/packages/table/module/menu/mixin.ts

@@ -105,22 +105,29 @@ export default {
           const params: any = { type: layout, $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, columns: this.visibleColumn.slice(0), $event: evnt }
           if (columnTargetNode.flag) {
             const cell = columnTargetNode.targetElem
-            const column = this.getColumnNode(cell).item
+            const columnNodeRest = $xeTable.getColumnNode(cell)
+            const column = columnNodeRest ? columnNodeRest.item : null
             let typePrefix = `${layout}-`
-            Object.assign(params, { column, columnIndex: this.getColumnIndex(column), cell })
+            if (column) {
+              Object.assign(params, { column, columnIndex: $xeTable.getColumnIndex(column), cell })
+            }
             if (layout === 'body') {
-              const row = this.getRowNode(cell.parentNode).item
+              const rowNodeRest = $xeTable.getRowNode(cell.parentNode)
+              const row = rowNodeRest ? rowNodeRest.item : null
               typePrefix = ''
-              params.row = row
-              params.rowIndex = this.getRowIndex(row)
+              if (row) {
+                params.row = row
+                params.rowIndex = $xeTable.getRowIndex(row)
+              }
             }
+            const eventType = `${typePrefix}cell-menu` as 'cell-menu' | 'header-cell-menu' | 'footer-cell-menu'
             this.handleOpenMenuEvent(evnt, layout, params)
             // 在 v4 中废弃事件 cell-context-menu、header-cell-context-menu、footer-cell-context-menu
             if (this.$listeners[`${typePrefix}cell-context-menu`]) {
               warnLog('vxe.error.delEvent', [`${typePrefix}cell-context-menu`, `${typePrefix}cell-menu`])
-              this.emitEvent(`${typePrefix}cell-context-menu`, params, evnt)
+              $xeTable.dispatchEvent(`${typePrefix}cell-context-menu` as any, params, evnt)
             } else {
-              this.emitEvent(`${typePrefix}cell-menu`, params, evnt)
+              $xeTable.dispatchEvent(eventType, params, evnt)
             }
             return
           } else if (getEventTargetNode(evnt, this.$el, `vxe-table--${layout}-wrapper`, target => target.getAttribute('xid') === tId).flag) {
@@ -271,9 +278,9 @@ export default {
         // 在 v4 中废弃事件 context-menu-click
         if (this.$listeners['context-menu-click']) {
           warnLog('vxe.error.delEvent', ['context-menu-click', 'menu-click'])
-          this.emitEvent('context-menu-click', params, evnt)
+          $xeTable.dispatchEvent('context-menu-click' as any, params, evnt)
         } else {
-          this.emitEvent('menu-click', params, evnt)
+          $xeTable.dispatchEvent('menu-click', params, evnt)
         }
         this.closeMenu()
       }

package/packages/table/module/validator/mixin.ts

@@ -5,7 +5,7 @@ import { scrollToView } from '../../../ui/src/dom'
 import { handleFieldOrColumn, getRowid } from '../../src/util'
 import { warnLog, errLog } from '../../../ui/src/log'
 
-import type { VxeTableDefines, TableInternalData, TableReactData } from '../../../../types'
+import type { VxeTableDefines, TableInternalData, TableReactData, VxeTableConstructor, VxeTablePrivateMethods } from '../../../../types'
 
 const { getConfig, validators } = VxeUI
 
@@ -185,10 +185,12 @@ export default {
      * 聚焦到校验通过的单元格并弹出校验错误提示
      */
     handleValidError (params: any) {
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+
       const { validOpts } = this
       return new Promise<void>(resolve => {
         if (validOpts.autoPos === false) {
-          this.emitEvent('valid-error', params)
+          $xeTable.dispatchEvent('valid-error', params, null)
           resolve()
         } else {
           this.handleEdit(params, { type: 'valid-error', trigger: 'call' }).then(() => {
@@ -227,7 +229,7 @@ export default {
      * 返回 Promise 对象，或者使用回调方式
      */
     beginValidate (rows: any, cols: VxeTableDefines.ColumnInfo[] | null, cb: any, isFull: any) {
-      const $xeTable = this
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
       const props = $xeTable
       const reactData = $xeTable as unknown as TableReactData
       const internalData = $xeTable as unknown as TableInternalData
@@ -546,6 +548,8 @@ export default {
      * 弹出校验错误提示
      */
     showValidTooltip (params: any) {
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+
       const { $refs, height, validStore, validErrorMaps, tableData, validOpts } = this
       const { rule, row, column, cell } = params
       const validTip = $refs.refValidTooltip
@@ -570,7 +574,7 @@ export default {
           }
         })
       }
-      this.emitEvent('valid-error', params, null)
+      $xeTable.dispatchEvent('valid-error', params, null)
       if (validTip) {
         if (validTip && (validOpts.message === 'tooltip' || (validOpts.message === 'default' && !height && tableData.length < 2))) {
           return validTip.open(cell, content)

package/packages/table/src/column.ts

@@ -55,9 +55,11 @@ export const columnProps = {
   // 给表尾单元格附加 className
   footerClassName: [String, Function],
   // 格式化显示内容
-  formatter: [Function, Array, String],
+  formatter: [Function, Array, String] as PropType<VxeColumnPropTypes.Formatter<any>>,
+  // 格式化表头显示内容
+  headerFormatter: [Function, Array, String] as PropType<VxeColumnPropTypes.HeaderFormatter>,
   // 格式化表尾显示内容
-  footerFormatter: [Function, Array, String],
+  footerFormatter: [Function, Array, String] as PropType<VxeColumnPropTypes.FooterFormatter>,
   // 是否显示间距
   padding: {
     type: Boolean as PropType<VxeColumnPropTypes.Padding>,

package/packages/table/src/columnInfo.ts

@@ -93,6 +93,7 @@ export class ColumnInfo {
       headerClassName: _vm.headerClassName,
       footerClassName: _vm.footerClassName,
       formatter,
+      headerFormatter: _vm.headerFormatter,
       footerFormatter: _vm.footerFormatter,
       padding: _vm.padding,
       verticalAlign: _vm.verticalAlign,

package/packages/table/src/footer.ts

@@ -34,7 +34,7 @@ function renderRows (h: CreateElement, _vm: any, isOptimizeMode: boolean, tableC
   const footerCellOpts = $xeTable.computeFooterCellOpts
   const currCellHeight = getCalcHeight(footerCellOpts.height) || defaultRowHeight
 
-  return tableColumn.map((column: any, $columnIndex: any) => {
+  return tableColumn.map((column, $columnIndex) => {
     const { type, showFooterOverflow, footerAlign, align, footerClassName, editRender, cellRender } = column
     const colid = column.id
     const colRest = fullColumnIdData[colid] || {}
@@ -240,8 +240,8 @@ export default {
       default: null
     }
   },
-  mounted (this: any) {
-    const _vm = this
+  mounted () {
+    const _vm = this as any
     const props = _vm
     const $xeTable = _vm.$parent as VxeTableConstructor & VxeTablePrivateMethods
     const tableInternalData = $xeTable as unknown as TableInternalData
@@ -257,8 +257,9 @@ export default {
     elemStore[`${prefix}xSpace`] = _vm.$refs.refFooterXSpace
   },
   destroyed () {
-    const props = this
-    const $xeTable = this.$parent as VxeTableConstructor & VxeTablePrivateMethods
+    const _vm = this as any
+    const props = _vm
+    const $xeTable = _vm.$parent as VxeTableConstructor & VxeTablePrivateMethods
     const tableInternalData = $xeTable as unknown as TableInternalData
 
     const { fixedType } = props
@@ -272,8 +273,9 @@ export default {
     elemStore[`${prefix}xSpace`] = null
   },
   render (h: CreateElement) {
-    const props = this
-    const $xeTable = this.$parent as VxeTableConstructor & VxeTablePrivateMethods
+    const _vm = this as any
+    const props = _vm
+    const $xeTable = _vm.$parent as VxeTableConstructor & VxeTablePrivateMethods
     const tableProps = $xeTable
     const tableReactData = $xeTable as unknown as TableReactData
     const tableInternalData = $xeTable as unknown as TableInternalData
@@ -385,9 +387,9 @@ export default {
          */
           h('tfoot', {
             ref: 'refFooterTFoot'
-          }, renderHeads(h, this, isOptimizeMode, renderColumnList))
+          }, renderHeads(h, _vm, isOptimizeMode, renderColumnList))
         ])
       ])
     ])
   }
-} as any
+}

package/packages/table/src/header.ts

@@ -2,7 +2,7 @@ import { PropType, CreateElement } from 'vue'
 import XEUtils from 'xe-utils'
 import { VxeUI } from '../../ui'
 import { getClass } from '../../ui/src/utils'
-import { getCalcHeight, convertHeaderColumnToRows } from './util'
+import { getCalcHeight, convertHeaderColumnToRows, convertHeaderToGridRows } from './util'
 
 import type { VxeTableDefines, VxeTableConstructor, VxeTablePrivateMethods, VxeColumnPropTypes, TableReactData, TableInternalData, VxeComponentStyleType } from '../../../types'
 
@@ -10,7 +10,7 @@ const { renderer, renderEmptyElement } = VxeUI
 
 const cellType = 'header'
 
-const renderRows = (h: CreateElement, _vm: any, isGroup: boolean, isOptimizeMode: boolean, cols: VxeTableDefines.ColumnInfo[], $rowIndex: number) => {
+function renderRows (h: CreateElement, _vm: any, isGroup: boolean, isOptimizeMode: boolean, headerGroups: VxeTableDefines.ColumnInfo[][], $rowIndex: number, cols: VxeTableDefines.ColumnInfo[]) {
   const props = _vm
   const $xeTable = _vm.$parent as VxeTableConstructor & VxeTablePrivateMethods
   const $xeGrid = $xeTable.$xeGrid
@@ -20,9 +20,9 @@ const renderRows = (h: CreateElement, _vm: any, isGroup: boolean, isOptimizeMode
   const tableInternalData = $xeTable as unknown as TableInternalData
 
   const { fixedType } = props
-  const { resizable: allResizable, columnKey, headerCellClassName, headerCellStyle, showHeaderOverflow: allColumnHeaderOverflow, headerAlign: allHeaderAlign, align: allAlign, mouseConfig } = tableProps
-  const { currentColumn, dragCol, scrollXLoad, scrollYLoad, overflowX, tableColumn } = tableReactData
-  const { fullColumnIdData, scrollXStore } = tableInternalData
+  const { resizable: allResizable, columnKey, showCustomHeader, headerCellClassName, headerCellStyle, showHeaderOverflow: allColumnHeaderOverflow, headerAlign: allHeaderAlign, align: allAlign, mouseConfig } = tableProps
+  const { currentColumn, dragCol, scrollXLoad, scrollYLoad, overflowX, mergeHeadFlag, tableColumn } = tableReactData
+  const { fullColumnIdData, scrollXStore, mergeHeaderList, mergeHeaderCellMaps } = tableInternalData
   const virtualXOpts = $xeTable.computeVirtualXOpts
   const columnOpts = $xeTable.computeColumnOpts
   const columnDragOpts = $xeTable.computeColumnDragOpts
@@ -31,7 +31,9 @@ const renderRows = (h: CreateElement, _vm: any, isGroup: boolean, isOptimizeMode
   const headerCellOpts = $xeTable.computeHeaderCellOpts
   const currCellHeight = getCalcHeight(headerCellOpts.height) || defaultRowHeight
   const { disabledMethod: dragDisabledMethod, isCrossDrag, isPeerDrag } = columnDragOpts
-  return cols.map((column: any, $columnIndex: any) => {
+  const isLastRow = $rowIndex === headerGroups.length - 1
+
+  return cols.map((column, $columnIndex) => {
     const { type, showHeaderOverflow, headerAlign, align, filters, headerClassName, editRender, cellRender } = column
     // const { enabled } = tooltipOpts
     const colid = column.id
@@ -54,7 +56,7 @@ const renderRows = (h: CreateElement, _vm: any, isGroup: boolean, isOptimizeMode
       hasFilter = filters.some((item: VxeColumnPropTypes.FilterItem) => item.checked)
     }
     const columnIndex = colRest.index
-    const _columnIndex = colRest._index
+    const _columnIndex = showCustomHeader ? $columnIndex : colRest._index
     const cellParams: VxeTableDefines.CellRenderHeaderParams & {
       $table: VxeTableConstructor & VxeTablePrivateMethods
     } = {
@@ -73,9 +75,30 @@ const renderRows = (h: CreateElement, _vm: any, isGroup: boolean, isOptimizeMode
       hasFilter
     }
     const thAttrs: Record<string, string | number | null> = {
-      colid,
-      colspan: column.colSpan > 1 ? column.colSpan : null,
-      rowspan: column.rowSpan > 1 ? column.rowSpan : null
+      colid
+    }
+    let isMergeCell = false
+    // 合并行或列
+    if (!showCustomHeader) {
+      thAttrs.colspan = column.colSpan > 1 ? column.colSpan : null
+      thAttrs.rowspan = column.rowSpan > 1 ? column.rowSpan : null
+    }
+    if (mergeHeadFlag && mergeHeaderList.length && (showCustomHeader || isLastRow)) {
+      const spanRest = mergeHeaderCellMaps[`${$rowIndex}:${showCustomHeader ? $columnIndex : _columnIndex}`]
+      if (spanRest) {
+        const { rowspan, colspan } = spanRest
+        if (!rowspan || !colspan) {
+          return null
+        }
+        if (rowspan > 1) {
+          isMergeCell = true
+          thAttrs.rowspan = rowspan
+        }
+        if (colspan > 1) {
+          isMergeCell = true
+          thAttrs.colspan = colspan
+        }
+      }
     }
     const thOns: any = {
       click: (evnt: MouseEvent) => $xeTable.triggerHeaderCellClickEvent(evnt, cellParams),
@@ -104,7 +127,7 @@ const renderRows = (h: CreateElement, _vm: any, isGroup: boolean, isOptimizeMode
     const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto')
 
     let isVNPreEmptyStatus = false
-    if (isOptimizeMode && overflowX && !isGroup) {
+    if (isOptimizeMode && overflowX && !isGroup && !isMergeCell) {
       if (!dragCol || dragCol.id !== colid) {
         if (scrollXLoad && tableColumn.length > 10 && !column.fixed && !virtualXOpts.immediate && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
           isVNPreEmptyStatus = true
@@ -120,7 +143,7 @@ const renderRows = (h: CreateElement, _vm: any, isGroup: boolean, isOptimizeMode
     }
 
     return h('th', {
-      class: ['vxe-table--column vxe-header--column', colid, {
+      class: ['vxe-table--column vxe-header--column', colid, fixedHiddenColumn ? 'fixed--hidden' : 'fixed--visible', {
         [`col--${headAlign}`]: headAlign,
         [`col--${type}`]: type,
         'col--last': isLastColumn,
@@ -128,7 +151,6 @@ const renderRows = (h: CreateElement, _vm: any, isGroup: boolean, isOptimizeMode
         'col--group': isColGroup,
         'col--ellipsis': hasEllipsis,
         'fixed--width': !isAutoCellWidth,
-        'fixed--hidden': fixedHiddenColumn,
         'is--padding': isPadding,
         'is--sortable': column.sortable,
         'col--filter': !!filters,
@@ -140,7 +162,7 @@ const renderRows = (h: CreateElement, _vm: any, isGroup: boolean, isOptimizeMode
       attrs: thAttrs,
       style: headerCellStyle ? (XEUtils.isFunction(headerCellStyle) ? headerCellStyle(cellParams) : headerCellStyle) as VxeComponentStyleType : undefined,
       on: thOns,
-      key: columnKey || scrollXLoad || scrollYLoad || columnOpts.useKey || columnOpts.drag || isColGroup ? colid : $columnIndex
+      key: showCustomHeader ? `${colid}${$columnIndex}` : (columnKey || scrollXLoad || scrollYLoad || columnOpts.useKey || columnOpts.drag || isColGroup ? colid : $columnIndex)
     }, [
       h('div', {
         class: ['vxe-cell', {
@@ -160,9 +182,9 @@ const renderRows = (h: CreateElement, _vm: any, isGroup: boolean, isOptimizeMode
             }, column.renderHeader(h, cellParams))
           ]),
       /**
-     * 列宽拖动
-     */
-      !fixedHiddenColumn && showResizable
+       * 列宽拖动
+       */
+      !fixedHiddenColumn && showResizable && (!showCustomHeader || isLastRow)
         ? h('div', {
           class: 'vxe-cell--col-resizable',
           on: {
@@ -175,7 +197,7 @@ const renderRows = (h: CreateElement, _vm: any, isGroup: boolean, isOptimizeMode
   })
 }
 
-function renderHeads (h: CreateElement, _vm: any, isGroup: boolean, isOptimizeMode: boolean, headerGroups: any[]) {
+function renderHeads (h: CreateElement, _vm: any, isGroup: boolean, isOptimizeMode: boolean, headerGroups: VxeTableDefines.ColumnInfo[][]) {
   const props = _vm
   const $xeTable = _vm.$parent as VxeTableConstructor & VxeTablePrivateMethods
   const tableProps = $xeTable
@@ -194,7 +216,7 @@ function renderHeads (h: CreateElement, _vm: any, isGroup: boolean, isOptimizeMo
         headerRowClassName ? XEUtils.isFunction(headerRowClassName) ? headerRowClassName(params) : headerRowClassName : ''
       ],
       style: headerRowStyle ? (XEUtils.isFunction(headerRowStyle) ? headerRowStyle(params) : headerRowStyle) as VxeComponentStyleType : undefined
-    }, renderRows(h, _vm, isGroup, isOptimizeMode, cols, $rowIndex))
+    }, renderRows(h, _vm, isGroup, isOptimizeMode, headerGroups, $rowIndex, cols))
   })
 }
 
@@ -216,15 +238,18 @@ export default {
     }
   },
   watch: {
-    tableColumn (this: any) {
-      this.uploadColumn()
+    tableColumn () {
+      const _vm = this as any
+
+      _vm.uploadColumn()
     }
   },
-  created (this: any) {
-    this.uploadColumn()
+  created () {
+    const _vm = this as any
+    _vm.uploadColumn()
   },
   mounted () {
-    const _vm = this
+    const _vm = this as any
     const props = _vm
     const $xeTable = _vm.$parent as VxeTableConstructor & VxeTablePrivateMethods
     const internalData = $xeTable as unknown as TableInternalData
@@ -241,8 +266,9 @@ export default {
     elemStore[`${prefix}repair`] = _vm.$refs.refHeaderBorderRepair
   },
   destroyed () {
-    const props = this
-    const $xeTable = this.$parent as VxeTableConstructor & VxeTablePrivateMethods
+    const _vm = this as any
+    const props = _vm
+    const $xeTable = _vm.$parent as VxeTableConstructor & VxeTablePrivateMethods
     const internalData = $xeTable as unknown as TableInternalData
 
     const { fixedType } = props
@@ -257,15 +283,16 @@ export default {
     elemStore[`${prefix}repair`] = null
   },
   render (h: CreateElement) {
-    const props = this
-    const $xeTable = this.$parent as VxeTableConstructor & VxeTablePrivateMethods
+    const _vm = this as any
+    const props = _vm
+    const $xeTable = _vm.$parent as VxeTableConstructor & VxeTablePrivateMethods
     const tableProps = $xeTable
     const tableReactData = $xeTable as unknown as TableReactData
     const tableInternalData = $xeTable as unknown as TableInternalData
 
     const { xID } = $xeTable
     const { fixedType, fixedColumn, tableColumn } = props
-    const { headerColumn } = this
+    const { headerColumn } = _vm
 
     const { mouseConfig, showHeaderOverflow: allColumnHeaderOverflow, spanMethod, footerSpanMethod } = tableProps
     const { isGroup, isColLoading, overflowX, scrollXLoad, dragCol } = tableReactData
@@ -382,7 +409,7 @@ export default {
            */
           h('thead', {
             ref: 'refHeaderTHead'
-          }, renderHeads(h, this, isGroup, isOptimizeMode, renderHeaderList))
+          }, renderHeads(h, _vm, isGroup, isOptimizeMode, renderHeaderList))
         ]),
         mouseConfig && mouseOpts.area
           ? h('div', {
@@ -413,11 +440,26 @@ export default {
   },
   methods: {
     uploadColumn () {
-      const $xeTable = this.$parent as VxeTableConstructor & VxeTablePrivateMethods
+      const _vm = this as any
+      const $xeTable = _vm.$parent as VxeTableConstructor & VxeTablePrivateMethods
+      const tableProps = $xeTable
       const tableReactData = $xeTable as unknown as TableReactData
+      const tableInternalData = $xeTable as unknown as TableInternalData
 
+      const props = _vm
+
+      const { showCustomHeader } = tableProps
+      const { collectColumn, visibleColumn } = tableInternalData
+      const { tableGroupColumn } = props
       const { isGroup } = tableReactData
-      this.headerColumn = isGroup ? convertHeaderColumnToRows(this.tableGroupColumn) : []
+      let spanColumns: VxeTableDefines.ColumnInfo[][] = isGroup ? convertHeaderColumnToRows(tableGroupColumn) : []
+      let visibleColgroups: VxeTableDefines.ColumnInfo[][] = []
+      if (showCustomHeader && spanColumns.length > 1) {
+        visibleColgroups = convertHeaderToGridRows(spanColumns)
+        spanColumns = visibleColgroups
+      }
+      _vm.headerColumn = spanColumns
+      $xeTable.dispatchEvent('columns-change', { visibleColgroups, collectColumn, visibleColumn }, null)
     }
-  } as any
-} as any
+  }
+}