vxe-table 4.16.0 → 4.16.2

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

@@ -98,14 +98,18 @@ hooks.add('tableEditModule', {
         const handleInsertRowAt = (records, targetRow, isInsertNextRow) => {
             const { treeConfig } = props;
             const { isRowGroupStatus } = reactData;
-            const { tableFullTreeData, afterFullData, mergeBodyList, tableFullData, fullDataRowIdData, fullAllDataRowIdData, insertRowMaps } = internalData;
+            const { tableFullTreeData, afterFullData, mergeBodyList, tableFullData, fullDataRowIdData, fullAllDataRowIdData, insertRowMaps, removeRowMaps } = internalData;
             const treeOpts = computeTreeOpts.value;
-            const { transform, rowField, mapChildrenField } = treeOpts;
+            const { transform, parentField, rowField, mapChildrenField } = treeOpts;
             const childrenField = treeOpts.children || treeOpts.childrenField;
             if (!XEUtils.isArray(records)) {
                 records = [records];
             }
             const newRecords = reactive($xeTable.defineField(records.map((record) => Object.assign(treeConfig && transform ? { [mapChildrenField]: [], [childrenField]: [] } : {}, record))));
+            let treeRecords = [];
+            if (treeConfig && transform) {
+                treeRecords = XEUtils.toArrayTree(newRecords, { key: rowField, parentKey: parentField, children: childrenField });
+            }
             if (XEUtils.eqNull(targetRow)) {
                 // 如果为虚拟树
                 if (treeConfig && transform) {
@@ -171,25 +175,34 @@ hooks.add('tableEditModule', {
                             const parentMapChilds = parentRow ? parentRow[mapChildrenField] : tableFullTreeData;
                             const parentRest = fullAllDataRowIdData[getRowid($xeTable, parentRow)];
                             const parentLevel = parentRest ? parentRest.level : 0;
-                            newRecords.forEach((item, i) => {
-                                const rowid = getRowid($xeTable, item);
-                                if (item[treeOpts.parentField]) {
-                                    if (parentRow && item[treeOpts.parentField] !== parentRow[rowField]) {
-                                        errLog('vxe.error.errProp', [`${treeOpts.parentField}=${item[treeOpts.parentField]}`, `${treeOpts.parentField}=${parentRow[rowField]}`]);
+                            treeRecords.forEach((row, i) => {
+                                if (parentRow) {
+                                    if (row[parentField] !== parentRow[rowField]) {
+                                        row[parentField] = parentRow[rowField];
+                                        errLog('vxe.error.errProp', [`${parentField}=${row[parentField]}`, `${parentField}=${parentRow[rowField]}`]);
                                     }
                                 }
-                                if (parentRow) {
-                                    item[treeOpts.parentField] = parentRow[rowField];
+                                else {
+                                    if (row[parentField] !== null) {
+                                        row[parentField] = null;
+                                        errLog('vxe.error.errProp', [`${parentField}=${row[parentField]}`, 'null']);
+                                    }
                                 }
                                 let targetIndex = matchMapObj.index + i;
                                 if (isInsertNextRow) {
                                     targetIndex = targetIndex + 1;
                                 }
-                                parentMapChilds.splice(targetIndex, 0, item);
+                                parentMapChilds.splice(targetIndex, 0, row);
+                            });
+                            XEUtils.eachTree(treeRecords, (item) => {
+                                const rowid = getRowid($xeTable, item);
                                 const rest = { row: item, rowid, seq: -1, index: -1, _index: -1, $index: -1, treeIndex: -1, _tIndex: -1, items: parentMapChilds, parent: parentRow, level: parentLevel + 1, height: 0, resizeHeight: 0, oTop: 0, expandHeight: 0 };
+                                if (item[childrenField]) {
+                                    item[mapChildrenField] = item[childrenField];
+                                }
                                 fullDataRowIdData[rowid] = rest;
                                 fullAllDataRowIdData[rowid] = rest;
-                            });
+                            }, { children: childrenField });
                             // 源
                             if (parentRow) {
                                 const matchObj = XEUtils.findTree(tableFullTreeData, item => targetRow[rowField] === item[rowField], { children: childrenField });
@@ -199,7 +212,7 @@ hooks.add('tableEditModule', {
                                     if (isInsertNextRow) {
                                         targetIndex = targetIndex + 1;
                                     }
-                                    parentChilds.splice(targetIndex, 0, ...newRecords);
+                                    parentChilds.splice(targetIndex, 0, ...treeRecords);
                                 }
                             }
                         }
@@ -257,10 +270,27 @@ hooks.add('tableEditModule', {
                     }
                 }
             }
-            newRecords.forEach(newRow => {
+            const handleStatus = (newRow) => {
                 const rowid = getRowid($xeTable, newRow);
-                insertRowMaps[rowid] = newRow;
-            });
+                // 如果是被删除的数据，则还原状态
+                if (removeRowMaps[rowid]) {
+                    delete removeRowMaps[rowid];
+                    if (insertRowMaps[rowid]) {
+                        delete insertRowMaps[rowid];
+                    }
+                }
+                else {
+                    insertRowMaps[rowid] = newRow;
+                }
+            };
+            // 如果为虚拟树
+            if (treeConfig && transform) {
+                XEUtils.eachTree(treeRecords, handleStatus, { children: mapChildrenField });
+            }
+            else {
+                newRecords.forEach(handleStatus);
+            }
+            reactData.removeRowFlag++;
             reactData.insertRowFlag++;
             $xeTable.cacheRowMap(false);
             $xeTable.updateScrollYStatus();
@@ -736,7 +766,12 @@ hooks.add('tableEditModule', {
                 const { editStore } = reactData;
                 const { row, column } = editStore.actived;
                 if (column && row) {
-                    return { row, column };
+                    return {
+                        row,
+                        rowIndex: $xeTable.getRowIndex(row),
+                        column,
+                        columnIndex: $xeTable.getColumnIndex(column)
+                    };
                 }
                 return null;
             },
@@ -747,7 +782,10 @@ hooks.add('tableEditModule', {
                 const { editStore } = reactData;
                 const { row, column } = editStore.selected;
                 if (row && column) {
-                    return { row, column };
+                    return {
+                        row,
+                        column
+                    };
                 }
                 return null;
             },

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',
@@ -51,6 +54,8 @@ export const tableEmits = [
     'row-dragstart',
     'row-dragover',
     'row-dragend',
+    'row-remove-dragend',
+    'row-insert-dragend',
     'column-dragstart',
     'column-dragover',
     'column-dragend',

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,

package/es/table/src/store.js

@@ -0,0 +1,8 @@
+import { reactive } from 'vue';
+// 跨表拖拽
+export const crossTableDragRowInfo = reactive({
+    row: null
+});
+export function getCrossTableDragRowInfo() {
+    return crossTableDragRowInfo;
+}