vxe-table 4.16.1 → 4.16.3

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

@@ -146,6 +146,8 @@ hooks.add('tableMenuModule', {
              * 快捷菜单事件处理
              */
             handleGlobalContextmenuEvent(evnt) {
+                const $xeGrid = $xeTable.xeGrid;
+                const $xeGantt = $xeTable.xeGantt;
                 const { mouseConfig, menuConfig } = props;
                 const { editStore, ctxMenuStore } = reactData;
                 const { visibleColumn } = internalData;
@@ -163,7 +165,7 @@ hooks.add('tableMenuModule', {
                     }
                     if (internalData._keyCtx) {
                         const type = 'body';
-                        const params = { type, $table: $xeTable, keyboard: true, columns: visibleColumn.slice(0), $event: evnt };
+                        const params = { type, $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, keyboard: true, columns: visibleColumn.slice(0), $event: evnt };
                         // 如果开启单元格区域
                         if (mouseConfig && mouseOpts.area) {
                             const activeArea = $xeTable.getActiveCellArea();
@@ -191,7 +193,7 @@ hooks.add('tableMenuModule', {
                             // target=td|th，直接向上找 table 去匹配即可
                             return target.parentNode.parentNode.parentNode.getAttribute('xid') === xID;
                         });
-                        const params = { type: layout, $table: $xeTable, columns: visibleColumn.slice(0), $event: evnt };
+                        const params = { type: layout, $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, columns: visibleColumn.slice(0), $event: evnt };
                         if (columnTargetNode.flag) {
                             const cell = columnTargetNode.targetElem;
                             const columnNodeRest = $xeTable.getColumnNode(cell);

package/es/table/src/body.js

@@ -167,15 +167,14 @@ export default defineVxeComponent({
             // hover 进入事件
             if (showTitle || showTooltip || showAllTip || tooltipConfig) {
                 tdOns.onMouseenter = (evnt) => {
-                    if (isVMScrollProcess()) {
-                        return;
-                    }
-                    if (showTitle) {
-                        updateCellTitle(evnt.currentTarget, column);
-                    }
-                    else if (showTooltip || showAllTip) {
-                        // 如果配置了显示 tooltip
-                        $xeTable.triggerBodyTooltipEvent(evnt, cellParams);
+                    if (!isVMScrollProcess()) {
+                        if (showTitle) {
+                            updateCellTitle(evnt.currentTarget, column);
+                        }
+                        else if (showTooltip || showAllTip) {
+                            // 如果配置了显示 tooltip
+                            $xeTable.triggerBodyTooltipEvent(evnt, cellParams);
+                        }
                     }
                     $xeTable.dispatchEvent('cell-mouseenter', Object.assign({ cell: evnt.currentTarget }, cellParams), evnt);
                 };
@@ -183,11 +182,10 @@ export default defineVxeComponent({
             // hover 退出事件
             if (showTooltip || showAllTip || tooltipConfig) {
                 tdOns.onMouseleave = (evnt) => {
-                    if (isVMScrollProcess()) {
-                        return;
-                    }
-                    if (showTooltip || showAllTip) {
-                        $xeTable.handleTargetLeaveEvent(evnt);
+                    if (!isVMScrollProcess()) {
+                        if (showTooltip || showAllTip) {
+                            $xeTable.handleTargetLeaveEvent(evnt);
+                        }
                     }
                     $xeTable.dispatchEvent('cell-mouseleave', Object.assign({ cell: evnt.currentTarget }, cellParams), evnt);
                 };

package/es/table/src/column.js

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

package/es/table/src/columnInfo.js

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

package/es/table/src/emits.js

@@ -6,6 +6,9 @@ export const tableEmits = [
     'paste',
     'copy',
     'cut',
+    'columns-change',
+    'data-change',
+    'footer-data-change',
     'current-change',
     'current-row-change',
     'current-row-disabled',

package/es/table/src/header.js

@@ -2,7 +2,7 @@ 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 { getCalcHeight, convertHeaderColumnToRows } from './util';
+import { getCalcHeight, convertHeaderColumnToRows, convertHeaderToGridRows } from './util';
 const { renderer, renderEmptyElement } = VxeUI;
 const renderType = 'header';
 export default defineVxeComponent({
@@ -30,16 +30,26 @@ export default defineVxeComponent({
         const refHeaderXSpace = ref();
         const refHeaderBorderRepair = ref();
         const uploadColumn = () => {
+            const { showCustomHeader } = tableProps;
+            const { collectColumn, visibleColumn } = tableInternalData;
+            const { tableGroupColumn } = props;
             const { isGroup } = tableReactData;
-            headerColumn.value = isGroup ? convertHeaderColumnToRows(props.tableGroupColumn) : [];
+            let spanColumns = isGroup ? convertHeaderColumnToRows(tableGroupColumn) : [];
+            let visibleColgroups = [];
+            if (showCustomHeader && spanColumns.length > 1) {
+                visibleColgroups = convertHeaderToGridRows(spanColumns);
+                spanColumns = visibleColgroups;
+            }
+            headerColumn.value = spanColumns;
+            $xeTable.dispatchEvent('columns-change', { visibleColgroups, collectColumn, visibleColumn }, null);
         };
-        const renderRows = (isGroup, isOptimizeMode, cols, $rowIndex) => {
+        const renderRows = (isGroup, isOptimizeMode, headerGroups, $rowIndex, cols) => {
             const $xeGrid = $xeTable.xeGrid;
             const $xeGantt = $xeTable.xeGantt;
             const { fixedType } = props;
-            const { resizable: allResizable, columnKey, headerCellClassName, headerCellStyle, showHeaderOverflow: allColumnHeaderOverflow, headerAlign: allHeaderAlign, align: allAlign, mouseConfig } = tableProps;
-            const { currentColumn, dragCol, scrollXLoad, scrollYLoad, overflowX, tableColumn } = tableReactData;
-            const { fullColumnIdData, scrollXStore } = tableInternalData;
+            const { resizable: allResizable, columnKey, showCustomHeader, headerCellClassName, headerCellStyle, showHeaderOverflow: allColumnHeaderOverflow, headerAlign: allHeaderAlign, align: allAlign, mouseConfig } = tableProps;
+            const { currentColumn, dragCol, scrollXLoad, scrollYLoad, overflowX, mergeHeadFlag, tableColumn } = tableReactData;
+            const { fullColumnIdData, scrollXStore, mergeHeaderList, mergeHeaderCellMaps } = tableInternalData;
             const virtualXOpts = computeVirtualXOpts.value;
             const columnOpts = computeColumnOpts.value;
             const columnDragOpts = computeColumnDragOpts.value;
@@ -48,6 +58,7 @@ export default defineVxeComponent({
             const headerCellOpts = computeHeaderCellOpts.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;
@@ -87,10 +98,31 @@ export default defineVxeComponent({
                     hasFilter
                 };
                 const thAttrs = {
-                    colid,
-                    colspan: column.colSpan > 1 ? column.colSpan : null,
-                    rowspan: column.rowSpan > 1 ? column.rowSpan : null
+                    colid
                 };
+                let isMergeCell = false;
+                // 合并行或列
+                if (!showCustomHeader) {
+                    thAttrs.colspan = column.colSpan > 1 ? column.colSpan : null;
+                    thAttrs.rowspan = column.rowSpan > 1 ? column.rowSpan : null;
+                }
+                if (mergeHeadFlag && mergeHeaderList.length && (showCustomHeader || isLastRow)) {
+                    const spanRest = mergeHeaderCellMaps[`${$rowIndex}:${showCustomHeader ? $columnIndex : _columnIndex}`];
+                    if (spanRest) {
+                        const { rowspan, colspan } = spanRest;
+                        if (!rowspan || !colspan) {
+                            return null;
+                        }
+                        if (rowspan > 1) {
+                            isMergeCell = true;
+                            thAttrs.rowspan = rowspan;
+                        }
+                        if (colspan > 1) {
+                            isMergeCell = true;
+                            thAttrs.colspan = colspan;
+                        }
+                    }
+                }
                 const thOns = {
                     onClick: (evnt) => $xeTable.triggerHeaderCellClickEvent(evnt, cellParams),
                     onDblclick: (evnt) => $xeTable.triggerHeaderCellDblclickEvent(evnt, cellParams)
@@ -117,7 +149,7 @@ export default defineVxeComponent({
                 const showResizable = (XEUtils.isBoolean(column.resizable) ? column.resizable : (columnOpts.resizable || allResizable));
                 const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto');
                 let isVNPreEmptyStatus = false;
-                if (isOptimizeMode && overflowX && !isGroup) {
+                if (isOptimizeMode && overflowX && !isGroup && !isMergeCell) {
                     if (!dragCol || dragCol.id !== colid) {
                         if (scrollXLoad && tableColumn.length > 10 && !column.fixed && !virtualXOpts.immediate && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
                             isVNPreEmptyStatus = true;
@@ -131,7 +163,7 @@ export default defineVxeComponent({
                 else {
                     tcStyle.minHeight = `${currCellHeight}px`;
                 }
-                return h('th', Object.assign(Object.assign(Object.assign({ class: ['vxe-table--column vxe-header--column', colid, {
+                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,
@@ -139,7 +171,6 @@ export default defineVxeComponent({
                             'col--group': isColGroup,
                             'col--ellipsis': hasEllipsis,
                             'fixed--width': !isAutoCellWidth,
-                            'fixed--hidden': fixedHiddenColumn,
                             'is--padding': isPadding,
                             'is--sortable': column.sortable,
                             'col--filter': !!filters,
@@ -150,7 +181,7 @@ export default defineVxeComponent({
                         },
                         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: columnKey || scrollXLoad || scrollYLoad || columnOpts.useKey || columnOpts.drag || isColGroup ? colid : $columnIndex }), [
+                    ], 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,
@@ -169,7 +200,7 @@ export default defineVxeComponent({
                     /**
                      * 列宽拖动
                      */
-                    !fixedHiddenColumn && showResizable
+                    !fixedHiddenColumn && showResizable && (!showCustomHeader || isLastRow)
                         ? h('div', {
                             class: 'vxe-cell--col-resizable',
                             onMousedown: (evnt) => $xeTable.handleColResizeMousedownEvent(evnt, fixedType, cellParams),
@@ -191,7 +222,7 @@ export default defineVxeComponent({
                         headerRowClassName ? (XEUtils.isFunction(headerRowClassName) ? headerRowClassName(params) : headerRowClassName) : ''
                     ],
                     style: headerRowStyle ? (XEUtils.isFunction(headerRowStyle) ? headerRowStyle(params) : headerRowStyle) : null
-                }, renderRows(isGroup, isOptimizeMode, cols, $rowIndex));
+                }, renderRows(isGroup, isOptimizeMode, headerGroups, $rowIndex, cols));
             });
         };
         const renderVN = () => {
@@ -200,7 +231,7 @@ export default defineVxeComponent({
             const { isGroup, isColLoading, overflowX, scrollXLoad, dragCol } = tableReactData;
             const { visibleColumn, fullColumnIdData } = tableInternalData;
             const mouseOpts = computeMouseOpts.value;
-            let renderHeaderList = headerColumn.value;
+            let renderHeaderList = headerColumn.value || [];
             let renderColumnList = tableColumn;
             let isOptimizeMode = false;
             if (isGroup) {

package/es/table/src/props.js

@@ -10,7 +10,7 @@ export const tableProps = {
     // 表格的最小高度
     minHeight: {
         type: [Number, String],
-        default: () => getConfig().table.minHeight
+        default: () => null
     },
     // 表格的最大高度
     maxHeight: [Number, String],
@@ -129,9 +129,17 @@ export const tableProps = {
     headerRowStyle: [Object, Function],
     // 给表尾行附加样式
     footerRowStyle: [Object, Function],
-    // 合并指定单元格
+    // 用于分组表头，显示为自定义列头，配合 mergeHeaderCells 灵活实现自定义合并
+    showCustomHeader: {
+        type: Boolean,
+        default: () => getConfig().table.showCustomHeader
+    },
+    // 临时合并指定的表头单元格
+    mergeHeaderCells: Array,
+    // 临时合并指定的单元格
     mergeCells: Array,
-    // 合并指定的表尾
+    // 临时合并指定的表尾单元格
+    mergeFooterCells: Array,
     mergeFooterItems: Array,
     // 自定义合并行或列的方法
     spanMethod: Function,