vxe-table 3.18.1 → 3.18.2

package/es/table/src/footer.js

@@ -240,8 +240,9 @@ export default {
         elemStore[`${prefix}xSpace`] = _vm.$refs.refFooterXSpace;
     },
     destroyed() {
-        const props = this;
-        const $xeTable = this.$parent;
+        const _vm = this;
+        const props = _vm;
+        const $xeTable = _vm.$parent;
         const tableInternalData = $xeTable;
         const { fixedType } = props;
         const { elemStore } = tableInternalData;
@@ -254,8 +255,9 @@ export default {
         elemStore[`${prefix}xSpace`] = null;
     },
     render(h) {
-        const props = this;
-        const $xeTable = this.$parent;
+        const _vm = this;
+        const props = _vm;
+        const $xeTable = _vm.$parent;
         const tableProps = $xeTable;
         const tableReactData = $xeTable;
         const tableInternalData = $xeTable;
@@ -362,7 +364,7 @@ export default {
                    */
                     h('tfoot', {
                         ref: 'refFooterTFoot'
-                    }, renderHeads(h, this, isOptimizeMode, renderColumnList))
+                    }, renderHeads(h, _vm, isOptimizeMode, renderColumnList))
                 ])
             ])
         ]);

package/es/table/src/header.js

@@ -1,10 +1,10 @@
 import XEUtils from 'xe-utils';
 import { VxeUI } from '../../ui';
 import { getClass } from '../../ui/src/utils';
-import { getCalcHeight, convertHeaderColumnToRows } from './util';
+import { getCalcHeight, convertHeaderColumnToRows, convertHeaderToGridRows } from './util';
 const { renderer, renderEmptyElement } = VxeUI;
 const cellType = 'header';
-const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
+function renderRows(h, _vm, isGroup, isOptimizeMode, headerGroups, $rowIndex, cols) {
     const props = _vm;
     const $xeTable = _vm.$parent;
     const $xeGrid = $xeTable.$xeGrid;
@@ -13,9 +13,9 @@ const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
     const tableReactData = $xeTable;
     const tableInternalData = $xeTable;
     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 = $xeTable.computeVirtualXOpts;
     const columnOpts = $xeTable.computeColumnOpts;
     const columnDragOpts = $xeTable.computeColumnDragOpts;
@@ -24,6 +24,7 @@ const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
     const headerCellOpts = $xeTable.computeHeaderCellOpts;
     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 { enabled } = tooltipOpts
@@ -47,7 +48,7 @@ const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
             hasFilter = filters.some((item) => item.checked);
         }
         const columnIndex = colRest.index;
