vxe-table 4.8.16 → 4.9.0

package/es/table/src/footer.js

@@ -1,4 +1,4 @@
-import { createCommentVNode, defineComponent, h, ref, inject, nextTick, onMounted, onUnmounted } from 'vue';
+import { createCommentVNode, defineComponent, TransitionGroup, h, ref, inject, nextTick, onMounted, onUnmounted } from 'vue';
 import XEUtils from 'xe-utils';
 import { VxeUI } from '../../ui';
 import { updateCellTitle, getPropClass, setScrollLeft } from '../../ui/src/dom';
@@ -76,35 +76,163 @@ export default defineComponent({
                 });
             }
         };
-        onMounted(() => {
-            nextTick(() => {
-                const { fixedType } = props;
-                const { elemStore } = tableInternalData;
-                const prefix = `${fixedType || 'main'}-footer-`;
-                elemStore[`${prefix}wrapper`] = refElem;
-                elemStore[`${prefix}table`] = refFooterTable;
-                elemStore[`${prefix}colgroup`] = refFooterColgroup;
-                elemStore[`${prefix}list`] = refFooterTFoot;
-                elemStore[`${prefix}xSpace`] = refFooterXSpace;
-            });
-        });
-        onUnmounted(() => {
+        const renderRows = (tableColumn, footerTableData, row, $rowIndex, _rowIndex) => {
             const { fixedType } = props;
-            const { elemStore } = tableInternalData;
-            const prefix = `${fixedType || 'main'}-footer-`;
-            elemStore[`${prefix}wrapper`] = null;
-            elemStore[`${prefix}table`] = null;
-            elemStore[`${prefix}colgroup`] = null;
-            elemStore[`${prefix}list`] = null;
-            elemStore[`${prefix}xSpace`] = null;
-        });
-        const renderVN = () => {
-            let { fixedType, fixedColumn, tableColumn, footerTableData } = props;
-            const { footerRowClassName, footerCellClassName, footerRowStyle, footerCellStyle, footerAlign: allFooterAlign, footerSpanMethod, align: allAlign, columnKey, showFooterOverflow: allColumnFooterOverflow } = tableProps;
-            const { visibleColumn } = tableInternalData;
+            const { footerCellClassName, footerCellStyle, footerAlign: allFooterAlign, footerSpanMethod, align: allAlign, columnKey, showFooterOverflow: allColumnFooterOverflow } = tableProps;
             const { scrollXLoad, overflowX, scrollbarWidth, currentColumn, mergeFooterList } = tableReactData;
             const tooltipOpts = computeTooltipOpts.value;
             const columnOpts = computeColumnOpts.value;
+            return tableColumn.map((column, $columnIndex) => {
+                const { type, showFooterOverflow, footerAlign, align, footerClassName, editRender, cellRender } = column;
+                const renderOpts = editRender || cellRender;
+                const compConf = renderOpts ? renderer.get(renderOpts.name) : null;
+                const showAllTip = tooltipOpts.showAll;
+                const isColGroup = column.children && column.children.length;
+                const fixedHiddenColumn = fixedType ? column.fixed !== fixedType && !isColGroup : column.fixed && overflowX;
+                const footOverflow = XEUtils.eqNull(showFooterOverflow) ? allColumnFooterOverflow : showFooterOverflow;
+                const footAlign = footerAlign || (compConf ? compConf.tableFooterCellAlign : '') || allFooterAlign || align || (compConf ? compConf.tableCellAlign : '') || allAlign;
+                let showEllipsis = footOverflow === 'ellipsis';
+                const showTitle = footOverflow === 'title';
+                const showTooltip = footOverflow === true || footOverflow === 'tooltip';
+                let hasEllipsis = showTitle || showTooltip || showEllipsis;
+                const attrs = { colid: column.id };
+                const tfOns = {};
+                const columnIndex = $xeTable.getColumnIndex(column);
+                const _columnIndex = $xeTable.getVTColumnIndex(column);
+                const itemIndex = _columnIndex;
+                const cellParams = {
+                    $table: $xeTable,
+                    $grid: $xeTable.xegrid,
+                    row,
+                    rowIndex: _rowIndex,
+                    _rowIndex,
+                    $rowIndex,
+                    column,
+                    columnIndex,
+                    $columnIndex,
+                    _columnIndex,
+                    itemIndex,
+                    items: row,
+                    fixed: fixedType,
+                    type: renderType,
+                    data: footerTableData
+                };
+                // 纵向虚拟滚动不支持动态行高
+                if (scrollXLoad && !hasEllipsis) {
+                    showEllipsis = hasEllipsis = true;
+                }
+                if (showTitle || showTooltip || showAllTip) {
+                    tfOns.onMouseenter = (evnt) => {
+                        if (showTitle) {
+                            updateCellTitle(evnt.currentTarget, column);
+                        }
+                        else if (showTooltip || showAllTip) {
+                            $xeTable.triggerFooterTooltipEvent(evnt, cellParams);
+                        }
+                    };
+                }
+                if (showTooltip || showAllTip) {
+                    tfOns.onMouseleave = (evnt) => {
+                        if (showTooltip || showAllTip) {
+                            $xeTable.handleTargetLeaveEvent(evnt);
+                        }
+                    };
+                }
+                tfOns.onClick = (evnt) => {
+                    $xeTable.dispatchEvent('footer-cell-click', Object.assign({ cell: evnt.currentTarget }, cellParams), evnt);
+                };
+                tfOns.onDblclick = (evnt) => {
+                    $xeTable.dispatchEvent('footer-cell-dblclick', Object.assign({ cell: evnt.currentTarget }, cellParams), evnt);
+                };
+                // 合并行或列
+                if (mergeFooterList.length) {
+                    const spanRest = mergeFooterMethod(mergeFooterList, _rowIndex, _columnIndex);
+                    if (spanRest) {
+                        const { rowspan, colspan } = spanRest;
+                        if (!rowspan || !colspan) {
+                            return null;
+                        }
+                        if (rowspan > 1) {
+                            attrs.rowspan = rowspan;
+                        }
+                        if (colspan > 1) {
+                            attrs.colspan = colspan;
+                        }
+                    }
+                }
+                else if (footerSpanMethod) {
+                    // 自定义合并方法
+                    const { rowspan = 1, colspan = 1 } = footerSpanMethod(cellParams) || {};
+                    if (!rowspan || !colspan) {
+                        return null;
+                    }
+                    if (rowspan > 1) {
+                        attrs.rowspan = rowspan;
+                    }
+                    if (colspan > 1) {
+                        attrs.colspan = colspan;
+                    }
+                }
+                return h('td', Object.assign(Object.assign(Object.assign(Object.assign({ class: ['vxe-footer--column', column.id, {
+                            [`col--${footAlign}`]: footAlign,
+                            [`col--${type}`]: type,
+                            'col--last': $columnIndex === tableColumn.length - 1,
+                            'fixed--hidden': fixedHiddenColumn,
+                            'col--ellipsis': hasEllipsis,
+                            'col--current': currentColumn === column
+                        }, getPropClass(footerClassName, cellParams), getPropClass(footerCellClassName, cellParams)] }, attrs), { style: footerCellStyle ? (XEUtils.isFunction(footerCellStyle) ? footerCellStyle(cellParams) : footerCellStyle) : null }), tfOns), { key: columnKey || columnOpts.useKey || columnOpts.drag ? column.id : $columnIndex }), [
+                    h('div', {
+                        class: ['vxe-cell', {
+                                'c--title': showTitle,
+                                'c--tooltip': showTooltip,
+                                'c--ellipsis': showEllipsis
+                            }]
+                    }, column.renderFooter(cellParams))
+                ]);
+            }).concat(scrollbarWidth
+                ? [
+                    h('td', {
+                        key: `gr${$rowIndex}`,
+                        class: 'vxe-footer--gutter col--gutter'
+                    })
+                ]
+                : []);
+        };
+        const renderHeads = (footerTableData) => {
+            const { fixedType, tableColumn } = props;
+            const { footerRowClassName, footerRowStyle } = tableProps;
+            const { isDragColMove } = tableReactData;
+            const columnOpts = computeColumnOpts.value;
+            return footerTableData.map((row, $rowIndex) => {
+                const _rowIndex = $rowIndex;
+                const rowParams = { $table: $xeTable, row, _rowIndex, $rowIndex, fixed: fixedType, type: renderType };
+                if (columnOpts.drag) {
+                    return h(TransitionGroup, {
+                        name: `vxe-header--col-list${isDragColMove ? '' : '-disabled'}`,
+                        tag: 'tr',
+                        class: [
+                            'vxe-footer--row',
+                            footerRowClassName ? XEUtils.isFunction(footerRowClassName) ? footerRowClassName(rowParams) : footerRowClassName : ''
+                        ],
+                        style: footerRowStyle ? (XEUtils.isFunction(footerRowStyle) ? footerRowStyle(rowParams) : footerRowStyle) : null
+                    }, {
+                        default: () => renderRows(tableColumn, footerTableData, row, $rowIndex, _rowIndex)
+                    });
+                }
+                return h('tr', {
+                    class: [
+                        'vxe-footer--row',
+                        footerRowClassName ? XEUtils.isFunction(footerRowClassName) ? footerRowClassName(rowParams) : footerRowClassName : ''
+                    ],
+                    style: footerRowStyle ? (XEUtils.isFunction(footerRowStyle) ? footerRowStyle(rowParams) : footerRowStyle) : null
+                }, renderRows(tableColumn, footerTableData, row, $rowIndex, _rowIndex));
+            });
+        };
+        const renderVN = () => {
+            let { fixedType, fixedColumn, tableColumn, footerTableData } = props;
+            const { footerSpanMethod, showFooterOverflow: allColumnFooterOverflow } = tableProps;
+            const { visibleColumn } = tableInternalData;
+            const { scrollXLoad, scrollbarWidth, mergeFooterList } = tableReactData;
             // 如果是使用优化模式
             if (fixedType) {
                 // 如果存在展开行使用全量渲染
@@ -162,130 +290,32 @@ export default defineComponent({
                      */
                     h('tfoot', {
                         ref: refFooterTFoot
-                    }, footerTableData.map((list, _rowIndex) => {
-                        const $rowIndex = _rowIndex;
-                        const rowParams = { $table: $xeTable, row: list, _rowIndex, $rowIndex, fixed: fixedType, type: renderType };
-                        return h('tr', {
-                            class: ['vxe-footer--row', footerRowClassName ? XEUtils.isFunction(footerRowClassName) ? footerRowClassName(rowParams) : footerRowClassName : ''],
-                            style: footerRowStyle ? (XEUtils.isFunction(footerRowStyle) ? footerRowStyle(rowParams) : footerRowStyle) : null
-                        }, tableColumn.map((column, $columnIndex) => {
-                            const { type, showFooterOverflow, footerAlign, align, footerClassName, editRender, cellRender } = column;
-                            const renderOpts = editRender || cellRender;
-                            const compConf = renderOpts ? renderer.get(renderOpts.name) : null;
-                            const showAllTip = tooltipOpts.showAll;
-                            const isColGroup = column.children && column.children.length;
-                            const fixedHiddenColumn = fixedType ? column.fixed !== fixedType && !isColGroup : column.fixed && overflowX;
-                            const footOverflow = XEUtils.eqNull(showFooterOverflow) ? allColumnFooterOverflow : showFooterOverflow;
-                            const footAlign = footerAlign || (compConf ? compConf.tableFooterCellAlign : '') || allFooterAlign || align || (compConf ? compConf.tableCellAlign : '') || allAlign;
-                            let showEllipsis = footOverflow === 'ellipsis';
-                            const showTitle = footOverflow === 'title';
-                            const showTooltip = footOverflow === true || footOverflow === 'tooltip';
-                            let hasEllipsis = showTitle || showTooltip || showEllipsis;
-                            const attrs = { colid: column.id };
-                            const tfOns = {};
-                            const columnIndex = $xeTable.getColumnIndex(column);
-                            const _columnIndex = $xeTable.getVTColumnIndex(column);
-                            const itemIndex = _columnIndex;
-                            const cellParams = {
-                                $table: $xeTable,
-                                $grid: $xeTable.xegrid,
-                                row: list,
-                                rowIndex: _rowIndex,
-                                _rowIndex,
-                                $rowIndex,
-                                column,
-                                columnIndex,
-                                $columnIndex,
-                                _columnIndex,
-                                itemIndex,
-                                items: list,
-                                fixed: fixedType,
-                                type: renderType,
-                                data: footerTableData
-                            };
-                            // 纵向虚拟滚动不支持动态行高
-                            if (scrollXLoad && !hasEllipsis) {
-                                showEllipsis = hasEllipsis = true;
-                            }
-                            if (showTitle || showTooltip || showAllTip) {
-                                tfOns.onMouseenter = (evnt) => {
-                                    if (showTitle) {
-                                        updateCellTitle(evnt.currentTarget, column);
-                                    }
-                                    else if (showTooltip || showAllTip) {
-                                        $xeTable.triggerFooterTooltipEvent(evnt, cellParams);
-                                    }
-                                };
-                            }
-                            if (showTooltip || showAllTip) {
-                                tfOns.onMouseleave = (evnt) => {
-                                    if (showTooltip || showAllTip) {
-                                        $xeTable.handleTargetLeaveEvent(evnt);
-                                    }
-                                };
-                            }
-                            tfOns.onClick = (evnt) => {
-                                $xeTable.dispatchEvent('footer-cell-click', Object.assign({ cell: evnt.currentTarget }, cellParams), evnt);
-                            };
-                            tfOns.onDblclick = (evnt) => {
-                                $xeTable.dispatchEvent('footer-cell-dblclick', Object.assign({ cell: evnt.currentTarget }, cellParams), evnt);
-                            };
-                            // 合并行或列
-                            if (mergeFooterList.length) {
-                                const spanRest = mergeFooterMethod(mergeFooterList, _rowIndex, _columnIndex);
-                                if (spanRest) {
-                                    const { rowspan, colspan } = spanRest;
-                                    if (!rowspan || !colspan) {
-                                        return null;
-                                    }
-                                    if (rowspan > 1) {
-                                        attrs.rowspan = rowspan;
-                                    }
-                                    if (colspan > 1) {
-                                        attrs.colspan = colspan;
-                                    }
-                                }
-                            }
-                            else if (footerSpanMethod) {
-                                // 自定义合并方法
-                                const { rowspan = 1, colspan = 1 } = footerSpanMethod(cellParams) || {};
-                                if (!rowspan || !colspan) {
-                                    return null;
-                                }
-                                if (rowspan > 1) {
-                                    attrs.rowspan = rowspan;
-                                }
-                                if (colspan > 1) {
-                                    attrs.colspan = colspan;
-                                }
-                            }
-                            return h('td', Object.assign(Object.assign(Object.assign(Object.assign({ class: ['vxe-footer--column', column.id, {
-                                        [`col--${footAlign}`]: footAlign,
-                                        [`col--${type}`]: type,
-                                        'col--last': $columnIndex === tableColumn.length - 1,
-                                        'fixed--hidden': fixedHiddenColumn,
-                                        'col--ellipsis': hasEllipsis,
-                                        'col--current': currentColumn === column
-                                    }, getPropClass(footerClassName, cellParams), getPropClass(footerCellClassName, cellParams)] }, attrs), { style: footerCellStyle ? (XEUtils.isFunction(footerCellStyle) ? footerCellStyle(cellParams) : footerCellStyle) : null }), tfOns), { key: columnKey || columnOpts.useKey ? column.id : $columnIndex }), [
-                                h('div', {
-                                    class: ['vxe-cell', {
-                                            'c--title': showTitle,
-                                            'c--tooltip': showTooltip,
-                                            'c--ellipsis': showEllipsis
-                                        }]
-                                }, column.renderFooter(cellParams))
-                            ]);
-                        }).concat(scrollbarWidth
-                            ? [
-                                h('td', {
-                                    class: 'vxe-footer--gutter col--gutter'
-                                })
-                            ]
-                            : []));
-                    }))
+                    }, renderHeads(footerTableData))
                 ])
             ]);
         };
