vxe-table 3.18.1 → 3.18.3

package/es/table/module/menu/mixin.js

@@ -10,13 +10,15 @@ export default {
          * 关闭快捷菜单
          */
         _closeMenu() {
-            Object.assign(this.ctxMenuStore, {
+            const $xeTable = this;
+            const reactData = $xeTable;
+            Object.assign(reactData.ctxMenuStore, {
                 visible: false,
                 selected: null,
                 selectChild: null,
                 showChild: false
             });
-            return this.$nextTick();
+            return $xeTable.$nextTick();
         },
         // 处理菜单的移动
         moveCtxMenu(evnt, ctxMenuStore, property, hasOper, operRest, menuList) {
@@ -61,26 +63,35 @@ export default {
             const $xeTable = this;
             const $xeGrid = $xeTable.$xeGrid;
             const $xeGantt = $xeTable.$xeGantt;
+            const props = $xeTable;
+            const reactData = $xeTable;
             const internalData = $xeTable;
-            const { $refs, tId, editStore, menuConfig, contextMenu, ctxMenuStore, ctxMenuOpts, mouseConfig, mouseOpts } = this;
-            const { selected } = editStore;
+            const { xID } = $xeTable;
+            const { mouseConfig, menuConfig } = props;
+            const { editStore, ctxMenuStore } = reactData;
+            const { visibleColumn } = internalData;
             const tableFilter = $xeTable.$refs.refTableFilter;
+            const tableMenu = $xeTable.$refs.refTableMenu;
+            const mouseOpts = $xeTable.computeMouseOpts;
+            const menuOpts = $xeTable.computeMenuOpts;
+            const el = $xeTable.$refs.refElem;
+            const { selected } = editStore;
             const layoutList = ['header', 'body', 'footer'];
-            if (isEnableConf(menuConfig) || contextMenu) {
-                if (ctxMenuStore.visible && $refs.refTableMenu && getEventTargetNode(evnt, $refs.refTableMenu.$el).flag) {
+            if (isEnableConf(menuConfig)) {
+                if (ctxMenuStore.visible && tableMenu && getEventTargetNode(evnt, tableMenu.$el).flag) {
                     evnt.preventDefault();
                     return;
                 }
                 if (internalData._keyCtx) {
                     const type = 'body';
-                    const params = { type, $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, keyboard: true, columns: this.visibleColumn.slice(0), $event: evnt };
+                    const params = { type, $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, keyboard: true, columns: visibleColumn.slice(0), $event: evnt };
                     // 如果开启单元格区域
                     if (mouseConfig && mouseOpts.area) {
-                        const activeArea = this.getActiveCellArea();
+                        const activeArea = $xeTable.getActiveCellArea();
                         if (activeArea && activeArea.row && activeArea.column) {
                             params.row = activeArea.row;
                             params.column = activeArea.column;
-                            this.handleOpenMenuEvent(evnt, type, params);
+                            $xeTable.handleOpenMenuEvent(evnt, type, params);
                             return;
                         }
                     }
@@ -89,7 +100,7 @@ export default {
                         if (selected.row && selected.column) {
                             params.row = selected.row;
                             params.column = selected.column;
-                            this.handleOpenMenuEvent(evnt, type, params);
+                            $xeTable.handleOpenMenuEvent(evnt, type, params);
                             return;
                         }
                     }
@@ -97,11 +108,11 @@ export default {
                 // 分别匹配表尾、内容、表尾的快捷菜单
                 for (let index = 0; index < layoutList.length; index++) {
                     const layout = layoutList[index];
-                    const columnTargetNode = getEventTargetNode(evnt, this.$el, `vxe-${layout}--column`, (target) => {
+                    const columnTargetNode = getEventTargetNode(evnt, el, `vxe-${layout}--column`, (target) => {
                         // target=td|th，直接向上找 table 去匹配即可
-                        return target.parentNode.parentNode.parentNode.getAttribute('xid') === tId;
+                        return target.parentNode.parentNode.parentNode.getAttribute('xid') === xID;
                     });
-                    const params = { type: layout, $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, columns: this.visibleColumn.slice(0), $event: evnt };
+                    const params = { type: layout, $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, columns: visibleColumn.slice(0), $event: evnt };
                     if (columnTargetNode.flag) {
                         const cell = columnTargetNode.targetElem;
                         const columnNodeRest = $xeTable.getColumnNode(cell);
@@ -120,9 +131,9 @@ export default {
                             }
                         }
                         const eventType = `${typePrefix}cell-menu`;
-                        this.handleOpenMenuEvent(evnt, layout, params);
+                        $xeTable.handleOpenMenuEvent(evnt, layout, params);
                         // 在 v4 中废弃事件 cell-context-menu、header-cell-context-menu、footer-cell-context-menu
-                        if (this.$listeners[`${typePrefix}cell-context-menu`]) {
+                        if ($xeTable.$listeners[`${typePrefix}cell-context-menu`]) {
                             warnLog('vxe.error.delEvent', [`${typePrefix}cell-context-menu`, `${typePrefix}cell-menu`]);
                             $xeTable.dispatchEvent(`${typePrefix}cell-context-menu`, params, evnt);
                         }
@@ -131,59 +142,65 @@ export default {
                         }
                         return;
                     }
-                    else if (getEventTargetNode(evnt, this.$el, `vxe-table--${layout}-wrapper`, target => target.getAttribute('xid') === tId).flag) {
-                        if (ctxMenuOpts.trigger === 'cell') {
+                    else if (getEventTargetNode(evnt, $xeTable.$el, `vxe-table--${layout}-wrapper`, target => target.getAttribute('xid') === xID).flag) {
+                        if (menuOpts.trigger === 'cell') {
                             evnt.preventDefault();
                         }
                         else {
-                            this.handleOpenMenuEvent(evnt, layout, params);
+                            $xeTable.handleOpenMenuEvent(evnt, layout, params);
                         }
                         return;
                     }
                 }
             }
             if (tableFilter && !getEventTargetNode(evnt, tableFilter.$el).flag) {
-                this.closeFilter();
+                $xeTable.closeFilter();
             }
-            this.closeMenu();
+            $xeTable.closeMenu();
         },
         /**
          * 显示快捷菜单
          */
         handleOpenMenuEvent(evnt, type, params) {
-            const { isCtxMenu, ctxMenuStore, ctxMenuOpts } = this;
-            const config = ctxMenuOpts[type];
-            const visibleMethod = ctxMenuOpts.visibleMethod;
+            const $xeTable = this;
+            const reactData = $xeTable;
+            const internalData = $xeTable;
+            const { ctxMenuStore } = reactData;
+            const isMenu = $xeTable.computeIsMenu;
+            const menuOpts = $xeTable.computeMenuOpts;
+            const config = menuOpts[type];
+            const visibleMethod = menuOpts.visibleMethod;
             if (config) {
                 const { options, disabled } = config;
                 if (disabled) {
                     evnt.preventDefault();
                 }
-                else if (isCtxMenu && options && options.length) {
+                else if (isMenu && options && options.length) {
                     params.options = options;
-                    this.preventEvent(evnt, 'event.showMenu', params, () => {
+                    $xeTable.preventEvent(evnt, 'event.showMenu', params, () => {
                         if (!visibleMethod || visibleMethod(params)) {
                             evnt.preventDefault();
-                            this.updateZindex();
+                            $xeTable.updateZindex();
                             const { scrollTop, scrollLeft, visibleHeight, visibleWidth } = getDomNode();
                             let top = evnt.clientY + scrollTop;
                             let left = evnt.clientX + scrollLeft;
                             const handleVisible = () => {
+                                internalData._currMenuParams = params;
                                 Object.assign(ctxMenuStore, {
-                                    args: params,
                                     visible: true,
                                     list: options,
                                     selected: null,
                                     selectChild: null,
                                     showChild: false,
                                     style: {
-                                        zIndex: this.tZindex,
+                                        zIndex: internalData.tZindex,
                                         top: `${top}px`,
                                         left: `${left}px`
                                     }
                                 });
-                                this.$nextTick(() => {
-                                    const ctxElem = this.$refs.refTableMenu.$el;
+                                $xeTable.$nextTick(() => {
+                                    const tableMenu = $xeTable.$refs.refTableMenu;
+                                    const ctxElem = tableMenu.$el;
                                     const clientHeight = ctxElem.clientHeight;
                                     const clientWidth = ctxElem.clientWidth;
                                     const { boundingTop, boundingLeft } = getAbsolutePos(ctxElem);
@@ -199,11 +216,13 @@ export default {
                             };
                             const { keyboard, row, column } = params;
                             if (keyboard && row && column) {
-                                this.scrollToRow(row, column).then(() => {
-                                    const cell = this.getCellElement(row, column);
-                                    const { boundingTop, boundingLeft } = getAbsolutePos(cell);
-                                    top = boundingTop + scrollTop + Math.floor(cell.offsetHeight / 2);
-                                    left = boundingLeft + scrollLeft + Math.floor(cell.offsetWidth / 2);
+                                $xeTable.scrollToRow(row, column).then(() => {
+                                    const cell = $xeTable.getCellElement(row, column);
+                                    if (cell) {
+                                        const { boundingTop, boundingLeft } = getAbsolutePos(cell);
+                                        top = boundingTop + scrollTop + Math.floor(cell.offsetHeight / 2);
+                                        left = boundingLeft + scrollLeft + Math.floor(cell.offsetWidth / 2);
+                                    }
                                     handleVisible();
                                 });
                             }
@@ -212,16 +231,18 @@ export default {
                             }
                         }
                         else {
-                            this.closeMenu();
+                            $xeTable.closeMenu();
                         }
                     });
                 }
             }
-            this.closeFilter();
+            $xeTable.closeFilter();
         },
         ctxMenuMouseoverEvent(evnt, item, child) {
+            const $xeTable = this;
+            const reactData = $xeTable;
             const menuElem = evnt.currentTarget;
-            const ctxMenuStore = this.ctxMenuStore;
+            const { ctxMenuStore } = reactData;
             evnt.preventDefault();
             evnt.stopPropagation();
             ctxMenuStore.selected = item;
@@ -229,7 +250,7 @@ export default {
             if (!child) {
                 ctxMenuStore.showChild = hasChildrenList(item);
                 if (ctxMenuStore.showChild) {
-                    this.$nextTick(() => {
+                    $xeTable.$nextTick(() => {
                         const childWrapperElem = menuElem.nextElementSibling;
                         if (childWrapperElem) {
                             const { boundingTop, boundingLeft, visibleHeight, visibleWidth } = getAbsolutePos(menuElem);
@@ -259,7 +280,9 @@ export default {
             }
         },
         ctxMenuMouseoutEvent(evnt, item) {
-            const ctxMenuStore = this.ctxMenuStore;
+            const $xeTable = this;
+            const reactData = $xeTable;
+            const { ctxMenuStore } = reactData;
             if (!item.children) {
                 ctxMenuStore.selected = null;
             }
@@ -272,22 +295,23 @@ export default {
             const $xeTable = this;
             const $xeGrid = $xeTable.$xeGrid;
             const $xeGantt = $xeTable.$xeGantt;
+            const internalData = $xeTable;
             // 如果一级菜单有配置 code 则允许点击，否则不能点击
             if (!menu.disabled && (menu.code || !menu.children || !menu.children.length)) {
                 const gMenuOpts = menus.get(menu.code);
-                const params = Object.assign({ menu, $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, $event: evnt }, this.ctxMenuStore.args);
+                const params = Object.assign({}, internalData._currMenuParams, { menu, $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, $event: evnt });
                 if (gMenuOpts && gMenuOpts.menuMethod) {
                     gMenuOpts.menuMethod(params, evnt);
                 }
                 // 在 v4 中废弃事件 context-menu-click
-                if (this.$listeners['context-menu-click']) {
+                if ($xeTable.$listeners['context-menu-click']) {
                     warnLog('vxe.error.delEvent', ['context-menu-click', 'menu-click']);
                     $xeTable.dispatchEvent('context-menu-click', params, evnt);
                 }
                 else {
                     $xeTable.dispatchEvent('menu-click', params, evnt);
                 }
-                this.closeMenu();
+                $xeTable.closeMenu();
             }
         }
     }

package/es/table/module/menu/panel.js

@@ -1,6 +1,6 @@
 import { VxeUI } from '../../../ui';
 import { getFuncText } from '../../../ui/src/utils';
-const { getIcon } = VxeUI;
+const { getIcon, renderEmptyElement } = VxeUI;
 export default {
     name: 'VxeTableMenuPanel',
     props: {
@@ -18,15 +18,17 @@ export default {
     },
     render(h) {
         const $xeTable = this.$parent;
-        const { _e, ctxMenuOpts, ctxMenuStore } = this;
+        const tableReactData = $xeTable;
+        const { ctxMenuStore } = tableReactData;
+        const menuOpts = $xeTable.computeMenuOpts;
         return h('div', {
-            class: ['vxe-table--context-menu-wrapper', ctxMenuOpts.className, {
+            class: ['vxe-table--context-menu-wrapper', menuOpts.className, {
                     'is--visible': ctxMenuStore.visible
                 }],
             style: ctxMenuStore.style
         }, ctxMenuStore.list.map((options, gIndex) => {
             return options.every((item) => item.visible === false)
-                ? _e()
+                ? renderEmptyElement($xeTable)
                 : h('ul', {
                     class: 'vxe-context-menu--option-wrapper',
                     key: gIndex
@@ -64,7 +66,7 @@ export default {
                                     h('i', {
                                         class: prefixOpts.icon || item.prefixIcon
                                     }),
-                                    prefixOpts.content ? h('span', {}, `${prefixOpts.content}`) : _e()
+                                    prefixOpts.content ? h('span', {}, `${prefixOpts.content}`) : renderEmptyElement($xeTable)
                                 ]),
                                 h('span', {
                                     class: 'vxe-context-menu--link-content',
@@ -78,7 +80,7 @@ export default {
                                     h('i', {
                                         class: (suffixOpts.icon || item.suffixIcon) || (hasChildMenus ? getIcon().TABLE_MENU_OPTIONS : '')
                                     }),
-                                    suffixOpts.content ? h('span', `${suffixOpts.content}`) : _e()
+                                    suffixOpts.content ? h('span', `${suffixOpts.content}`) : renderEmptyElement($xeTable)
                                 ])
                             ]),
                             hasChildMenus
@@ -119,7 +121,7 @@ export default {
                                                     h('i', {
                                                         class: childPrefixOpts.icon || child.prefixIcon
                                                     }),
-                                                    childPrefixOpts.content ? h('span', `${childPrefixOpts.content}`) : _e()
+                                                    childPrefixOpts.content ? h('span', `${childPrefixOpts.content}`) : renderEmptyElement($xeTable)
                                                 ]),
                                                 h('span', {
                                                     class: 'vxe-context-menu--link-content',
@@ -133,7 +135,7 @@ export default {
                                                     h('i', {
                                                         class: childSuffixOpts.icon
                                                     }),
-                                                    childSuffixOpts.content ? h('span', `${childSuffixOpts.content}`) : _e()
+                                                    childSuffixOpts.content ? h('span', `${childSuffixOpts.content}`) : renderEmptyElement($xeTable)
                                                 ])
                                             ])
                                         ]);

package/es/table/src/body.js

@@ -148,15 +148,14 @@ function renderTdColumn(h, $xeTable, seq, rowid, fixedType, isOptimizeMode, rowL
     // hover 进入事件
     if (showTitle || showTooltip || showAllTip || tooltipConfig) {
         tdOns.mouseenter = (evnt) => {
-            if (isVMScrollProcess($xeTable)) {
-                return;
-            }
-            if (showTitle) {
-                updateCellTitle(evnt.currentTarget, column);
-            }
-            else if (showTooltip || showAllTip) {
-                // 如果配置了显示 tooltip
-                $xeTable.triggerBodyTooltipEvent(evnt, cellParams);
+            if (!isVMScrollProcess($xeTable)) {
+                if (showTitle) {
+                    updateCellTitle(evnt.currentTarget, column);
+                }
+                else if (showTooltip || showAllTip) {
+                    // 如果配置了显示 tooltip
+                    $xeTable.triggerBodyTooltipEvent(evnt, cellParams);
+                }
             }
             $xeTable.dispatchEvent('cell-mouseenter', Object.assign({ cell: evnt.currentTarget }, cellParams), evnt);
         };
@@ -164,11 +163,10 @@ function renderTdColumn(h, $xeTable, seq, rowid, fixedType, isOptimizeMode, rowL
     // hover 退出事件
     if (showTooltip || showAllTip || tooltipConfig) {
         tdOns.mouseleave = (evnt) => {
-            if (isVMScrollProcess($xeTable)) {
-                return;
-            }
-            if (showTooltip || showAllTip) {
-                $xeTable.handleTargetLeaveEvent(evnt);
+            if (!isVMScrollProcess($xeTable)) {
+                if (showTooltip || showAllTip) {
+                    $xeTable.handleTargetLeaveEvent(evnt);
+                }
             }
             $xeTable.dispatchEvent('cell-mouseleave', Object.assign({ cell: evnt.currentTarget }, cellParams), evnt);
         };

package/es/table/src/column.js

@@ -52,6 +52,8 @@ export const columnProps = {
     footerClassName: [String, Function],
     // 格式化显示内容
     formatter: [Function, Array, String],
+    // 格式化表头显示内容
+    headerFormatter: [Function, Array, String],
     // 格式化表尾显示内容
     footerFormatter: [Function, Array, String],
     // 是否显示间距

package/es/table/src/columnInfo.js

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

package/es/table/src/footer.js

@@ -240,8 +240,9 @@ export default {
         elemStore[`${prefix}xSpace`] = _vm.$refs.refFooterXSpace;
     },
     destroyed() {
-        const props = this;
-        const $xeTable = this.$parent;
+        const _vm = this;
+        const props = _vm;
+        const $xeTable = _vm.$parent;
         const tableInternalData = $xeTable;
         const { fixedType } = props;
         const { elemStore } = tableInternalData;
@@ -254,8 +255,9 @@ export default {
         elemStore[`${prefix}xSpace`] = null;
     },
     render(h) {
-        const props = this;
-        const $xeTable = this.$parent;
+        const _vm = this;
+        const props = _vm;
+        const $xeTable = _vm.$parent;
         const tableProps = $xeTable;
         const tableReactData = $xeTable;
         const tableInternalData = $xeTable;
@@ -362,7 +364,7 @@ export default {
                    */
                     h('tfoot', {
                         ref: 'refFooterTFoot'
-                    }, renderHeads(h, this, isOptimizeMode, renderColumnList))
+                    }, renderHeads(h, _vm, isOptimizeMode, renderColumnList))
                 ])
             ])
         ]);

package/es/table/src/header.js

@@ -1,10 +1,10 @@
 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';
 const { renderer, renderEmptyElement } = VxeUI;
 const cellType = 'header';
-const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
+function renderRows(h, _vm, isGroup, isOptimizeMode, headerGroups, $rowIndex, cols) {
     const props = _vm;
     const $xeTable = _vm.$parent;
     const $xeGrid = $xeTable.$xeGrid;
@@ -13,9 +13,9 @@ const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
     const tableReactData = $xeTable;
     const tableInternalData = $xeTable;
     const { fixedType } = props;
-    const { resizable: allResizable, columnKey, headerCellClassName, headerCellStyle, showHeaderOverflow: allColumnHeaderOverflow, headerAlign: allHeaderAlign, align: allAlign, mouseConfig } = tableProps;
-    const { currentColumn, dragCol, scrollXLoad, scrollYLoad, overflowX, 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;
@@ -24,6 +24,7 @@ const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
     const headerCellOpts = $xeTable.computeHeaderCellOpts;
     const currCellHeight = getCalcHeight(headerCellOpts.height) || defaultRowHeight;
     const { disabledMethod: dragDisabledMethod, isCrossDrag, isPeerDrag } = columnDragOpts;
+    const isLastRow = $rowIndex === headerGroups.length - 1;
     return cols.map((column, $columnIndex) => {
         const { type, showHeaderOverflow, headerAlign, align, filters, headerClassName, editRender, cellRender } = column;
         // const { enabled } = tooltipOpts
@@ -47,7 +48,7 @@ const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
             hasFilter = filters.some((item) => item.checked);
         }
         const columnIndex = colRest.index;
-        const _columnIndex = colRest._index;
+        const _columnIndex = showCustomHeader ? $columnIndex : colRest._index;
         const cellParams = {
             $table: $xeTable,
             $grid: $xeGrid,
@@ -64,10 +65,31 @@ const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
             hasFilter
         };
         const thAttrs = {
-            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 = {
             click: (evnt) => $xeTable.triggerHeaderCellClickEvent(evnt, cellParams),
             dblclick: (evnt) => $xeTable.triggerHeaderCellDblclickEvent(evnt, cellParams)
@@ -94,7 +116,7 @@ const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
         const showResizable = (XEUtils.isBoolean(column.resizable) ? column.resizable : (columnOpts.resizable || allResizable));
         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;
@@ -109,7 +131,7 @@ const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
             tcStyle.minHeight = `${currCellHeight}px`;
         }
         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,
@@ -117,7 +139,6 @@ const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
                     'col--group': isColGroup,
                     'col--ellipsis': hasEllipsis,
                     'fixed--width': !isAutoCellWidth,
-                    'fixed--hidden': fixedHiddenColumn,
                     'is--padding': isPadding,
                     'is--sortable': column.sortable,
                     'col--filter': !!filters,
@@ -129,7 +150,7 @@ const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
             attrs: thAttrs,
             style: headerCellStyle ? (XEUtils.isFunction(headerCellStyle) ? headerCellStyle(cellParams) : headerCellStyle) : 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', {
@@ -149,9 +170,9 @@ const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
                     }, column.renderHeader(h, cellParams))
                 ]),
             /**
-           * 列宽拖动
-           */
-            !fixedHiddenColumn && showResizable
+             * 列宽拖动
+             */
+            !fixedHiddenColumn && showResizable && (!showCustomHeader || isLastRow)
                 ? h('div', {
                     class: 'vxe-cell--col-resizable',
                     on: {
@@ -162,7 +183,7 @@ const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
                 : renderEmptyElement($xeTable)
         ]);
     });
-};
+}
 function renderHeads(h, _vm, isGroup, isOptimizeMode, headerGroups) {
     const props = _vm;
     const $xeTable = _vm.$parent;
@@ -178,7 +199,7 @@ function renderHeads(h, _vm, isGroup, isOptimizeMode, headerGroups) {
                 headerRowClassName ? XEUtils.isFunction(headerRowClassName) ? headerRowClassName(params) : headerRowClassName : ''
             ],
             style: headerRowStyle ? (XEUtils.isFunction(headerRowStyle) ? headerRowStyle(params) : headerRowStyle) : undefined
-        }, renderRows(h, _vm, isGroup, isOptimizeMode, cols, $rowIndex));
+        }, renderRows(h, _vm, isGroup, isOptimizeMode, headerGroups, $rowIndex, cols));
     });
 }
 export default {
@@ -200,11 +221,13 @@ export default {
     },
     watch: {
         tableColumn() {
-            this.uploadColumn();
+            const _vm = this;
+            _vm.uploadColumn();
         }
     },
     created() {
-        this.uploadColumn();
+        const _vm = this;
+        _vm.uploadColumn();
     },
     mounted() {
         const _vm = this;
@@ -223,8 +246,9 @@ export default {
         elemStore[`${prefix}repair`] = _vm.$refs.refHeaderBorderRepair;
     },
     destroyed() {
-        const props = this;
-        const $xeTable = this.$parent;
+        const _vm = this;
+        const props = _vm;
+        const $xeTable = _vm.$parent;
         const internalData = $xeTable;
         const { fixedType } = props;
         const { elemStore } = internalData;
@@ -238,14 +262,15 @@ export default {
         elemStore[`${prefix}repair`] = null;
     },
     render(h) {
-        const props = this;
-        const $xeTable = this.$parent;
+        const _vm = this;
+        const props = _vm;
+        const $xeTable = _vm.$parent;
         const tableProps = $xeTable;
         const tableReactData = $xeTable;
         const tableInternalData = $xeTable;
         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;
         const { visibleColumn, fullColumnIdData } = tableInternalData;
@@ -358,7 +383,7 @@ export default {
                      */
                     h('thead', {
                         ref: 'refHeaderTHead'
-                    }, renderHeads(h, this, isGroup, isOptimizeMode, renderHeaderList))
+                    }, renderHeads(h, _vm, isGroup, isOptimizeMode, renderHeaderList))
                 ]),
                 mouseConfig && mouseOpts.area
                     ? h('div', {
@@ -389,10 +414,24 @@ export default {
     },
     methods: {
         uploadColumn() {
-            const $xeTable = this.$parent;
+            const _vm = this;
+            const $xeTable = _vm.$parent;
+            const tableProps = $xeTable;
             const tableReactData = $xeTable;
+            const tableInternalData = $xeTable;
+            const props = _vm;
+            const { showCustomHeader } = tableProps;
+            const { collectColumn, visibleColumn } = tableInternalData;
+            const { tableGroupColumn } = props;
             const { isGroup } = tableReactData;
-            this.headerColumn = isGroup ? convertHeaderColumnToRows(this.tableGroupColumn) : [];
+            let spanColumns = isGroup ? convertHeaderColumnToRows(tableGroupColumn) : [];
+            let visibleColgroups = [];
+            if (showCustomHeader && spanColumns.length > 1) {
+                visibleColgroups = convertHeaderToGridRows(spanColumns);
+                spanColumns = visibleColgroups;
+            }
+            _vm.headerColumn = spanColumns;
+            $xeTable.dispatchEvent('columns-change', { visibleColgroups, collectColumn, visibleColumn }, null);
         }
     }
 };