vxe-table 3.10.15 → 3.11.0

package/es/table/src/footer.js

@@ -17,6 +17,163 @@ function mergeFooterMethod(mergeFooterList, _rowIndex, _columnIndex) {
         }
     }
 }
+function renderRows(h, _vm, tableColumn, footerTableData, row, $rowIndex, _rowIndex) {
+    const { $parent: $xetable, fixedType } = _vm;
+    const { $listeners: tableListeners, footerCellClassName, footerCellStyle, footerAlign: allFooterAlign, mergeFooterList, footerSpanMethod, align: allAlign, scrollXLoad, columnKey, columnOpts, showFooterOverflow: allColumnFooterOverflow, currentColumn, overflowX, scrollbarWidth, tooltipOpts } = $xetable;
+    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 || tooltipOpts.enabled;
+        const isColGroup = column.children && column.children.length;
+        const fixedHiddenColumn = fixedType ? column.fixed !== fixedType && !isColGroup : column.fixed && overflowX;
+        const footOverflow = XEUtils.isUndefined(showFooterOverflow) || XEUtils.isNull(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,
+            column,
+            columnIndex,
+            $columnIndex,
+            _columnIndex,
+            itemIndex,
+            items: row,
+            fixed: fixedType,
+            type: renderType,
+            data: footerTableData
+        };
+        // 虚拟滚动不支持动态高度
+        if (scrollXLoad && !hasEllipsis) {
+            showEllipsis = hasEllipsis = true;
+        }
+        if (showTitle || showTooltip || showAllTip) {
+            tfOns.mouseenter = (evnt) => {
+                if (showTitle) {
+                    updateCellTitle(evnt.currentTarget, column);
+                }
+                else if (showTooltip || showAllTip) {
+                    $xetable.triggerFooterTooltipEvent(evnt, cellParams);
+                }
+            };
+        }
+        if (showTooltip || showAllTip) {
+            tfOns.mouseleave = (evnt) => {
+                if (showTooltip || showAllTip) {
+                    $xetable.handleTargetLeaveEvent(evnt);
+                }
+            };
+        }
+        if (tableListeners['footer-cell-click']) {
+            tfOns.click = (evnt) => {
+                $xetable.emitEvent('footer-cell-click', Object.assign({ cell: evnt.currentTarget }, cellParams), evnt);
+            };
+        }
+        if (tableListeners['footer-cell-dblclick']) {
+            tfOns.dblclick = (evnt) => {
+                $xetable.emitEvent('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', {
+            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
+                }, getClass(footerClassName, cellParams), getClass(footerCellClassName, cellParams)],
+            attrs,
+            style: footerCellStyle ? (XEUtils.isFunction(footerCellStyle) ? footerCellStyle(cellParams) : footerCellStyle) : null,
+            on: 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(h, cellParams))
+        ]);
+    }).concat(scrollbarWidth
+        ? [
+            h('td', {
+                key: `gr${$rowIndex}`,
+                class: 'vxe-footer--gutter col--gutter'
+            })
+        ]
+        : []);
+}
+function renderHeads(h, _vm, footerTableData) {
+    const { $parent: $xetable, fixedType, tableColumn } = _vm;
+    const { footerRowClassName, footerRowStyle, isDragColMove } = $xetable;
+    const columnOpts = $xetable.columnOpts;
+    return footerTableData.map((row, $rowIndex) => {
+        const _rowIndex = $rowIndex;
+        const rowParams = { $table: $xetable, row, _rowIndex, $rowIndex, fixed: fixedType, type: renderType };
+        if (columnOpts.drag) {
+            return h('transition-group', {
+                props: {
+                    tag: 'tr',
+                    name: `vxe-header--col-list${isDragColMove ? '' : '-disabled'}`,
+                    class: [
+                        'vxe-footer--row',
+                        footerRowClassName ? XEUtils.isFunction(footerRowClassName) ? footerRowClassName(rowParams) : footerRowClassName : ''
+                    ],
+                    style: footerRowStyle ? (XEUtils.isFunction(footerRowStyle) ? footerRowStyle(rowParams) : footerRowStyle) : null
+                }
+            }, renderRows(h, _vm, 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(h, _vm, tableColumn, footerTableData, row, $rowIndex, _rowIndex));
+    });
+}
 export default {
     name: 'VxeTableFooter',
     props: {
@@ -48,7 +205,7 @@ export default {
     },
     render(h) {
         let { _e, $parent: $xetable, fixedType, fixedColumn, tableColumn, footerTableData } = this;
-        const { $listeners: tableListeners, tId, footerRowClassName, footerCellClassName, footerRowStyle, footerCellStyle, footerAlign: allFooterAlign, mergeFooterList, footerSpanMethod, align: allAlign, scrollXLoad, columnKey, columnOpts, showFooterOverflow: allColumnFooterOverflow, currentColumn, overflowX, scrollbarWidth, tooltipOpts, visibleColumn, expandColumn } = $xetable;
+        const { tId, mergeFooterList, footerSpanMethod, scrollXLoad, showFooterOverflow: allColumnFooterOverflow, scrollbarWidth, visibleColumn, expandColumn } = $xetable;
         // 如果是使用优化模式
         if (fixedType) {
             // 如果存在展开行使用全量渲染
@@ -115,136 +272,7 @@ export default {
                  */
                 h('tfoot', {
                     ref: 'tfoot'
-                }, 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 || tooltipOpts.enabled;
-                        const isColGroup = column.children && column.children.length;
-                        const fixedHiddenColumn = fixedType ? column.fixed !== fixedType && !isColGroup : column.fixed && overflowX;
-                        const footOverflow = XEUtils.isUndefined(showFooterOverflow) || XEUtils.isNull(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,
-                            column,
-                            columnIndex,
-                            $columnIndex,
-                            _columnIndex,
-                            itemIndex,
-                            items: list,
-                            fixed: fixedType,
-                            type: renderType,
-                            data: footerTableData
-                        };
-                        // 虚拟滚动不支持动态高度
-                        if (scrollXLoad && !hasEllipsis) {
-                            showEllipsis = hasEllipsis = true;
-                        }
-                        if (showTitle || showTooltip || showAllTip) {
-                            tfOns.mouseenter = (evnt) => {
-                                if (showTitle) {
-                                    updateCellTitle(evnt.currentTarget, column);
-                                }
-                                else if (showTooltip || showAllTip) {
-                                    $xetable.triggerFooterTooltipEvent(evnt, cellParams);
-                                }
-                            };
-                        }
-                        if (showTooltip || showAllTip) {
-                            tfOns.mouseleave = (evnt) => {
-                                if (showTooltip || showAllTip) {
-                                    $xetable.handleTargetLeaveEvent(evnt);
-                                }
-                            };
-                        }
-                        if (tableListeners['footer-cell-click']) {
-                            tfOns.click = (evnt) => {
-                                $xetable.emitEvent('footer-cell-click', Object.assign({ cell: evnt.currentTarget }, cellParams), evnt);
-                            };
-                        }
-                        if (tableListeners['footer-cell-dblclick']) {
-                            tfOns.dblclick = (evnt) => {
-                                $xetable.emitEvent('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', {
-                            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
-                                }, getClass(footerClassName, cellParams), getClass(footerCellClassName, cellParams)],
-                            attrs,
-                            style: footerCellStyle ? (XEUtils.isFunction(footerCellStyle) ? footerCellStyle(cellParams) : footerCellStyle) : null,
-                            on: tfOns,
-                            key: columnKey || columnOpts.useKey ? column.id : $columnIndex
-                        }, [
-                            h('div', {
-                                class: ['vxe-cell', {
-                                        'c--title': showTitle,
-                                        'c--tooltip': showTooltip,
-                                        'c--ellipsis': showEllipsis
-                                    }]
-                            }, column.renderFooter(h, cellParams))
-                        ]);
-                    }).concat(scrollbarWidth
-                        ? [
-                            h('td', {
-                                class: 'vxe-footer--gutter col--gutter'
-                            })
-                        ]
-                        : []));
-                }))
+                }, renderHeads(h, this, footerTableData))
             ])
         ]);
     },