+        onMounted(() => {
+            nextTick(() => {
+                const { fixedType } = props;
+                const { elemStore } = tableInternalData;
+                const prefix = `${fixedType || 'main'}-footer-`;
+                elemStore[`${prefix}wrapper`] = refElem;
+                elemStore[`${prefix}table`] = refFooterTable;
+                elemStore[`${prefix}colgroup`] = refFooterColgroup;
+                elemStore[`${prefix}list`] = refFooterTFoot;
+                elemStore[`${prefix}xSpace`] = refFooterXSpace;
+            });
+        });
+        onUnmounted(() => {
+            const { fixedType } = props;
+            const { elemStore } = tableInternalData;
+            const prefix = `${fixedType || 'main'}-footer-`;
+            elemStore[`${prefix}wrapper`] = null;
+            elemStore[`${prefix}table`] = null;
+            elemStore[`${prefix}colgroup`] = null;
+            elemStore[`${prefix}list`] = null;
+            elemStore[`${prefix}xSpace`] = null;
+        });
         return renderVN;
     }
 });

package/es/table/src/header.js

@@ -1,4 +1,4 @@
-import { createCommentVNode, defineComponent, h, ref, inject, nextTick, watch, onMounted, onUnmounted } from 'vue';
+import { createCommentVNode, defineComponent, TransitionGroup, h, ref, inject, nextTick, watch, onMounted, onUnmounted } from 'vue';
 import XEUtils from 'xe-utils';
 import { VxeUI } from '../../ui';
 import { convertHeaderColumnToRows, getColReMinWidth } from './util';
