vxe-table 3.18.0 → 3.18.2

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

@@ -94,14 +94,18 @@ function handleInsertRowAt($xeTable, records, targetRow, isInsertNextRow) {
     const internalData = $xeTable;
     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 = $xeTable.defineField(records.map(record => Object.assign(treeConfig && transform ? { [mapChildrenField]: [], [childrenField]: [] } : {}, record)));
+    let treeRecords = [];
+    if (treeConfig && transform) {
+        treeRecords = XEUtils.toArrayTree(newRecords, { key: rowField, parentKey: parentField, children: childrenField });
+    }
     if (XEUtils.eqNull(targetRow)) {
         // 如果为虚拟树
         if (treeConfig && transform) {
@@ -161,41 +165,50 @@ function handleInsertRowAt($xeTable, records, targetRow, isInsertNextRow) {
         else {
             // 如果为虚拟树
             if (treeConfig && transform) {
-                const matchMapObj = XEUtils.findTree(tableFullTreeData, (item) => targetRow[rowField] === item[rowField], { children: mapChildrenField });
+                const matchMapObj = XEUtils.findTree(tableFullTreeData, item => targetRow[rowField] === item[rowField], { children: mapChildrenField });
                 if (matchMapObj) {
                     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, i) => {
-                        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) {
+                            if (row[parentField] !== parentRow[rowField]) {
+                                row[parentField] = parentRow[rowField];
+                                errLog('vxe.error.errProp', [`${parentField}=${row[parentField]}`, `${parentField}=${parentRow[rowField]}`]);
                             }
                         }
-                        if (parentRow) {
-                            item[treeOpts.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) => 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);
                         }
                     }
                 }
@@ -230,7 +243,7 @@ function handleInsertRowAt($xeTable, records, targetRow, isInsertNextRow) {
                     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);
@@ -253,10 +266,27 @@ function handleInsertRowAt($xeTable, records, targetRow, isInsertNextRow) {
             }
         }
     }
-    newRecords.forEach(newRow => {
+    const handleStatus = (newRow) => {
         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();
@@ -800,7 +830,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;
         },
@@ -988,7 +1023,10 @@ export default {
             const { editStore } = reactData;
             const { row, column } = editStore.selected;
             if (row && column) {
-                return { row, column };
+                return {
+                    row,
+                    column
+                };
             }
             return null;
         },

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

@@ -11,11 +11,12 @@ export default {
          * @param column
          */
         _openFilter(fieldOrColumn) {
+            const $xeTable = this;
             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`);
@@ -23,7 +24,7 @@ export default {
                     }
                 });
             }
-            return this.$nextTick();
+            return $xeTable.$nextTick();
         },
         /**
          * 修改筛选条件列表
@@ -206,22 +207,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, 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) {
+            if (mouseConfig && mouseOpts.area && $xeTable.handleFilterEvent) {
                 $xeTable.handleFilterEvent(evnt, 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();
@@ -252,6 +253,7 @@ export default {
             $xeTable.handleColumnConfirmFilter(column, evnt);
         },
         handleClearFilter(column) {
+            const $xeTable = this;
             if (column) {
                 const { filters, filterRender } = column;
                 if (filters) {
@@ -265,7 +267,7 @@ export default {
                         }
                     });
                     if (filterResetMethod) {
-                        filterResetMethod({ options: filters, column, $table: this });
+                        filterResetMethod({ options: filters, column, $table: $xeTable });
                     }
                 }
             }

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

@@ -104,23 +104,30 @@ export default {
                     const params = { 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`;
                         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`, params, evnt);
                         }
                         else {
-                            this.emitEvent(`${typePrefix}cell-menu`, params, evnt);
+                            $xeTable.dispatchEvent(eventType, params, evnt);
                         }
                         return;
                     }
@@ -275,10 +282,10 @@ 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', params, evnt);
                 }
                 else {
-                    this.emitEvent('menu-click', params, evnt);
+                    $xeTable.dispatchEvent('menu-click', params, evnt);
                 }
                 this.closeMenu();
             }

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

@@ -181,10 +181,11 @@ export default {
          * 聚焦到校验通过的单元格并弹出校验错误提示
          */
         handleValidError(params) {
+            const $xeTable = this;
             const { validOpts } = this;
             return new Promise(resolve => {
                 if (validOpts.autoPos === false) {
-                    this.emitEvent('valid-error', params);
+                    $xeTable.dispatchEvent('valid-error', params, null);
                     resolve();
                 }
                 else {
@@ -547,6 +548,7 @@ export default {
          * 弹出校验错误提示
          */
         showValidTooltip(params) {
+            const $xeTable = this;
             const { $refs, height, validStore, validErrorMaps, tableData, validOpts } = this;
             const { rule, row, column, cell } = params;
             const validTip = $refs.refValidTooltip;
@@ -572,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/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);
         }
     }
 };