package/es/table/src/header.js

@@ -5,6 +5,132 @@ import { getOffsetPos, hasClass, addClass, removeClass } from '../../ui/src/dom'
 import { convertHeaderColumnToRows, getColReMinWidth } from './util';
 const { renderer } = VxeUI;
 const cellType = 'header';
+const renderRows = (h, _vm, cols, $rowIndex) => {
+    const { $parent: $xetable, fixedType } = _vm;
+    const { $listeners: tableListeners, resizable: allResizable, border, columnKey, headerCellClassName, headerCellStyle, showHeaderOverflow: allColumnHeaderOverflow, headerAlign: allHeaderAlign, align: allAlign, highlightCurrentColumn, currentColumn, scrollXLoad, overflowX, scrollbarWidth, sortOpts, mouseConfig, columnOpts } = $xetable;
+    return cols.map((column, $columnIndex) => {
+        const { type, showHeaderOverflow, headerAlign, align, headerClassName, editRender, cellRender } = column;
+        // const { enabled } = tooltipOpts
+        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.isUndefined(showHeaderOverflow) || XEUtils.isNull(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 thOns = {};
+        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: cellType, isHidden: fixedHiddenColumn, hasFilter };
+        // 虚拟滚动不支持动态高度
+        if (scrollXLoad && !hasEllipsis) {
+            showEllipsis = hasEllipsis = true;
+        }
+        if (columnOpts.isCurrent || highlightCurrentColumn || tableListeners['header-cell-click'] || sortOpts.trigger === 'cell') {
+            thOns.click = (evnt) => $xetable.triggerHeaderCellClickEvent(evnt, params);
+        }
+        if (tableListeners['header-cell-dblclick']) {
+            thOns.dblclick = (evnt) => $xetable.triggerHeaderCellDblclickEvent(evnt, params);
+        }
+        // 按下事件处理
+        if (mouseConfig) {
+            thOns.mousedown = (evnt) => $xetable.triggerHeaderCellMousedownEvent(evnt, params);
+        }
+        // 拖拽行事件
+        if (columnOpts.drag && !column.parentId) {
+            thOns.dragstart = $xetable.handleHeaderCellDragDragstartEvent;
+            thOns.dragend = $xetable.handleHeaderCellDragDragendEvent;
+            thOns.dragover = $xetable.handleHeaderCellDragDragoverEvent;
+        }
+        return h('th', {
+            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
+                }, getClass(headerClassName, params), getClass(headerCellClassName, params)],
+            attrs: {
+                colid,
+                colspan: column.colSpan > 1 ? column.colSpan : null,
+                rowspan: column.rowSpan > 1 ? column.rowSpan : null
+            },
+            style: headerCellStyle ? (XEUtils.isFunction(headerCellStyle) ? headerCellStyle(params) : headerCellStyle) : null,
+            on: 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(h, params)),
+            /**
+           * 列宽拖动
+           */
+            !fixedHiddenColumn && !isColGroup && (XEUtils.isBoolean(column.resizable) ? column.resizable : (columnOpts.resizable || allResizable))
+                ? h('div', {
+                    class: ['vxe-resizable', {
+                            'is--line': !border || border === 'none'
+                        }],
+                    on: {
+                        mousedown: (evnt) => _vm.resizeMousedown(evnt, params)
+                    }
+                })
+                : null
+        ]);
+    }).concat(scrollbarWidth
+        ? [
+            h('th', {
+                key: `gr${$rowIndex}`,
+                class: 'vxe-header--gutter col--gutter'
+            })
+        ]
+        : []);
+};
+function renderHeads(h, _vm, headerGroups) {
+    const { $parent: $xetable } = _vm;
+    const tableProps = $xetable;
+    const { fixedType } = _vm;
+    const { headerRowClassName, headerRowStyle } = tableProps;
+    const { isDragColMove } = $xetable;
+    const columnOpts = $xetable.columnOpts;
+    return headerGroups.map((cols, $rowIndex) => {
+        const params = { $table: $xetable, $rowIndex, fixed: fixedType, type: cellType };
+        if (columnOpts.drag) {
+            return h('transition-group', {
+                props: {
+                    tag: 'tr',
+                    name: `vxe-header--col-list${isDragColMove ? '' : '-disabled'}`,
+                    class: [
+                        'vxe-header--row',
+                        headerRowClassName ? XEUtils.isFunction(headerRowClassName) ? headerRowClassName(params) : headerRowClassName : ''
+                    ],
+                    style: headerRowStyle ? (XEUtils.isFunction(headerRowStyle) ? headerRowStyle(params) : headerRowStyle) : null
+                }
+            }, renderRows(h, _vm, 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(h, _vm, cols, $rowIndex));
+    });
+}
 export default {
     name: 'VxeTableHeader',
     props: {
@@ -52,7 +178,7 @@ export default {
     },
     render(h) {
         const { _e, $parent: $xetable, fixedType, headerColumn, tableColumn, fixedColumn } = this;
-        const { $listeners: tableListeners, tId, isGroup, visibleColumn, resizable: allResizable, border, columnKey, headerRowClassName, headerCellClassName, headerRowStyle, headerCellStyle, showHeaderOverflow: allColumnHeaderOverflow, headerAlign: allHeaderAlign, align: allAlign, highlightCurrentColumn, currentColumn, scrollXLoad, overflowX, scrollbarWidth, sortOpts, mouseConfig, columnOpts } = $xetable;
+        const { tId, isGroup, visibleColumn, showHeaderOverflow: allColumnHeaderOverflow, scrollXLoad, scrollbarWidth } = $xetable;
         let headerGroups = headerColumn;
         let renderColumnList = tableColumn;
         if (isGroup) {
@@ -115,95 +241,7 @@ export default {
                  */
                 h('thead', {
                     ref: 'thead'
-                }, headerGroups.map((cols, $rowIndex) => {
-                    return h('tr', {
-                        class: ['vxe-header--row', headerRowClassName ? XEUtils.isFunction(headerRowClassName) ? headerRowClassName({ $table: $xetable, $rowIndex, fixed: fixedType, type: cellType }) : headerRowClassName : ''],
-                        style: headerRowStyle ? (XEUtils.isFunction(headerRowStyle) ? headerRowStyle({ $table: $xetable, $rowIndex, fixed: fixedType, type: cellType }) : headerRowStyle) : null
-                    }, cols.map((column, $columnIndex) => {
-                        const { type, showHeaderOverflow, headerAlign, align, headerClassName, editRender, cellRender } = column;
-                        // const { enabled } = tooltipOpts
-                        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.isUndefined(showHeaderOverflow) || XEUtils.isNull(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 thOns = {};
-                        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: cellType, isHidden: fixedHiddenColumn, hasFilter };
-                        // 虚拟滚动不支持动态高度
-                        if (scrollXLoad && !hasEllipsis) {
-                            showEllipsis = hasEllipsis = true;
-                        }
-                        if (columnOpts.isCurrent || highlightCurrentColumn || tableListeners['header-cell-click'] || sortOpts.trigger === 'cell') {
-                            thOns.click = (evnt) => $xetable.triggerHeaderCellClickEvent(evnt, params);
-                        }
-                        if (tableListeners['header-cell-dblclick']) {
-                            thOns.dblclick = (evnt) => $xetable.triggerHeaderCellDblclickEvent(evnt, params);
-                        }
-                        // 按下事件处理
-                        if (mouseConfig) {
-                            thOns.mousedown = (evnt) => $xetable.triggerHeaderCellMousedownEvent(evnt, params);
-                        }
-                        return h('th', {
-                            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
-                                }, getClass(headerClassName, params), getClass(headerCellClassName, params)],
-                            attrs: {
-                                colid,
-                                colspan: column.colSpan > 1 ? column.colSpan : null,
-                                rowspan: column.rowSpan > 1 ? column.rowSpan : null
-                            },
-                            style: headerCellStyle ? (XEUtils.isFunction(headerCellStyle) ? headerCellStyle(params) : headerCellStyle) : null,
-                            on: thOns,
-                            key: columnKey || columnOpts.useKey || isColGroup ? colid : $columnIndex
-                        }, [
-                            h('div', {
-                                class: ['vxe-cell', {
-                                        'c--title': showTitle,
-                                        'c--tooltip': showTooltip,
-                                        'c--ellipsis': showEllipsis
-                                    }]
-                            }, column.renderHeader(h, params)),
-                            /**
-                             * 列宽拖动
-                             */
-                            !fixedHiddenColumn && !isColGroup && (XEUtils.isBoolean(column.resizable) ? column.resizable : (columnOpts.resizable || allResizable))
-                                ? h('div', {
-                                    class: ['vxe-resizable', {
-                                            'is--line': !border || border === 'none'
-                                        }],
-                                    on: {
-                                        mousedown: (evnt) => this.resizeMousedown(evnt, params)
-                                    }
-                                })
-                                : null
-                        ]);
-                    }).concat(scrollbarWidth
-                        ? [
-                            h('th', {
-                                class: 'vxe-header--gutter col--gutter'
-                            })
-                        ]
-                        : []));
-                }))
+                }, renderHeads(h, this, headerGroups))
             ]),
             /**
              * 其他