vxe-table 4.23.4 → 4.23.6

package/es/table/src/header.js

@@ -1,531 +1,529 @@
-import { h, ref, inject, nextTick, watch, onMounted, onUnmounted } from 'vue';
-import { defineVxeComponent } from '../../ui/src/comp';
-import XEUtils from 'xe-utils';
-import { VxeUI } from '../../ui';
-import { getDefaultConfig, hasEnableConf, isEnableConf } from '../../ui/src/utils';
-import { getCalcHeight, convertHeaderColumnToRows, convertHeaderToGridRows } from './util';
-import { getSlotVNs } from '../../ui/src/vn';
+import { h, ref, inject, nextTick, watch, onMounted, onUnmounted } from "vue";
+import { defineVxeComponent } from "../../ui/src/comp";
+import XEUtils from "xe-utils";
+import { VxeUI } from "../../ui";
+import { getDefaultConfig, hasEnableConf, isEnableConf } from "../../ui/src/utils";
+import { getCalcHeight, convertHeaderColumnToRows, convertHeaderToGridRows } from "./util";
+import { getSlotVNs } from "../../ui/src/vn";
 const { renderer, renderEmptyElement } = VxeUI;
-const sourceType = 'table';
-const renderType = 'header';
-export default defineVxeComponent({
-    name: 'VxeTableHeader',
-    props: {
-        tableData: Array,
-        tableColumn: Array,
-        tableGroupColumn: Array,
-        fixedColumn: Array,
-        fixedType: {
-            type: String,
-            default: null
+const sourceType = "table";
+const renderType = "header";
+var header_default = defineVxeComponent({
+  name: "VxeTableHeader",
+  props: {
+    tableData: Array,
+    tableColumn: Array,
+    tableGroupColumn: Array,
+    fixedColumn: Array,
+    fixedType: {
+      type: String,
+      default: null
+    }
+  },
+  setup(props) {
+    const $xeTable = inject("$xeTable", {});
+    const { xID, props: tableProps, reactData: tableReactData, internalData: tableInternalData } = $xeTable;
+    const { computeColumnOpts, computeColumnDragOpts, computeCellOpts, computeMouseOpts, computeHeaderCellOpts, computeDefaultRowHeight, computeVirtualXOpts, computeFloatingFilterOpts, computeIsHeaderRenderOptimize, computeHeaderTooltipOpts, computeRendererOpts } = $xeTable.getComputeMaps();
+    const headerColumn = ref([]);
+    const refElem = ref();
+    const refHeaderScroll = ref();
+    const refHeaderTable = ref();
+    const refHeaderColgroup = ref();
+    const refHeaderTHead = ref();
+    const refHeaderXSpace = ref();
+    const refHeaderBorderRepair = ref();
+    const uploadColumn = () => {
+      const { showCustomHeader } = tableProps;
+      const { collectColumn, visibleColumn } = tableInternalData;
+      const { tableGroupColumn } = props;
+      const { isGroup } = tableReactData;
+      let spanColumns = isGroup ? convertHeaderColumnToRows(tableGroupColumn) : [];
+      let visibleColgroups = [];
+      if (showCustomHeader && spanColumns.length > 1) {
+        visibleColgroups = convertHeaderToGridRows(spanColumns);
+        spanColumns = visibleColgroups;
+      }
+      headerColumn.value = spanColumns;
+      nextTick(() => {
+        $xeTable.dispatchEvent("columns-change", { visibleColgroups, collectColumn, visibleColumn }, null);
+      });
+    };
+    const renderRows = (isGroup, isOptimizeMode, headerGroups, _rowIndex, cols) => {
+      const $xeGrid = $xeTable.xeGrid;
+      const $xeGantt = $xeTable.xeGantt;
+      const { fixedType } = props;
+      const { resizable: allResizable, columnKey, showCustomHeader, headerCellClassName, headerCellStyle, showHeaderOverflow: allColumnHeaderOverflow, headerAlign: allHeaderAlign, align: allAlign, mouseConfig } = tableProps;
+      const { dragCol, scrollXLoad, scrollYLoad, overflowX, mergeHeadFlag, tableColumn, currColFlag } = tableReactData;
+      const { fullColumnIdData, scrollXStore, mergeHeaderList, mergeHeaderCellMaps, currentCol } = tableInternalData;
+      const virtualXOpts = computeVirtualXOpts.value;
+      const columnOpts = computeColumnOpts.value;
+      const columnDragOpts = computeColumnDragOpts.value;
+      const headerTooltipOpts = computeHeaderTooltipOpts.value;
+      const cellOpts = computeCellOpts.value;
+      const defaultRowHeight = computeDefaultRowHeight.value;
+      const headerCellOpts = computeHeaderCellOpts.value;
+      const rendererOpts = computeRendererOpts.value;
+      const mouseOpts = computeMouseOpts.value;
+      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 colid = column.id;
+        const colRest = fullColumnIdData[colid] || {};
+        const renderOpts = editRender || cellRender;
+        const compConf = renderOpts && renderOpts.name ? rendererOpts[renderOpts.name] || renderer.get(renderOpts.name) : null;
+        const isColGroup = column.children && column.children.length;
+        const fixedHiddenColumn = overflowX && !isColGroup && (fixedType ? column.fixed !== fixedType : !!column.fixed);
+        const cellPadding = getDefaultConfig(headerCellOpts.padding, cellOpts.padding);
+        const isAllCellPadding = cellPadding === true;
+        const isCellPaddingTop = cellPadding ? isAllCellPadding || cellPadding.top !== false : false;
+        const isCellPaddingBottom = cellPadding ? isAllCellPadding || cellPadding.bottom !== false : false;
+        const isCellPaddingLeft = cellPadding ? isAllCellPadding || cellPadding.left !== false : false;
+        const isCellPaddingRight = cellPadding ? isAllCellPadding || cellPadding.right !== false : false;
+        const headOverflow = getDefaultConfig(showHeaderOverflow, allColumnHeaderOverflow);
+        const headAlign = headerAlign || (compConf ? compConf.tableHeaderCellAlign : "") || allHeaderAlign || align || (compConf ? compConf.tableCellAlign : "") || allAlign;
+        const showEllipsis = (headOverflow === true ? headerTooltipOpts.mode : headOverflow) === "ellipsis";
+        const showTitle = (headOverflow === true ? headerTooltipOpts.mode : headOverflow) === "title";
+        const showTooltip = (headOverflow === true ? headerTooltipOpts.mode : headOverflow) === "tooltip";
+        const hasEllipsis = showTitle || showTooltip || showEllipsis;
+        let hasFilter = false;
+        let firstFilterOption = null;
+        if (filters) {
+          firstFilterOption = filters[0];
+          hasFilter = filters.some((item) => item.checked);
         }
-    },
-    setup(props) {
-        const $xeTable = inject('$xeTable', {});
-        const { xID, props: tableProps, reactData: tableReactData, internalData: tableInternalData } = $xeTable;
-        const { computeColumnOpts, computeColumnDragOpts, computeCellOpts, computeMouseOpts, computeHeaderCellOpts, computeDefaultRowHeight, computeVirtualXOpts, computeFloatingFilterOpts, computeIsHeaderRenderOptimize, computeHeaderTooltipOpts, computeRendererOpts } = $xeTable.getComputeMaps();
-        const headerColumn = ref([]);
-        const refElem = ref();
-        const refHeaderScroll = ref();
-        const refHeaderTable = ref();
-        const refHeaderColgroup = ref();
-        const refHeaderTHead = ref();
-        const refHeaderXSpace = ref();
-        const refHeaderBorderRepair = ref();
-        const uploadColumn = () => {
-            const { showCustomHeader } = tableProps;
-            const { collectColumn, visibleColumn } = tableInternalData;
-            const { tableGroupColumn } = props;
-            const { isGroup } = tableReactData;
-            let spanColumns = isGroup ? convertHeaderColumnToRows(tableGroupColumn) : [];
-            let visibleColgroups = [];
-            if (showCustomHeader && spanColumns.length > 1) {
-                visibleColgroups = convertHeaderToGridRows(spanColumns);
-                spanColumns = visibleColgroups;
-            }
-            headerColumn.value = spanColumns;
-            nextTick(() => {
-                $xeTable.dispatchEvent('columns-change', { visibleColgroups, collectColumn, visibleColumn }, null);
-            });
+        const columnIndex = colRest.index;
+        const _columnIndex = colRest._index;
+        const cellParams = {
+          $table: $xeTable,
+          $grid: $xeGrid,
+          $gantt: $xeGantt,
+          rowIndex: _rowIndex,
+          _rowIndex,
+          $rowIndex: _rowIndex,
+          column,
+          columnIndex,
+          $columnIndex,
+          _columnIndex,
+          firstFilterOption,
+          fixed: fixedType,
+          source: sourceType,
+          type: renderType,
+          isHidden: fixedHiddenColumn,
+          hasFilter
         };
-        const renderRows = (isGroup, isOptimizeMode, headerGroups, _rowIndex, cols) => {
-            const $xeGrid = $xeTable.xeGrid;
-            const $xeGantt = $xeTable.xeGantt;
-            const { fixedType } = props;
-            const { resizable: allResizable, columnKey, showCustomHeader, headerCellClassName, headerCellStyle, showHeaderOverflow: allColumnHeaderOverflow, headerAlign: allHeaderAlign, align: allAlign, mouseConfig } = tableProps;
-            const { dragCol, scrollXLoad, scrollYLoad, overflowX, mergeHeadFlag, tableColumn, currColFlag } = tableReactData;
-            const { fullColumnIdData, scrollXStore, mergeHeaderList, mergeHeaderCellMaps, currentCol } = tableInternalData;
-            const virtualXOpts = computeVirtualXOpts.value;
-            const columnOpts = computeColumnOpts.value;
-            const columnDragOpts = computeColumnDragOpts.value;
-            const headerTooltipOpts = computeHeaderTooltipOpts.value;
-            const cellOpts = computeCellOpts.value;
-            const defaultRowHeight = computeDefaultRowHeight.value;
-            const headerCellOpts = computeHeaderCellOpts.value;
-            const rendererOpts = computeRendererOpts.value;
-            const mouseOpts = computeMouseOpts.value;
-            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 colid = column.id;
-                const colRest = fullColumnIdData[colid] || {};
-                const renderOpts = editRender || cellRender;
-                const compConf = renderOpts && renderOpts.name ? (rendererOpts[renderOpts.name] || renderer.get(renderOpts.name)) : null;
-                const isColGroup = column.children && column.children.length;
-                const fixedHiddenColumn = overflowX && !isColGroup && (fixedType ? column.fixed !== fixedType : !!column.fixed);
-                const cellPadding = getDefaultConfig(headerCellOpts.padding, cellOpts.padding);
-                const isAllCellPadding = cellPadding === true;
-                const isCellPaddingTop = cellPadding ? (isAllCellPadding || cellPadding.top !== false) : false;
-                const isCellPaddingBottom = cellPadding ? (isAllCellPadding || cellPadding.bottom !== false) : false;
-                const isCellPaddingLeft = cellPadding ? (isAllCellPadding || cellPadding.left !== false) : false;
-                const isCellPaddingRight = cellPadding ? (isAllCellPadding || cellPadding.right !== false) : false;
-                const headOverflow = getDefaultConfig(showHeaderOverflow, allColumnHeaderOverflow);
-                const headAlign = headerAlign || (compConf ? compConf.tableHeaderCellAlign : '') || allHeaderAlign || align || (compConf ? compConf.tableCellAlign : '') || allAlign;
-                const showEllipsis = (headOverflow === true ? headerTooltipOpts.mode : headOverflow) === 'ellipsis';
-                const showTitle = (headOverflow === true ? headerTooltipOpts.mode : headOverflow) === 'title';
-                const showTooltip = (headOverflow === true ? headerTooltipOpts.mode : headOverflow) === 'tooltip';
-                const hasEllipsis = showTitle || showTooltip || showEllipsis;
-                let hasFilter = false;
-                let firstFilterOption = null;
-                if (filters) {
-                    firstFilterOption = filters[0];
-                    hasFilter = filters.some((item) => item.checked);
-                }
-                const columnIndex = colRest.index;
-                const _columnIndex = colRest._index;
-                const cellParams = {
-                    $table: $xeTable,
-                    $grid: $xeGrid,
-                    $gantt: $xeGantt,
-                    rowIndex: _rowIndex,
-                    _rowIndex,
-                    $rowIndex: _rowIndex,
-                    column,
-                    columnIndex,
-                    $columnIndex,
-                    _columnIndex,
-                    firstFilterOption: firstFilterOption,
-                    fixed: fixedType,
-                    source: sourceType,
-                    type: renderType,
-                    isHidden: fixedHiddenColumn,
-                    hasFilter
-                };
-                const thAttrs = {
-                    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 = {
-                    onClick: (evnt) => $xeTable.triggerHeaderCellClickEvent(evnt, cellParams),
-                    onDblclick: (evnt) => $xeTable.triggerHeaderCellDblclickEvent(evnt, cellParams)
-                };
-                const isColDragCell = columnOpts.drag && columnDragOpts.trigger === 'cell';
-                let isDisabledDrag = false;
-                if (isColDragCell) {
-                    isDisabledDrag = !!(dragDisabledMethod && dragDisabledMethod(cellParams));
-                }
-                // 按下事件处理
-                if (hasEnableConf(mouseConfig, mouseOpts) || isColDragCell) {
-                    thOns.onMousedown = (evnt) => $xeTable.triggerHeaderCellMousedownEvent(evnt, cellParams);
-                }
-                // 拖拽列事件
-                if (columnOpts.drag) {
-                    thOns.onDragstart = $xeTable.handleHeaderCellDragDragstartEvent;
-                    thOns.onDragend = $xeTable.handleHeaderCellDragDragendEvent;
-                    thOns.onDragover = $xeTable.handleHeaderCellDragDragoverEvent;
-                    if (isColDragCell) {
-                        thOns.onMouseup = $xeTable.handleHeaderCellDragMouseupEvent;
-                    }
-                }
-                const isLastColumn = $columnIndex === cols.length - 1;
-                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 && !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;
-                        }
-                    }
-                }
-                const tcStyle = {};
-                if (hasEllipsis) {
-                    tcStyle.height = `${currCellHeight}px`;
-                }
-                else {
-                    tcStyle.minHeight = `${currCellHeight}px`;
-                }
-                if (showCustomHeader) {
-                    // custom
-                }
-                else if (isColGroup && !isLastRow) {
-                    let childWidth = 0;
-                    XEUtils.eachTree(column.children, (childRow) => {
-                        if (childRow.visible && (!childRow.children || !childRow.children.length)) {
-                            childWidth += childRow.renderWidth;
-                        }
-                    });
-                    tcStyle.width = `${childWidth}px`;
-                }
-                return h('th', Object.assign(Object.assign(Object.assign({ class: ['vxe-table--column vxe-header--column', colid, fixedHiddenColumn ? 'fixed--hidden' : 'fixed--visible', {
-                            [`col--${headAlign}`]: headAlign,
-                            [`col--${type}`]: type,
-                            'col--last': isLastColumn,
-                            'col--fixed': column.fixed,
-                            'col--group': isColGroup,
-                            'col--ellipsis': hasEllipsis,
-                            'fixed--width': !isAutoCellWidth,
-                            'is--pg-top': isCellPaddingTop,
-                            'is--pg-bottom': isCellPaddingBottom,
-                            'is--pg-left': isCellPaddingLeft,
-                            'is--pg-right': isCellPaddingRight,
-                            'is--sortable': column.sortable,
-                            'col--filter': !!filters,
-                            'is--filter-active': hasFilter,
-                            'is--drag-active': columnOpts.drag && !column.fixed && !isDisabledDrag && (isCrossDrag || isPeerDrag || !column.parentId),
-                            'is--drag-disabled': columnOpts.drag && isDisabledDrag,
-                            'col--current': currColFlag && currentCol === column
-                        },
-                        headerClassName ? (XEUtils.isFunction(headerClassName) ? headerClassName(cellParams) : headerClassName) : '',
-                        headerCellClassName ? (XEUtils.isFunction(headerCellClassName) ? headerCellClassName(cellParams) : headerCellClassName) : ''
-                    ], style: headerCellStyle ? (XEUtils.isFunction(headerCellStyle) ? headerCellStyle(cellParams) : headerCellStyle) : null }, thAttrs), thOns), { key: showCustomHeader ? `${colid}${$columnIndex}` : (columnKey || scrollXLoad || scrollYLoad || columnOpts.useKey || columnOpts.drag || isColGroup ? colid : $columnIndex) }), [
-                    h('div', {
-                        class: ['vxe-cell', {
-                                'c--title': showTitle,
-                                'c--tooltip': showTooltip,
-                                'c--ellipsis': showEllipsis
-                            }],
-                        style: tcStyle
-                    }, isVNPreEmptyStatus || (isOptimizeMode && fixedHiddenColumn)
-                        ? []
-                        : [
-                            h('div', {
-                                colid,
-                                class: 'vxe-cell--wrapper vxe-header-cell--wrapper'
-                            }, column.renderHeader(cellParams))
-                        ]),
-                    /**
-                     * 列宽拖动
-                     */
-                    !fixedHiddenColumn && showResizable && (!showCustomHeader || isLastRow)
-                        ? h('div', {
-                            class: 'vxe-cell--col-resizable',
-                            onMousedown: (evnt) => $xeTable.handleColResizeMousedownEvent(evnt, fixedType, cellParams),
-                            onDblclick: (evnt) => $xeTable.handleColResizeDblclickEvent(evnt, cellParams)
-                        })
-                        : renderEmptyElement($xeTable)
-                ]);
-            });
+        const thAttrs = {
+          colid
         };
-        const renderFilterRows = (isOptimizeMode, cols) => {
-            const $xeGrid = $xeTable.xeGrid;
-            const $xeGantt = $xeTable.xeGantt;
-            const { fixedType } = props;
-            const { showHeaderOverflow: allColumnHeaderOverflow, headerAlign: allHeaderAlign, align: allAlign } = tableProps;
-            const { overflowX, currColFlag } = tableReactData;
-            const { fullColumnIdData, currentCol } = tableInternalData;
-            const headerTooltipOpts = computeHeaderTooltipOpts.value;
-            const cellOpts = computeCellOpts.value;
-            const defaultRowHeight = computeDefaultRowHeight.value;
-            const headerCellOpts = computeHeaderCellOpts.value;
-            const floatingFilterOpts = computeFloatingFilterOpts.value;
-            const rendererOpts = computeRendererOpts.value;
-            const { cellClassName } = floatingFilterOpts;
-            const currCellHeight = getCalcHeight(headerCellOpts.height) || defaultRowHeight;
-            return cols.map((column, $columnIndex) => {
-                const { type, showHeaderOverflow, headerAlign, align, filters, editRender, cellRender, floatingFilters, filterRender, slots } = column;
-                const colid = column.id;
-                const colRest = fullColumnIdData[colid] || {};
-                const renderOpts = editRender || cellRender;
-                const flSlot = slots ? (slots.floatingFilter || slots['floating-filter']) : null;
-                const compConf = renderOpts && renderOpts.name ? (rendererOpts[renderOpts.name] || renderer.get(renderOpts.name)) : null;
-                const flCompConf = isEnableConf(filterRender) && filterRender.name ? (rendererOpts[filterRender.name] || renderer.get(filterRender.name)) : null;
-                const rtFloatingFilter = flCompConf ? flCompConf.renderTableFloatingFilter : null;
-                const fixedHiddenColumn = overflowX && (fixedType ? column.fixed !== fixedType : !!column.fixed);
-                const isPadding = XEUtils.isBoolean(headerCellOpts.padding) ? headerCellOpts.padding : cellOpts.padding;
-                const headOverflow = XEUtils.eqNull(showHeaderOverflow) ? allColumnHeaderOverflow : showHeaderOverflow;
-                const headAlign = headerAlign || (compConf ? compConf.tableHeaderCellAlign : '') || allHeaderAlign || align || (compConf ? compConf.tableCellAlign : '') || allAlign;
-                const showEllipsis = headOverflow === 'ellipsis';
-                const showTitle = headOverflow === 'title';
-                const showTooltip = headOverflow === true ? headerTooltipOpts.mode === 'tooltip' : headOverflow === 'tooltip';
-                const hasEllipsis = showTitle || showTooltip || showEllipsis;
-                let hasFilter = false;
-                let firstFilterOption = null;
-                if (filters) {
-                    firstFilterOption = filters[0];
-                    hasFilter = filters.some((item) => item.checked);
-                }
-                const columnIndex = colRest.index;
-                const _columnIndex = colRest._index;
-                const cellParams = {
-                    $table: $xeTable,
-                    $grid: $xeGrid,
-                    $gantt: $xeGantt,
-                    column,
-                    columnIndex,
-                    $columnIndex,
-                    _columnIndex,
-                    option: firstFilterOption,
-                    fixed: fixedType,
-                    source: sourceType,
-                    type: renderType,
-                    isHidden: fixedHiddenColumn,
-                    hasFilter
-                };
-                const thAttrs = {
-                    colid
-                };
-                const isLastColumn = $columnIndex === cols.length - 1;
-                const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto');
-                const tcStyle = {};
-                if (hasEllipsis) {
-                    tcStyle.height = `${currCellHeight}px`;
-                }
-                else {
-                    tcStyle.minHeight = `${currCellHeight}px`;
-                }
-                return h('th', Object.assign({ class: ['vxe-table--column vxe-header--column is--floating-filters', colid, fixedHiddenColumn ? 'fixed--hidden' : 'fixed--visible', {
-                            [`col--${headAlign}`]: headAlign,
-                            [`col--${type}`]: type,
-                            'col--last': isLastColumn,
-                            'col--fixed': column.fixed,
-                            'col--ellipsis': hasEllipsis,
-                            'fixed--width': !isAutoCellWidth,
-                            'is--padding': isPadding,
-                            'is--sortable': column.sortable,
-                            'col--current': currColFlag && currentCol === column
-                        }
-                    ], key: colid }, thAttrs), [
-                    h('div', {
-                        class: ['vxe-cell', '' + (cellClassName || ''), {
-                                'c--title': showTitle,
-                                'c--tooltip': showTooltip,
-                                'c--ellipsis': showEllipsis
-                            }],
-                        style: tcStyle
-                    }, isOptimizeMode && fixedHiddenColumn && !floatingFilters
-                        ? []
-                        : [
-                            h('div', {
-                                colid,
-                                class: 'vxe-cell--wrapper vxe-header-cell--wrapper'
-                            }, flSlot
-                                ? $xeTable.callSlot(flSlot, cellParams)
-                                : (rtFloatingFilter && firstFilterOption
-                                    ? getSlotVNs(rtFloatingFilter(filterRender, cellParams))
-                                    : []))
-                        ])
-                ]);
-            });
+        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 = {
+          onClick: (evnt) => $xeTable.triggerHeaderCellClickEvent(evnt, cellParams),
+          onDblclick: (evnt) => $xeTable.triggerHeaderCellDblclickEvent(evnt, cellParams)
         };
-        const renderHeads = (isGroup, isOptimizeMode, headerGroups, renderColumnList) => {
-            const { fixedType } = props;
-            const { headerRowClassName, headerRowStyle } = tableProps;
-            const floatingFilterOpts = computeFloatingFilterOpts.value;
-            const rowVNs = headerGroups.map((cols, _rowIndex) => {
-                const params = { $table: $xeTable, rowIndex: _rowIndex, _rowIndex, $rowIndex: _rowIndex, fixed: fixedType, type: renderType };
-                return h('tr', {
-                    key: _rowIndex,
-                    class: [
-                        'vxe-header--row',
-                        headerRowClassName ? (XEUtils.isFunction(headerRowClassName) ? headerRowClassName(params) : headerRowClassName) : ''
-                    ],
-                    style: headerRowStyle ? (XEUtils.isFunction(headerRowStyle) ? headerRowStyle(params) : headerRowStyle) : null
-                }, renderRows(isGroup, isOptimizeMode, headerGroups, _rowIndex, cols));
-            });
-            if (floatingFilterOpts.enabled) {
-                rowVNs.push(h('tr', {
-                    key: 'ff',
-                    class: [
-                        'vxe-header--row is--floating-filters',
-                        '' + (floatingFilterOpts.rowClassName || '')
-                    ]
-                }, renderFilterRows(isOptimizeMode, renderColumnList)));
+        const isColDragCell = columnOpts.drag && columnDragOpts.trigger === "cell";
+        let isDisabledDrag = false;
+        if (isColDragCell) {
+          isDisabledDrag = !!(dragDisabledMethod && dragDisabledMethod(cellParams));
+        }
+        if (hasEnableConf(mouseConfig, mouseOpts) || isColDragCell) {
+          thOns.onMousedown = (evnt) => $xeTable.triggerHeaderCellMousedownEvent(evnt, cellParams);
+        }
+        if (columnOpts.drag) {
+          thOns.onDragstart = $xeTable.handleHeaderCellDragDragstartEvent;
+          thOns.onDragend = $xeTable.handleHeaderCellDragDragendEvent;
+          thOns.onDragover = $xeTable.handleHeaderCellDragDragoverEvent;
+          if (isColDragCell) {
+            thOns.onMouseup = $xeTable.handleHeaderCellDragMouseupEvent;
+          }
+        }
+        const isLastColumn = $columnIndex === cols.length - 1;
+        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 && !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;
             }
-            return rowVNs;
+          }
+        }
+        const tcStyle = {};
+        if (hasEllipsis) {
+          tcStyle.height = `${currCellHeight}px`;
+        } else {
+          tcStyle.minHeight = `${currCellHeight}px`;
+        }
+        if (showCustomHeader) {
+        } else if (isColGroup && !isLastRow) {
+          let childWidth = 0;
+          XEUtils.eachTree(column.children, (childRow) => {
+            if (childRow.visible && (!childRow.children || !childRow.children.length)) {
+              childWidth += childRow.renderWidth;
+            }
+          });
+          tcStyle.width = `${childWidth}px`;
+        }
+        return h("th", {
+          class: [
+            "vxe-table--column vxe-header--column",
+            colid,
+            fixedHiddenColumn ? "fixed--hidden" : "fixed--visible",
+            {
+              [`col--${headAlign}`]: headAlign,
+              [`col--${type}`]: type,
+              "col--last": isLastColumn,
+              "col--fixed": column.fixed,
+              "col--group": isColGroup,
+              "col--ellipsis": hasEllipsis,
+              "fixed--width": !isAutoCellWidth,
+              "is--pg-top": isCellPaddingTop,
+              "is--pg-bottom": isCellPaddingBottom,
+              "is--pg-left": isCellPaddingLeft,
+              "is--pg-right": isCellPaddingRight,
+              "is--sortable": column.sortable,
+              "col--filter": !!filters,
+              "is--filter-active": hasFilter,
+              "is--drag-active": columnOpts.drag && !column.fixed && !isDisabledDrag && (isCrossDrag || isPeerDrag || !column.parentId),
+              "is--drag-disabled": columnOpts.drag && isDisabledDrag,
+              "col--current": currColFlag && currentCol === column
+            },
+            headerClassName ? XEUtils.isFunction(headerClassName) ? headerClassName(cellParams) : headerClassName : "",
+            headerCellClassName ? XEUtils.isFunction(headerCellClassName) ? headerCellClassName(cellParams) : headerCellClassName : ""
+          ],
+          style: headerCellStyle ? XEUtils.isFunction(headerCellStyle) ? headerCellStyle(cellParams) : headerCellStyle : null,
+          ...thAttrs,
+          ...thOns,
+          key: showCustomHeader ? `${colid}${$columnIndex}` : columnKey || scrollXLoad || scrollYLoad || columnOpts.useKey || columnOpts.drag || isColGroup ? colid : $columnIndex
+        }, [
+          h("div", {
+            class: ["vxe-cell", {
+              "c--title": showTitle,
+              "c--tooltip": showTooltip,
+              "c--ellipsis": showEllipsis
+            }],
+            style: tcStyle
+          }, isVNPreEmptyStatus || isOptimizeMode && fixedHiddenColumn ? [] : [
+            h("div", {
+              colid,
+              class: "vxe-cell--wrapper vxe-header-cell--wrapper"
+            }, column.renderHeader(cellParams))
+          ]),
+          /**
+           * 列宽拖动
+           */
+          !fixedHiddenColumn && showResizable && (!showCustomHeader || isLastRow) ? h("div", {
+            class: "vxe-cell--col-resizable",
+            onMousedown: (evnt) => $xeTable.handleColResizeMousedownEvent(evnt, fixedType, cellParams),
+            onDblclick: (evnt) => $xeTable.handleColResizeDblclickEvent(evnt, cellParams)
+          }) : renderEmptyElement($xeTable)
+        ]);
+      });
+    };
+    const renderFilterRows = (isOptimizeMode, cols) => {
+      const $xeGrid = $xeTable.xeGrid;
+      const $xeGantt = $xeTable.xeGantt;
+      const { fixedType } = props;
+      const { showHeaderOverflow: allColumnHeaderOverflow, headerAlign: allHeaderAlign, align: allAlign } = tableProps;
+      const { overflowX, currColFlag } = tableReactData;
+      const { fullColumnIdData, currentCol } = tableInternalData;
+      const headerTooltipOpts = computeHeaderTooltipOpts.value;
+      const cellOpts = computeCellOpts.value;
+      const defaultRowHeight = computeDefaultRowHeight.value;
+      const headerCellOpts = computeHeaderCellOpts.value;
+      const floatingFilterOpts = computeFloatingFilterOpts.value;
+      const rendererOpts = computeRendererOpts.value;
+      const { cellClassName } = floatingFilterOpts;
+      const currCellHeight = getCalcHeight(headerCellOpts.height) || defaultRowHeight;
+      return cols.map((column, $columnIndex) => {
+        const { type, showHeaderOverflow, headerAlign, align, filters, editRender, cellRender, floatingFilters, filterRender, slots } = column;
+        const colid = column.id;
+        const colRest = fullColumnIdData[colid] || {};
+        const renderOpts = editRender || cellRender;
+        const flSlot = slots ? slots.floatingFilter || slots["floating-filter"] : null;
+        const compConf = renderOpts && renderOpts.name ? rendererOpts[renderOpts.name] || renderer.get(renderOpts.name) : null;
+        const flCompConf = isEnableConf(filterRender) && filterRender.name ? rendererOpts[filterRender.name] || renderer.get(filterRender.name) : null;
+        const rtFloatingFilter = flCompConf ? flCompConf.renderTableFloatingFilter : null;
+        const fixedHiddenColumn = overflowX && (fixedType ? column.fixed !== fixedType : !!column.fixed);
+        const isPadding = XEUtils.isBoolean(headerCellOpts.padding) ? headerCellOpts.padding : cellOpts.padding;
+        const headOverflow = XEUtils.eqNull(showHeaderOverflow) ? allColumnHeaderOverflow : showHeaderOverflow;
+        const headAlign = headerAlign || (compConf ? compConf.tableHeaderCellAlign : "") || allHeaderAlign || align || (compConf ? compConf.tableCellAlign : "") || allAlign;
+        const showEllipsis = headOverflow === "ellipsis";
+        const showTitle = headOverflow === "title";
+        const showTooltip = headOverflow === true ? headerTooltipOpts.mode === "tooltip" : headOverflow === "tooltip";
+        const hasEllipsis = showTitle || showTooltip || showEllipsis;
+        let hasFilter = false;
+        let firstFilterOption = null;
+        if (filters) {
+          firstFilterOption = filters[0];
+          hasFilter = filters.some((item) => item.checked);
+        }
+        const columnIndex = colRest.index;
+        const _columnIndex = colRest._index;
+        const cellParams = {
+          $table: $xeTable,
+          $grid: $xeGrid,
+          $gantt: $xeGantt,
+          column,
+          columnIndex,
+          $columnIndex,
+          _columnIndex,
+          option: firstFilterOption,
+          fixed: fixedType,
+          source: sourceType,
+          type: renderType,
+          isHidden: fixedHiddenColumn,
+          hasFilter
         };
-        const renderVN = () => {
-            const { fixedType, fixedColumn, tableColumn } = props;
-            const { mouseConfig } = tableProps;
-            const { isGroup, isColLoading, overflowX, scrollXLoad, dragCol } = tableReactData;
-            const { visibleColumn, fullColumnIdData } = tableInternalData;
-            const mouseOpts = computeMouseOpts.value;
-            const isHeaderRenderOptimize = computeIsHeaderRenderOptimize.value;
-            let renderHeaderList = headerColumn.value || [];
-            let renderColumnList = tableColumn;
-            const isOptimizeMode = isHeaderRenderOptimize;
-            if (isGroup) {
-                renderColumnList = visibleColumn;
+        const thAttrs = {
+          colid
+        };
+        const isLastColumn = $columnIndex === cols.length - 1;
+        const isAutoCellWidth = !column.resizeWidth && (column.minWidth === "auto" || column.width === "auto");
+        const tcStyle = {};
+        if (hasEllipsis) {
+          tcStyle.height = `${currCellHeight}px`;
+        } else {
+          tcStyle.minHeight = `${currCellHeight}px`;
+        }
+        return h("th", {
+          class: [
+            "vxe-table--column vxe-header--column is--floating-filters",
+            colid,
+            fixedHiddenColumn ? "fixed--hidden" : "fixed--visible",
+            {
+              [`col--${headAlign}`]: headAlign,
+              [`col--${type}`]: type,
+              "col--last": isLastColumn,
+              "col--fixed": column.fixed,
+              "col--ellipsis": hasEllipsis,
+              "fixed--width": !isAutoCellWidth,
+              "is--padding": isPadding,
+              "is--sortable": column.sortable,
+              "col--current": currColFlag && currentCol === column
             }
-            else {
-                if (!isOptimizeMode || (!isColLoading && (fixedType || !overflowX))) {
-                    renderColumnList = visibleColumn;
-                }
-                if (fixedType) {
-                    // 如果是使用优化模式
-                    if (isOptimizeMode) {
-                        renderColumnList = fixedColumn || [];
-                    }
+          ],
+          key: colid,
+          ...thAttrs
+        }, [
+          h("div", {
+            class: ["vxe-cell", "" + (cellClassName || ""), {
+              "c--title": showTitle,
+              "c--tooltip": showTooltip,
+              "c--ellipsis": showEllipsis
+            }],
+            style: tcStyle
+          }, isOptimizeMode && fixedHiddenColumn && !floatingFilters ? [] : [
+            h("div", {
+              colid,
+              class: "vxe-cell--wrapper vxe-header-cell--wrapper"
+            }, flSlot ? $xeTable.callSlot(flSlot, cellParams) : rtFloatingFilter && firstFilterOption ? getSlotVNs(rtFloatingFilter(filterRender, cellParams)) : [])
+          ])
+        ]);
+      });
+    };
+    const renderHeads = (isGroup, isOptimizeMode, headerGroups, renderColumnList) => {
+      const { fixedType } = props;
+      const { headerRowClassName, headerRowStyle } = tableProps;
+      const floatingFilterOpts = computeFloatingFilterOpts.value;
+      const rowVNs = headerGroups.map((cols, _rowIndex) => {
+        const params = { $table: $xeTable, rowIndex: _rowIndex, _rowIndex, $rowIndex: _rowIndex, fixed: fixedType, type: renderType };
+        return h("tr", {
+          key: _rowIndex,
+          class: [
+            "vxe-header--row",
+            headerRowClassName ? XEUtils.isFunction(headerRowClassName) ? headerRowClassName(params) : headerRowClassName : ""
+          ],
+          style: headerRowStyle ? XEUtils.isFunction(headerRowStyle) ? headerRowStyle(params) : headerRowStyle : null
+        }, renderRows(isGroup, isOptimizeMode, headerGroups, _rowIndex, cols));
+      });
+      if (floatingFilterOpts.enabled) {
+        rowVNs.push(
+          h("tr", {
+            key: "ff",
+            class: [
+              "vxe-header--row is--floating-filters",
+              "" + (floatingFilterOpts.rowClassName || "")
+            ]
+          }, renderFilterRows(isOptimizeMode, renderColumnList))
+        );
+      }
+      return rowVNs;
+    };
+    const renderVN = () => {
+      const { fixedType, fixedColumn, tableColumn } = props;
+      const { mouseConfig } = tableProps;
+      const { isGroup, isColLoading, overflowX, scrollXLoad, dragCol } = tableReactData;
+      const { visibleColumn, fullColumnIdData } = tableInternalData;
+      const mouseOpts = computeMouseOpts.value;
+      const isHeaderRenderOptimize = computeIsHeaderRenderOptimize.value;
+      let renderHeaderList = headerColumn.value || [];
+      let renderColumnList = tableColumn;
+      const isOptimizeMode = isHeaderRenderOptimize;
+      if (isGroup) {
+        renderColumnList = visibleColumn;
+      } else {
+        if (!isOptimizeMode || !isColLoading && (fixedType || !overflowX)) {
+          renderColumnList = visibleColumn;
+        }
+        if (fixedType) {
+          if (isOptimizeMode) {
+            renderColumnList = fixedColumn || [];
+          }
+        }
+        renderHeaderList = [renderColumnList];
+      }
+      if (!fixedType && !isGroup) {
+        if (scrollXLoad && dragCol) {
+          if (renderColumnList.length > 2) {
+            const dCowRest = fullColumnIdData[dragCol.id];
+            if (dCowRest) {
+              const dcIndex = dCowRest._index;
+              const firstCol = renderColumnList[0];
+              const lastCol = renderColumnList[renderColumnList.length - 1];
+              const firstColRest = fullColumnIdData[firstCol.id];
+              const lastColRest = fullColumnIdData[lastCol.id];
+              if (firstColRest && lastColRest) {
+                const fcIndex = firstColRest._index;
+                const lcIndex = lastColRest._index;
+                if (dcIndex < fcIndex) {
+                  renderColumnList = [dragCol].concat(renderColumnList);
+                  renderHeaderList = [[dragCol].concat(renderHeaderList[0])].concat(renderHeaderList.slice(1));
+                } else if (dcIndex > lcIndex) {
+                  renderColumnList = renderColumnList.concat([dragCol]);
+                  renderHeaderList = [renderHeaderList[0].concat([dragCol])].concat(renderHeaderList.slice(1));
                 }
-                renderHeaderList = [renderColumnList];
+              }
             }
-            if (!fixedType && !isGroup) {
-                // 列拖拽
-                if (scrollXLoad && dragCol) {
-                    if (renderColumnList.length > 2) {
-                        const dCowRest = fullColumnIdData[dragCol.id];
-                        if (dCowRest) {
-                            const dcIndex = dCowRest._index;
-                            const firstCol = renderColumnList[0];
-                            const lastCol = renderColumnList[renderColumnList.length - 1];
-                            const firstColRest = fullColumnIdData[firstCol.id];
-                            const lastColRest = fullColumnIdData[lastCol.id];
-                            if (firstColRest && lastColRest) {
-                                const fcIndex = firstColRest._index;
-                                const lcIndex = lastColRest._index;
-                                if (dcIndex < fcIndex) {
-                                    renderColumnList = [dragCol].concat(renderColumnList);
-                                    renderHeaderList = [[dragCol].concat(renderHeaderList[0])].concat(renderHeaderList.slice(1));
-                                }
-                                else if (dcIndex > lcIndex) {
-                                    renderColumnList = renderColumnList.concat([dragCol]);
-                                    renderHeaderList = [renderHeaderList[0].concat([dragCol])].concat(renderHeaderList.slice(1));
-                                }
-                            }
-                        }
-                    }
+          }
+        }
+      }
+      return h("div", {
+        ref: refElem,
+        class: ["vxe-table--header-wrapper", fixedType ? `fixed-${fixedType}--wrapper` : "body--wrapper"],
+        xid: xID
+      }, [
+        h("div", {
+          ref: refHeaderScroll,
+          class: "vxe-table--header-inner-wrapper",
+          onScroll(evnt) {
+            $xeTable.triggerHeaderScrollEvent(evnt, fixedType);
+          }
+        }, [
+          fixedType ? renderEmptyElement($xeTable) : h("div", {
+            ref: refHeaderXSpace,
+            class: "vxe-body--x-space"
+          }),
+          h("table", {
+            ref: refHeaderTable,
+            class: "vxe-table--header",
+            xid: xID,
+            cellspacing: 0,
+            cellpadding: 0,
+            border: 0,
+            xvm: isOptimizeMode ? "1" : null
+          }, [
+            /**
+             * 列宽
+             */
+            h("colgroup", {
+              ref: refHeaderColgroup
+            }, renderColumnList.map((column, $columnIndex) => {
+              return h("col", {
+                name: column.id,
+                key: $columnIndex,
+                style: {
+                  width: `${column.renderWidth}px`
                 }
-            }
-            return h('div', {
-                ref: refElem,
-                class: ['vxe-table--header-wrapper', fixedType ? `fixed-${fixedType}--wrapper` : 'body--wrapper'],
-                xid: xID
-            }, [
-                h('div', {
-                    ref: refHeaderScroll,
-                    class: 'vxe-table--header-inner-wrapper',
-                    onScroll(evnt) {
-                        $xeTable.triggerHeaderScrollEvent(evnt, fixedType);
-                    }
-                }, [
-                    fixedType
-                        ? renderEmptyElement($xeTable)
-                        : h('div', {
-                            ref: refHeaderXSpace,
-                            class: 'vxe-body--x-space'
-                        }),
-                    h('table', {
-                        ref: refHeaderTable,
-                        class: 'vxe-table--header',
-                        xid: xID,
-                        cellspacing: 0,
-                        cellpadding: 0,
-                        border: 0,
-                        xvm: isOptimizeMode ? '1' : null
-                    }, [
-                        /**
-                         * 列宽
-                         */
-                        h('colgroup', {
-                            ref: refHeaderColgroup
-                        }, renderColumnList.map((column, $columnIndex) => {
-                            return h('col', {
-                                name: column.id,
-                                key: $columnIndex,
-                                style: {
-                                    width: `${column.renderWidth}px`
-                                }
-                            });
-                        })),
-                        /**
-                         * 头部
-                         */
-                        h('thead', {
-                            ref: refHeaderTHead
-                        }, renderHeads(isGroup, isOptimizeMode, renderHeaderList, renderColumnList))
-                    ]),
-                    hasEnableConf(mouseConfig, mouseOpts) && mouseOpts.area
-                        ? h('div', {
-                            class: 'vxe-table--cell-area',
-                            xid: xID
-                        }, [
-                            h('span', {
-                                class: 'vxe-table--cell-main-area'
-                            }),
-                            h('span', {
-                                class: 'vxe-table--cell-clip-area'
-                            }),
-                            h('span', {
-                                class: 'vxe-table--cell-extend-area'
-                            }),
-                            h('span', {
-                                class: 'vxe-table--cell-multi-area'
-                            }),
-                            h('span', {
-                                class: 'vxe-table--cell-active-area'
-                            }),
-                            h('span', {
-                                class: 'vxe-table--cell-col-status-area'
-                            })
-                        ])
-                        : renderEmptyElement($xeTable)
-                ])
-            ]);
-        };
-        watch(() => props.tableColumn, uploadColumn);
-        onMounted(() => {
-            nextTick(() => {
-                const { fixedType } = props;
-                const { internalData } = $xeTable;
-                const { elemStore } = internalData;
-                const prefix = `${fixedType || 'main'}-header-`;
-                elemStore[`${prefix}wrapper`] = refElem;
-                elemStore[`${prefix}scroll`] = refHeaderScroll;
-                elemStore[`${prefix}table`] = refHeaderTable;
-                elemStore[`${prefix}colgroup`] = refHeaderColgroup;
-                elemStore[`${prefix}list`] = refHeaderTHead;
-                elemStore[`${prefix}xSpace`] = refHeaderXSpace;
-                elemStore[`${prefix}repair`] = refHeaderBorderRepair;
-                uploadColumn();
-            });
-        });
-        onUnmounted(() => {
-            const { fixedType } = props;
-            const { internalData } = $xeTable;
-            const { elemStore } = internalData;
-            const prefix = `${fixedType || 'main'}-header-`;
-            elemStore[`${prefix}wrapper`] = null;
-            elemStore[`${prefix}scroll`] = null;
-            elemStore[`${prefix}table`] = null;
-            elemStore[`${prefix}colgroup`] = null;
-            elemStore[`${prefix}list`] = null;
-            elemStore[`${prefix}xSpace`] = null;
-            elemStore[`${prefix}repair`] = null;
-        });
-        return renderVN;
-    }
+              });
+            })),
+            /**
+             * 头部
+             */
+            h("thead", {
+              ref: refHeaderTHead
+            }, renderHeads(isGroup, isOptimizeMode, renderHeaderList, renderColumnList))
+          ]),
+          hasEnableConf(mouseConfig, mouseOpts) && mouseOpts.area ? h("div", {
+            class: "vxe-table--cell-area",
+            xid: xID
+          }, [
+            h("span", {
+              class: "vxe-table--cell-main-area"
+            }),
+            h("span", {
+              class: "vxe-table--cell-clip-area"
+            }),
+            h("span", {
+              class: "vxe-table--cell-extend-area"
+            }),
+            h("span", {
+              class: "vxe-table--cell-multi-area"
+            }),
+            h("span", {
+              class: "vxe-table--cell-active-area"
+            }),
+            h("span", {
+              class: "vxe-table--cell-col-status-area"
+            })
+          ]) : renderEmptyElement($xeTable)
+        ])
+      ]);
+    };
+    watch(() => props.tableColumn, uploadColumn);
+    onMounted(() => {
+      nextTick(() => {
+        const { fixedType } = props;
+        const { internalData } = $xeTable;
+        const { elemStore } = internalData;
+        const prefix = `${fixedType || "main"}-header-`;
+        elemStore[`${prefix}wrapper`] = refElem;
+        elemStore[`${prefix}scroll`] = refHeaderScroll;
+        elemStore[`${prefix}table`] = refHeaderTable;
+        elemStore[`${prefix}colgroup`] = refHeaderColgroup;
+        elemStore[`${prefix}list`] = refHeaderTHead;
+        elemStore[`${prefix}xSpace`] = refHeaderXSpace;
+        elemStore[`${prefix}repair`] = refHeaderBorderRepair;
+        uploadColumn();
+      });
+    });
+    onUnmounted(() => {
+      const { fixedType } = props;
+      const { internalData } = $xeTable;
+      const { elemStore } = internalData;
+      const prefix = `${fixedType || "main"}-header-`;
+      elemStore[`${prefix}wrapper`] = null;
+      elemStore[`${prefix}scroll`] = null;
+      elemStore[`${prefix}table`] = null;
+      elemStore[`${prefix}colgroup`] = null;
+      elemStore[`${prefix}list`] = null;
+      elemStore[`${prefix}xSpace`] = null;
+      elemStore[`${prefix}repair`] = null;
+    });
+    return renderVN;
+  }
 });
+export {
+  header_default as default
+};