vxe-table 4.16.1 → 4.16.2

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,