@@ -124,40 +124,124 @@ export default defineComponent({
                 $xeTable.closeMenu();
             }
         };
-        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}table`] = refHeaderTable;
-                elemStore[`${prefix}colgroup`] = refHeaderColgroup;
-                elemStore[`${prefix}list`] = refHeaderTHead;
-                elemStore[`${prefix}xSpace`] = refHeaderXSpace;
-                elemStore[`${prefix}repair`] = refHeaderBorderRepair;
-                uploadColumn();
-            });
-        });
-        onUnmounted(() => {
+        const renderRows = (cols, $rowIndex) => {
             const { fixedType } = props;
-            const { internalData } = $xeTable;
-            const { elemStore } = internalData;
-            const prefix = `${fixedType || 'main'}-header-`;
-            elemStore[`${prefix}wrapper`] = null;
-            elemStore[`${prefix}table`] = null;
-            elemStore[`${prefix}colgroup`] = null;
-            elemStore[`${prefix}list`] = null;
-            elemStore[`${prefix}xSpace`] = null;
-            elemStore[`${prefix}repair`] = null;
-        });
+            const { resizable: allResizable, border, columnKey, headerCellClassName, headerCellStyle, showHeaderOverflow: allColumnHeaderOverflow, headerAlign: allHeaderAlign, align: allAlign, mouseConfig } = tableProps;
+            const { currentColumn, scrollXLoad, overflowX, scrollbarWidth } = tableReactData;
+            const columnOpts = computeColumnOpts.value;
+            return cols.map((column, $columnIndex) => {
+                const { type, showHeaderOverflow, headerAlign, align, headerClassName, editRender, cellRender } = column;
+                const colid = column.id;
+                const renderOpts = editRender || cellRender;
+                const compConf = renderOpts ? renderer.get(renderOpts.name) : null;
+                const isColGroup = column.children && column.children.length;
+                const fixedHiddenColumn = fixedType ? (column.fixed !== fixedType && !isColGroup) : !!column.fixed && overflowX;
+                const headOverflow = XEUtils.eqNull(showHeaderOverflow) ? allColumnHeaderOverflow : showHeaderOverflow;
+                const headAlign = headerAlign || (compConf ? compConf.tableHeaderCellAlign : '') || allHeaderAlign || align || (compConf ? compConf.tableCellAlign : '') || allAlign;
+                let showEllipsis = headOverflow === 'ellipsis';
+                const showTitle = headOverflow === 'title';
+                const showTooltip = headOverflow === true || headOverflow === 'tooltip';
+                let hasEllipsis = showTitle || showTooltip || showEllipsis;
+                const hasFilter = column.filters && column.filters.some((item) => item.checked);
+                const columnIndex = $xeTable.getColumnIndex(column);
+                const _columnIndex = $xeTable.getVTColumnIndex(column);
+                const params = { $table: $xeTable, $grid: $xeTable.xegrid, $rowIndex, column, columnIndex, $columnIndex, _columnIndex, fixed: fixedType, type: renderType, isHidden: fixedHiddenColumn, hasFilter };
+                const thOns = {
+                    onClick: (evnt) => $xeTable.triggerHeaderCellClickEvent(evnt, params),
+                    onDblclick: (evnt) => $xeTable.triggerHeaderCellDblclickEvent(evnt, params)
+                };
+                // 横向虚拟滚动不支持动态行高
+                if (scrollXLoad && !hasEllipsis) {
+                    showEllipsis = hasEllipsis = true;
+                }
+                // 按下事件处理
+                if (mouseConfig) {
+                    thOns.onMousedown = (evnt) => $xeTable.triggerHeaderCellMousedownEvent(evnt, params);
+                }
+                // 拖拽行事件
+                if (columnOpts.drag && !column.parentId) {
+                    thOns.onDragstart = $xeTable.handleHeaderCellDragDragstartEvent;
+                    thOns.onDragend = $xeTable.handleHeaderCellDragDragendEvent;
+                    thOns.onDragover = $xeTable.handleHeaderCellDragDragoverEvent;
+                }
+                return h('th', Object.assign(Object.assign({ class: ['vxe-header--column', colid, {
+                            [`col--${headAlign}`]: headAlign,
+                            [`col--${type}`]: type,
+                            'col--last': $columnIndex === cols.length - 1,
+                            'col--fixed': column.fixed,
+                            'col--group': isColGroup,
+                            'col--ellipsis': hasEllipsis,
+                            'fixed--hidden': fixedHiddenColumn,
+                            'is--sortable': column.sortable,
+                            'col--filter': !!column.filters,
+                            'is--filter-active': hasFilter,
+                            'col--current': currentColumn === column
+                        },
+                        headerClassName ? (XEUtils.isFunction(headerClassName) ? headerClassName(params) : headerClassName) : '',
+                        headerCellClassName ? (XEUtils.isFunction(headerCellClassName) ? headerCellClassName(params) : headerCellClassName) : ''
+                    ], colid, colspan: column.colSpan > 1 ? column.colSpan : null, rowspan: column.rowSpan > 1 ? column.rowSpan : null, style: headerCellStyle ? (XEUtils.isFunction(headerCellStyle) ? headerCellStyle(params) : headerCellStyle) : null }, thOns), { key: columnKey || columnOpts.useKey || columnOpts.drag || isColGroup ? colid : $columnIndex }), [
+                    h('div', {
+                        class: ['vxe-cell', {
+                                'c--title': showTitle,
+                                'c--tooltip': showTooltip,
+                                'c--ellipsis': showEllipsis
+                            }]
+                    }, column.renderHeader(params)),
+                    /**
+                     * 列宽拖动
+                     */
+                    !fixedHiddenColumn && !isColGroup && (XEUtils.isBoolean(column.resizable) ? column.resizable : (columnOpts.resizable || allResizable))
+                        ? h('div', {
+                            class: ['vxe-resizable', {
+                                    'is--line': !border || border === 'none'
+                                }],
+                            onMousedown: (evnt) => resizeMousedown(evnt, params)
+                        })
+                        : null
+                ]);
+            }).concat(scrollbarWidth
+                ? [
+                    h('th', {
+                        key: `gr${$rowIndex}`,
+                        class: 'vxe-header--gutter col--gutter'
+                    })
+                ]
+                : []);
+        };
+        const renderHeads = (headerGroups) => {
+            const { fixedType } = props;
+            const { headerRowClassName, headerRowStyle } = tableProps;
+            const { isDragColMove } = tableReactData;
+            const columnOpts = computeColumnOpts.value;
+            return headerGroups.map((cols, $rowIndex) => {
+                const params = { $table: $xeTable, $rowIndex, fixed: fixedType, type: renderType };
+                if (columnOpts.drag) {
+                    return h(TransitionGroup, {
+                        name: `vxe-header--col-list${isDragColMove ? '' : '-disabled'}`,
+                        tag: 'tr',
+                        class: [
+                            'vxe-header--row',
+                            headerRowClassName ? (XEUtils.isFunction(headerRowClassName) ? headerRowClassName(params) : headerRowClassName) : ''
+                        ],
+                        style: headerRowStyle ? (XEUtils.isFunction(headerRowStyle) ? headerRowStyle(params) : headerRowStyle) : null
+                    }, {
+                        default: () => renderRows(cols, $rowIndex)
+                    });
+                }
+                return h('tr', {
+                    class: [
+                        'vxe-header--row',
+                        headerRowClassName ? (XEUtils.isFunction(headerRowClassName) ? headerRowClassName(params) : headerRowClassName) : ''
+                    ],
+                    style: headerRowStyle ? (XEUtils.isFunction(headerRowStyle) ? headerRowStyle(params) : headerRowStyle) : null
+                }, renderRows(cols, $rowIndex));
+            });
+        };
         const renderVN = () => {
             const { fixedType, fixedColumn, tableColumn } = props;
-            const { resizable: allResizable, border, columnKey, headerRowClassName, headerCellClassName, headerRowStyle, headerCellStyle, showHeaderOverflow: allColumnHeaderOverflow, headerAlign: allHeaderAlign, align: allAlign, mouseConfig } = tableProps;
-            const { isGroup, currentColumn, scrollXLoad, overflowX, scrollbarWidth } = tableReactData;
+            const { showHeaderOverflow: allColumnHeaderOverflow } = tableProps;
+            const { isGroup, scrollXLoad, scrollbarWidth } = tableReactData;
             const { visibleColumn } = tableInternalData;
-            const columnOpts = computeColumnOpts.value;
             let headerGroups = headerColumn.value;
             let renderColumnList = tableColumn;
             if (isGroup) {
@@ -213,82 +297,7 @@ export default defineComponent({
                      */
                     h('thead', {
                         ref: refHeaderTHead
-                    }, headerGroups.map((cols, $rowIndex) => {
-                        return h('tr', {
-                            class: ['vxe-header--row', headerRowClassName ? (XEUtils.isFunction(headerRowClassName) ? headerRowClassName({ $table: $xeTable, $rowIndex, fixed: fixedType, type: renderType }) : headerRowClassName) : ''],
-                            style: headerRowStyle ? (XEUtils.isFunction(headerRowStyle) ? headerRowStyle({ $table: $xeTable, $rowIndex, fixed: fixedType, type: renderType }) : headerRowStyle) : null
-                        }, cols.map((column, $columnIndex) => {
-                            const { type, showHeaderOverflow, headerAlign, align, headerClassName, editRender, cellRender } = column;
-                            const colid = column.id;
-                            const renderOpts = editRender || cellRender;
-                            const compConf = renderOpts ? renderer.get(renderOpts.name) : null;
-                            const isColGroup = column.children && column.children.length;
-                            const fixedHiddenColumn = fixedType ? (column.fixed !== fixedType && !isColGroup) : !!column.fixed && overflowX;
-                            const headOverflow = XEUtils.eqNull(showHeaderOverflow) ? allColumnHeaderOverflow : showHeaderOverflow;
-                            const headAlign = headerAlign || (compConf ? compConf.tableHeaderCellAlign : '') || allHeaderAlign || align || (compConf ? compConf.tableCellAlign : '') || allAlign;
-                            let showEllipsis = headOverflow === 'ellipsis';
-                            const showTitle = headOverflow === 'title';
-                            const showTooltip = headOverflow === true || headOverflow === 'tooltip';
-                            let hasEllipsis = showTitle || showTooltip || showEllipsis;
-                            const hasFilter = column.filters && column.filters.some((item) => item.checked);
-                            const columnIndex = $xeTable.getColumnIndex(column);
-                            const _columnIndex = $xeTable.getVTColumnIndex(column);
-                            const params = { $table: $xeTable, $grid: $xeTable.xegrid, $rowIndex, column, columnIndex, $columnIndex, _columnIndex, fixed: fixedType, type: renderType, isHidden: fixedHiddenColumn, hasFilter };
-                            const thOns = {
-                                onClick: (evnt) => $xeTable.triggerHeaderCellClickEvent(evnt, params),
-                                onDblclick: (evnt) => $xeTable.triggerHeaderCellDblclickEvent(evnt, params)
-                            };
-                            // 横向虚拟滚动不支持动态行高
-                            if (scrollXLoad && !hasEllipsis) {
-                                showEllipsis = hasEllipsis = true;
-                            }
-                            // 按下事件处理
-                            if (mouseConfig) {
-                                thOns.onMousedown = (evnt) => $xeTable.triggerHeaderCellMousedownEvent(evnt, params);
-                            }
-                            return h('th', Object.assign(Object.assign({ class: ['vxe-header--column', colid, {
-                                        [`col--${headAlign}`]: headAlign,
-                                        [`col--${type}`]: type,
-                                        'col--last': $columnIndex === cols.length - 1,
-                                        'col--fixed': column.fixed,
-                                        'col--group': isColGroup,
-                                        'col--ellipsis': hasEllipsis,
-                                        'fixed--hidden': fixedHiddenColumn,
-                                        'is--sortable': column.sortable,
-                                        'col--filter': !!column.filters,
-                                        'is--filter-active': hasFilter,
-                                        'col--current': currentColumn === column
-                                    },
-                                    headerClassName ? (XEUtils.isFunction(headerClassName) ? headerClassName(params) : headerClassName) : '',
-                                    headerCellClassName ? (XEUtils.isFunction(headerCellClassName) ? headerCellClassName(params) : headerCellClassName) : ''
-                                ], colid, colspan: column.colSpan > 1 ? column.colSpan : null, rowspan: column.rowSpan > 1 ? column.rowSpan : null, style: headerCellStyle ? (XEUtils.isFunction(headerCellStyle) ? headerCellStyle(params) : headerCellStyle) : null }, thOns), { key: columnKey || columnOpts.useKey || isColGroup ? colid : $columnIndex }), [
-                                h('div', {
-                                    class: ['vxe-cell', {
-                                            'c--title': showTitle,
-                                            'c--tooltip': showTooltip,
-                                            'c--ellipsis': showEllipsis
-                                        }]
-                                }, column.renderHeader(params)),
-                                /**
-                                 * 列宽拖动
-                                 */
-                                !fixedHiddenColumn && !isColGroup && (XEUtils.isBoolean(column.resizable) ? column.resizable : (columnOpts.resizable || allResizable))
-                                    ? h('div', {
-                                        class: ['vxe-resizable', {
-                                                'is--line': !border || border === 'none'
-                                            }],
-                                        onMousedown: (evnt) => resizeMousedown(evnt, params)
-                                    })
-                                    : null
-                            ]);
-                        }).concat(scrollbarWidth
-                            ? [
-                                h('th', {
-                                    class: 'vxe-header--gutter col--gutter'
-                                })
-                            ]
-                            : []));
-                    }))
+                    }, renderHeads(headerGroups))
                 ]),
                 /**
                  * 其他
@@ -299,6 +308,34 @@ export default defineComponent({
                 })
             ]);
         };
+        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}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}table`] = null;
+            elemStore[`${prefix}colgroup`] = null;
+            elemStore[`${prefix}list`] = null;
+            elemStore[`${prefix}xSpace`] = null;
+            elemStore[`${prefix}repair`] = null;
+        });
         return renderVN;
     }
 });

package/es/table/src/props.js

@@ -180,8 +180,12 @@ export default {
     cellConfig: Object,
     // 行配置信息
     rowConfig: Object,
-    // 可拖拽配置项
+    // 已废弃，被 rowDragConfig 替换
     dragConfig: Object,
+    // 行拖拽排序配置项
+    rowDragConfig: Object,
+    // 列拖拽排序配置项
+    columnDragConfig: Object,
     // 列调整配置项
     resizableConfig: Object,
     // 序号配置项