-        const _columnIndex = colRest._index;
+        const _columnIndex = showCustomHeader ? $columnIndex : colRest._index;
         const cellParams = {
             $table: $xeTable,
             $grid: $xeGrid,
@@ -64,10 +65,31 @@ const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
             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 = {
             click: (evnt) => $xeTable.triggerHeaderCellClickEvent(evnt, cellParams),
             dblclick: (evnt) => $xeTable.triggerHeaderCellDblclickEvent(evnt, cellParams)
@@ -94,7 +116,7 @@ const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
         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;
@@ -109,7 +131,7 @@ const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
             tcStyle.minHeight = `${currCellHeight}px`;
         }
         return h('th', {
-            class: ['vxe-table--column vxe-header--column', colid, {
+            class: ['vxe-table--column vxe-header--column', colid, fixedHiddenColumn ? 'fixed--hidden' : 'fixed--visible', {
                     [`col--${headAlign}`]: headAlign,
                     [`col--${type}`]: type,
                     'col--last': isLastColumn,
@@ -117,7 +139,6 @@ const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
                     'col--group': isColGroup,
                     'col--ellipsis': hasEllipsis,
                     'fixed--width': !isAutoCellWidth,
-                    'fixed--hidden': fixedHiddenColumn,
                     'is--padding': isPadding,
                     'is--sortable': column.sortable,
                     'col--filter': !!filters,
@@ -129,7 +150,7 @@ const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
             attrs: thAttrs,
             style: headerCellStyle ? (XEUtils.isFunction(headerCellStyle) ? headerCellStyle(cellParams) : headerCellStyle) : undefined,
             on: thOns,
-            key: columnKey || scrollXLoad || scrollYLoad || columnOpts.useKey || columnOpts.drag || isColGroup ? colid : $columnIndex
+            key: showCustomHeader ? `${colid}${$columnIndex}` : (columnKey || scrollXLoad || scrollYLoad || columnOpts.useKey || columnOpts.drag || isColGroup ? colid : $columnIndex)
         }, [
             h('div', {
                 class: ['vxe-cell', {
@@ -149,9 +170,9 @@ const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
                     }, column.renderHeader(h, cellParams))
                 ]),
             /**
-           * 列宽拖动
-           */
-            !fixedHiddenColumn && showResizable
+             * 列宽拖动
+             */
+            !fixedHiddenColumn && showResizable && (!showCustomHeader || isLastRow)
                 ? h('div', {
                     class: 'vxe-cell--col-resizable',
                     on: {
@@ -162,7 +183,7 @@ const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
                 : renderEmptyElement($xeTable)
         ]);
     });
-};
+}
 function renderHeads(h, _vm, isGroup, isOptimizeMode, headerGroups) {
     const props = _vm;
     const $xeTable = _vm.$parent;
@@ -178,7 +199,7 @@ function renderHeads(h, _vm, isGroup, isOptimizeMode, headerGroups) {
                 headerRowClassName ? XEUtils.isFunction(headerRowClassName) ? headerRowClassName(params) : headerRowClassName : ''
             ],
             style: headerRowStyle ? (XEUtils.isFunction(headerRowStyle) ? headerRowStyle(params) : headerRowStyle) : undefined
-        }, renderRows(h, _vm, isGroup, isOptimizeMode, cols, $rowIndex));
+        }, renderRows(h, _vm, isGroup, isOptimizeMode, headerGroups, $rowIndex, cols));
     });
 }
 export default {
@@ -200,11 +221,13 @@ export default {
     },
     watch: {
         tableColumn() {
-            this.uploadColumn();
+            const _vm = this;
+            _vm.uploadColumn();
         }
     },
     created() {
-        this.uploadColumn();
+        const _vm = this;
+        _vm.uploadColumn();
     },
     mounted() {
         const _vm = this;
@@ -223,8 +246,9 @@ export default {
         elemStore[`${prefix}repair`] = _vm.$refs.refHeaderBorderRepair;
     },
     destroyed() {
-        const props = this;
-        const $xeTable = this.$parent;
+        const _vm = this;
+        const props = _vm;
+        const $xeTable = _vm.$parent;
         const internalData = $xeTable;
         const { fixedType } = props;
         const { elemStore } = internalData;
@@ -238,14 +262,15 @@ export default {
         elemStore[`${prefix}repair`] = null;
     },
     render(h) {
-        const props = this;
-        const $xeTable = this.$parent;
+        const _vm = this;
+        const props = _vm;
+        const $xeTable = _vm.$parent;
         const tableProps = $xeTable;
         const tableReactData = $xeTable;
         const tableInternalData = $xeTable;
         const { xID } = $xeTable;
         const { fixedType, fixedColumn, tableColumn } = props;
-        const { headerColumn } = this;
+        const { headerColumn } = _vm;
         const { mouseConfig, showHeaderOverflow: allColumnHeaderOverflow, spanMethod, footerSpanMethod } = tableProps;
         const { isGroup, isColLoading, overflowX, scrollXLoad, dragCol } = tableReactData;
         const { visibleColumn, fullColumnIdData } = tableInternalData;
@@ -358,7 +383,7 @@ export default {
                      */
                     h('thead', {
                         ref: 'refHeaderTHead'
-                    }, renderHeads(h, this, isGroup, isOptimizeMode, renderHeaderList))
+                    }, renderHeads(h, _vm, isGroup, isOptimizeMode, renderHeaderList))
                 ]),
                 mouseConfig && mouseOpts.area
                     ? h('div', {
@@ -389,10 +414,24 @@ export default {
     },
     methods: {
         uploadColumn() {
-            const $xeTable = this.$parent;
+            const _vm = this;
+            const $xeTable = _vm.$parent;
+            const tableProps = $xeTable;
             const tableReactData = $xeTable;
+            const tableInternalData = $xeTable;
+            const props = _vm;
+            const { showCustomHeader } = tableProps;
+            const { collectColumn, visibleColumn } = tableInternalData;
+            const { tableGroupColumn } = props;
             const { isGroup } = tableReactData;
-            this.headerColumn = isGroup ? convertHeaderColumnToRows(this.tableGroupColumn) : [];
+            let spanColumns = isGroup ? convertHeaderColumnToRows(tableGroupColumn) : [];
+            let visibleColgroups = [];
+            if (showCustomHeader && spanColumns.length > 1) {
+                visibleColgroups = convertHeaderToGridRows(spanColumns);
+                spanColumns = visibleColgroups;
+            }
+            _vm.headerColumn = spanColumns;
+            $xeTable.dispatchEvent('columns-change', { visibleColgroups, collectColumn, visibleColumn }, null);
         }
     }
 };