vxe-table 4.16.1 → 4.16.2

package/es/table/src/table.js

@@ -260,6 +260,7 @@ export default defineVxeComponent({
             pendingRowFlag: 1,
             insertRowFlag: 1,
             removeRowFlag: 1,
+            mergeHeadFlag: 1,
             mergeBodyFlag: 1,
             mergeFootFlag: 1,
             rowHeightStore: {
@@ -1126,15 +1127,62 @@ export default defineVxeComponent({
                 });
             }
         };
-        const handleUpdateMergeFooterCells = (merges) => {
-            internalData.mergeFooterList = [];
-            internalData.mergeFooterMaps = {};
-            internalData.mergeFooterCellMaps = {};
-            $xeTable.setMergeFooterItems(merges);
+        const removeBodyMerges = (merges) => {
+            const { mergeBodyList, fullColumnIdData, fullAllDataRowIdData, mergeBodyMaps } = internalData;
+            const rest = [];
+            if (merges) {
+                const { handleGetRowId } = createHandleGetRowId($xeTable);
+                if (!XEUtils.isArray(merges)) {
+                    merges = [merges];
+                }
+                merges.forEach((item) => {
+                    const { row: margeRow, col: margeCol } = item;
+                    let mergeRowIndex = -1;
+                    let mergeColumnIndex = -1;
+                    if (XEUtils.isNumber(margeRow)) {
+                        mergeRowIndex = margeRow;
+                    }
+                    else {
+                        const rowid = margeRow ? handleGetRowId(margeRow) : null;
+                        const rowRest = rowid ? fullAllDataRowIdData[rowid] : null;
+                        if (rowRest) {
+                            mergeRowIndex = rowRest._index;
+                        }
+                    }
+                    if (XEUtils.isNumber(margeCol)) {
+                        mergeColumnIndex = margeCol;
+                    }
+                    else {
+                        const colid = margeCol ? margeCol.id : null;
+                        const colRest = colid ? fullColumnIdData[colid] : null;
+                        if (colRest) {
+                            mergeColumnIndex = colRest._index;
+                        }
+                    }
+                    const mcIndex = XEUtils.findIndexOf(mergeBodyList, item => item.row === mergeRowIndex && item.col === mergeColumnIndex);
+                    if (mcIndex > -1) {
+                        const rItems = mergeBodyList.splice(mcIndex, 1);
+                        const item = rItems[0];
+                        if (item) {
+                            rest.push(rItems[0]);
+                            if (mergeBodyMaps[`${mergeRowIndex}:${mergeColumnIndex}`]) {
+                                delete mergeBodyMaps[`${mergeRowIndex}:${mergeColumnIndex}`];
+                            }
+                        }
+                    }
+                });
+            }
+            return rest;
         };
-        const handleFooterMerge = (merges) => {
+        const handleUpdateMergeHeaderCells = (merges) => {
+            internalData.mergeHeaderList = [];
+            internalData.mergeHeaderMaps = {};
+            internalData.mergeHeaderCellMaps = {};
+            $xeTable.setMergeHeaderCells(merges);
+        };
+        const handleHeaderMerge = (merges) => {
             const { footerTableData } = reactData;
-            const { mergeFooterList, mergeFooterMaps, fullColumnIdData } = internalData;
+            const { mergeHeaderList, mergeHeaderMaps, fullColumnIdData } = internalData;
             if (merges) {
                 const { visibleColumn } = internalData;
                 if (!XEUtils.isArray(merges)) {
@@ -1160,7 +1208,7 @@ export default defineVxeComponent({
                         if (rowspan > 1 || colspan > 1) {
                             const row = footerTableData[mergeRowIndex];
                             const column = visibleColumn[mergeColumnIndex];
-                            let mergeItem = mergeFooterMaps[`${mergeRowIndex}:${mergeColumnIndex}`];
+                            let mergeItem = mergeHeaderMaps[`${mergeRowIndex}:${mergeColumnIndex}`];
                             if (mergeItem) {
                                 mergeItem.rowspan = rowspan;
                                 mergeItem.colspan = colspan;
@@ -1178,36 +1226,25 @@ export default defineVxeComponent({
                                     _rowspan: rowspan,
                                     _colspan: colspan
                                 };
-                                mergeFooterMaps[`${mergeRowIndex}:${mergeColumnIndex}`] = mergeItem;
-                                mergeFooterList.push(mergeItem);
+                                mergeHeaderMaps[`${mergeRowIndex}:${mergeColumnIndex}`] = mergeItem;
+                                mergeHeaderList.push(mergeItem);
                             }
                         }
                     }
                 });
             }
         };
-        const removeBodyMerges = (merges) => {
-            const { mergeBodyList, fullColumnIdData, fullAllDataRowIdData, mergeBodyMaps } = internalData;
+        const removeHeaderMerges = (merges) => {
+            const { mergeHeaderList, fullColumnIdData, mergeHeaderMaps } = internalData;
             const rest = [];
             if (merges) {
-                const { handleGetRowId } = createHandleGetRowId($xeTable);
                 if (!XEUtils.isArray(merges)) {
                     merges = [merges];
                 }
                 merges.forEach((item) => {
                     const { row: margeRow, col: margeCol } = item;
-                    let mergeRowIndex = -1;
+                    const mergeRowIndex = XEUtils.isNumber(margeRow) ? margeRow : -1;
                     let mergeColumnIndex = -1;
-                    if (XEUtils.isNumber(margeRow)) {
-                        mergeRowIndex = margeRow;
-                    }
-                    else {
-                        const rowid = margeRow ? handleGetRowId(margeRow) : null;
-                        const rowRest = rowid ? fullAllDataRowIdData[rowid] : null;
-                        if (rowRest) {
-                            mergeRowIndex = rowRest._index;
-                        }
-                    }
                     if (XEUtils.isNumber(margeCol)) {
                         mergeColumnIndex = margeCol;
                     }
@@ -1218,14 +1255,14 @@ export default defineVxeComponent({
                             mergeColumnIndex = colRest._index;
                         }
                     }
-                    const mcIndex = XEUtils.findIndexOf(mergeBodyList, item => item.row === mergeRowIndex && item.col === mergeColumnIndex);
+                    const mcIndex = XEUtils.findIndexOf(mergeHeaderList, item => item.row === mergeRowIndex && item.col === mergeColumnIndex);
                     if (mcIndex > -1) {
-                        const rItems = mergeBodyList.splice(mcIndex, 1);
+                        const rItems = mergeHeaderList.splice(mcIndex, 1);
                         const item = rItems[0];
                         if (item) {
-                            rest.push(rItems[0]);
-                            if (mergeBodyMaps[`${mergeRowIndex}:${mergeColumnIndex}`]) {
-                                delete mergeBodyMaps[`${mergeRowIndex}:${mergeColumnIndex}`];
+                            rest.push(item);
+                            if (mergeHeaderMaps[`${mergeRowIndex}:${mergeColumnIndex}`]) {
+                                delete mergeHeaderMaps[`${mergeRowIndex}:${mergeColumnIndex}`];
                             }
                         }
                     }
@@ -1233,6 +1270,66 @@ export default defineVxeComponent({
             }
             return rest;
         };
+        const handleUpdateMergeFooterCells = (merges) => {
+            internalData.mergeFooterList = [];
+            internalData.mergeFooterMaps = {};
+            internalData.mergeFooterCellMaps = {};
+            $xeTable.setMergeFooterCells(merges);
+        };
+        const handleFooterMerge = (merges) => {
+            const { footerTableData } = reactData;
+            const { mergeFooterList, mergeFooterMaps, fullColumnIdData } = internalData;
+            if (merges) {
+                const { visibleColumn } = internalData;
+                if (!XEUtils.isArray(merges)) {
+                    merges = [merges];
+                }
+                merges.forEach((item) => {
+                    let { row: margeRow, col: margeCol, rowspan, colspan } = item;
+                    const mergeRowIndex = XEUtils.isNumber(margeRow) ? margeRow : -1;
+                    let mergeColumnIndex = -1;
+                    if (XEUtils.isNumber(margeCol)) {
+                        mergeColumnIndex = margeCol;
+                    }
+                    else {
+                        const colid = margeCol ? margeCol.id : null;
+                        const colRest = colid ? fullColumnIdData[colid] : null;
+                        if (colRest) {
+                            mergeColumnIndex = colRest._index;
+                        }
+                    }
+                    if (mergeRowIndex > -1 && mergeColumnIndex > -1 && (rowspan || colspan)) {
+                        rowspan = XEUtils.toNumber(rowspan) || 1;
+                        colspan = XEUtils.toNumber(colspan) || 1;
+                        if (rowspan > 1 || colspan > 1) {
+                            const row = footerTableData[mergeRowIndex];
+                            const column = visibleColumn[mergeColumnIndex];
+                            let mergeItem = mergeFooterMaps[`${mergeRowIndex}:${mergeColumnIndex}`];
+                            if (mergeItem) {
+                                mergeItem.rowspan = rowspan;
+                                mergeItem.colspan = colspan;
+                                mergeItem._rowspan = rowspan;
+                                mergeItem._colspan = colspan;
+                            }
+                            else {
+                                mergeItem = {
+                                    row: mergeRowIndex,
+                                    col: mergeColumnIndex,
+                                    rowspan,
+                                    colspan,
+                                    _row: row,
+                                    _col: column,
+                                    _rowspan: rowspan,
+                                    _colspan: colspan
+                                };
+                                mergeFooterMaps[`${mergeRowIndex}:${mergeColumnIndex}`] = mergeItem;
+                                mergeFooterList.push(mergeItem);
+                            }
+                        }
+                    }
+                });
+            }
+        };
         const removeFooterMerges = (merges) => {
             const { mergeFooterList, fullColumnIdData, mergeFooterMaps } = internalData;
             const rest = [];
@@ -1338,8 +1435,23 @@ export default defineVxeComponent({
             });
         };
         const calcTableHeight = (key) => {
+            const { editConfig } = props;
             const { parentHeight } = reactData;
-            const val = props[key];
+            let val = props[key];
+            if (key === 'minHeight') {
+                const defMinHeight = getConfig().table.minHeight;
+                if (XEUtils.eqNull(val)) {
+                    if (eqEmptyValue(defMinHeight)) {
+                        // 编辑模式默认最小高度
+                        if (isEnableConf(editConfig)) {
+                            val = 144;
+                        }
+                    }
+                    else {
+                        val = defMinHeight;
+                    }
+                }
+            }
             let num = 0;
             if (val) {
                 if (val === '100%' || val === 'auto') {
@@ -2253,7 +2365,7 @@ export default defineVxeComponent({
             }
             if (xRightCornerEl) {
                 xRightCornerEl.style.width = scrollbarXToTop ? '' : `${osbWidth}px`;
-                xRightCornerEl.style.display = scrollbarXToTop ? '' : (overflowX && osbHeight ? 'block' : '');
+                xRightCornerEl.style.display = scrollbarXToTop ? '' : (xScrollbarVisible === 'visible' ? 'block' : '');
             }
             const scrollYVirtualEl = refScrollYVirtualElem.value;
             if (scrollYVirtualEl) {
@@ -2264,7 +2376,7 @@ export default defineVxeComponent({
             const yTopCornerEl = refScrollYTopCornerElem.value;
             if (yTopCornerEl) {
                 yTopCornerEl.style.height = `${tHeaderHeight}px`;
-                yTopCornerEl.style.display = overflowY && tHeaderHeight ? 'block' : '';
+                yTopCornerEl.style.display = tHeaderHeight && yScrollbarVisible === 'visible' ? 'block' : '';
             }
             const yWrapperEl = refScrollYWrapperElem.value;
             if (yWrapperEl) {
@@ -2275,7 +2387,7 @@ export default defineVxeComponent({
             if (yBottomCornerEl) {
                 yBottomCornerEl.style.height = `${tFooterHeight}px`;
                 yBottomCornerEl.style.top = `${tHeaderHeight + tbHeight}px`;
-                yBottomCornerEl.style.display = overflowY && tFooterHeight ? 'block' : '';
+                yBottomCornerEl.style.display = tFooterHeight && yScrollbarVisible === 'visible' ? 'block' : '';
             }
             const rowExpandEl = refRowExpandElem.value;
             if (rowExpandEl) {
@@ -2965,10 +3077,17 @@ export default defineVxeComponent({
                 $xeTable.setMergeCells(mergeCells);
             }
         };
+        const handleDefaultMergeHeaderItems = () => {
+            const { mergeHeaderCells } = props;
+            if (mergeHeaderCells) {
+                $xeTable.setMergeHeaderCells(mergeHeaderCells);
+            }
+        };
         const handleDefaultMergeFooterItems = () => {
-            const { mergeFooterItems } = props;
-            if (mergeFooterItems) {
-                $xeTable.setMergeFooterItems(mergeFooterItems);
+            const { mergeFooterCells, mergeFooterItems } = props;
+            const mFooterCells = mergeFooterCells || mergeFooterItems;
+            if (mFooterCells) {
+                $xeTable.setMergeFooterCells(mFooterCells);
             }
         };
         // 计算可视渲染相关数据
@@ -3405,6 +3524,10 @@ export default defineVxeComponent({
                 }
                 handleReserveStatus();
                 $xeTable.checkSelectionStatus();
+                $xeTable.dispatchEvent('data-change', {
+                    visibleColumn: internalData.visibleColumn,
+                    visibleData: internalData.afterFullData
+                }, null);
                 return new Promise(resolve => {
                     nextTick()
                         .then(() => handleRecalculateStyle(false, false, false))
@@ -3467,6 +3590,7 @@ export default defineVxeComponent({
             handleDefaultTreeExpand();
             handleDefaultRowGroupExpand();
             handleDefaultMergeCells();
+            handleDefaultMergeHeaderItems();
             handleDefaultMergeFooterItems();
             nextTick(() => setTimeout(() => $xeTable.recalculate()));
         };
@@ -6785,6 +6909,10 @@ export default defineVxeComponent({
                 }
                 reactData.footerTableData = footData;
                 $xeTable.handleUpdateFooterMerge();
+                $xeTable.dispatchEvent('footer-data-change', {
+                    visibleColumn: internalData.visibleColumn,
+                    footData
+                }, null);
                 return nextTick();
             },
             /**
@@ -6852,39 +6980,85 @@ export default defineVxeComponent({
                     return updateStyle();
                 });
             },
-            setMergeFooterItems(merges) {
+            setMergeHeaderCells(merges) {
+                handleHeaderMerge(merges);
+                $xeTable.handleUpdateHeaderMerge();
+                return nextTick().then(() => {
+                    return updateStyle();
+                });
+            },
+            /**
+             * 移除表头单元格合并 [{row:Row|number, col:ColumnInfo|number}]
+             */
+            removeMergeHeaderCells(merges) {
+                const rest = removeHeaderMerges(merges);
+                $xeTable.handleUpdateHeaderMerge();
+                return nextTick().then(() => {
+                    updateStyle();
+                    return rest;
+                });
+            },
+            /**
+             * 获取所有被合并的表头单元格
+             */
+            getMergeHeaderCells() {
+                return internalData.mergeHeaderList.slice(0);
+            },
+            /**
+             * 清除所有表头单元格合并
+             */
+            clearMergeHeaderCells() {
+                internalData.mergeHeaderList = [];
+                internalData.mergeHeaderMaps = {};
+                internalData.mergeHeaderCellMaps = {};
+                reactData.mergeHeadFlag++;
+                return nextTick().then(() => {
+                    return updateStyle();
+                });
+            },
+            setMergeFooterCells(merges) {
                 if (props.footerSpanMethod) {
-                    errLog('vxe.error.errConflicts', ['merge-footer-items', 'footer-span-method']);
+                    errLog('vxe.error.errConflicts', ['merge-footer-cells | merge-footer-items', 'footer-span-method']);
                 }
                 handleFooterMerge(merges);
                 $xeTable.handleUpdateFooterMerge();
                 return nextTick().then(() => {
-                    $xeTable.updateCellAreas();
                     return updateStyle();
                 });
             },
-            removeMergeFooterItems(merges) {
+            setMergeFooterItems(merges) {
+                // errLog('vxe.error.delFunc', ['setMergeFooterItems', 'setMergeFooterCells'])
+                return $xeTable.setMergeFooterCells(merges);
+            },
+            removeMergeFooterCells(merges) {
                 if (props.footerSpanMethod) {
-                    errLog('vxe.error.errConflicts', ['merge-footer-items', 'footer-span-method']);
+                    errLog('vxe.error.errConflicts', ['merge-footer-cells | merge-footer-items', 'footer-span-method']);
                 }
                 const rest = removeFooterMerges(merges);
                 $xeTable.handleUpdateFooterMerge();
                 return nextTick().then(() => {
-                    $xeTable.updateCellAreas();
                     updateStyle();
                     return rest;
                 });
             },
+            removeMergeFooterItems(merges) {
+                // errLog('vxe.error.delFunc', ['removeMergeFooterItems', 'removeMergeFooterCells'])
+                return $xeTable.removeMergeFooterCells(merges);
+            },
             /**
              * 获取所有被合并的表尾
              */
-            getMergeFooterItems() {
+            getMergeFooterCells() {
                 return internalData.mergeFooterList.slice(0);
             },
+            getMergeFooterItems() {
+                // errLog('vxe.error.delFunc', ['getMergeFooterItems', 'getMergeFooterCells'])
+                return $xeTable.getMergeFooterCells();
+            },
             /**
              * 清除所有表尾合并
              */
-            clearMergeFooterItems() {
+            clearMergeFooterCells() {
                 internalData.mergeFooterList = [];
                 internalData.mergeFooterMaps = {};
                 internalData.mergeFooterCellMaps = {};
@@ -6893,6 +7067,10 @@ export default defineVxeComponent({
                     return updateStyle();
                 });
             },
+            clearMergeFooterItems() {
+                // errLog('vxe.error.delFunc', ['clearMergeFooterItems', 'clearMergeFooterCells'])
+                return $xeTable.clearMergeFooterCells();
+            },
             updateCellAreas() {
                 const { mouseConfig } = props;
                 const mouseOpts = computeMouseOpts.value;
@@ -8956,6 +9134,11 @@ export default defineVxeComponent({
                 internalData.mergeBodyCellMaps = buildMergeData(mergeBodyList);
                 reactData.mergeBodyFlag++;
             },
+            handleUpdateHeaderMerge() {
+                const { mergeHeaderList } = internalData;
+                internalData.mergeHeaderCellMaps = buildMergeData(mergeHeaderList);
+                reactData.mergeHeadFlag++;
+            },
             handleUpdateFooterMerge() {
                 const { mergeFooterList } = internalData;
                 internalData.mergeFooterCellMaps = buildMergeData(mergeFooterList);
@@ -11714,7 +11897,10 @@ export default defineVxeComponent({
                             ref: refScrollXSpaceElem,
                             class: 'vxe-table--scroll-x-space'
                         })
-                    ])
+                    ]),
+                    h('div', {
+                        class: 'vxe-table--scroll-x-handle-appearance'
+                    })
                 ]),
                 h('div', {
                     ref: refScrollXRightCornerElem,
@@ -11744,7 +11930,10 @@ export default defineVxeComponent({
                             ref: refScrollYSpaceElem,
                             class: 'vxe-table--scroll-y-space'
                         })
-                    ])
+                    ]),
+                    h('div', {
+                        class: 'vxe-table--scroll-y-handle-appearance'
+                    })
                 ]),
                 h('div', {
                     ref: refScrollYBottomCornerElem,
@@ -12221,15 +12410,32 @@ export default defineVxeComponent({
         watch(mergeCellFlag, () => {
             handleUpdateMergeBodyCells(props.mergeCells || []);
         });
-        const mergeFooterItemFlag = ref(0);
+        const mergeHeaderItemFlag = ref(0);
+        watch(() => props.mergeHeaderCells ? props.mergeHeaderCells.length : -1, () => {
+            mergeHeaderItemFlag.value++;
+        });
+        watch(() => props.mergeHeaderCells, () => {
+            mergeHeaderItemFlag.value++;
+        });
+        watch(mergeHeaderItemFlag, () => {
+            handleUpdateMergeHeaderCells(props.mergeHeaderCells || []);
+        });
+        const mergeFooteCellFlag = ref(0);
+        watch(() => props.mergeFooterCells ? props.mergeFooterCells.length : -1, () => {
+            mergeFooteCellFlag.value++;
+        });
+        watch(() => props.mergeFooterCells, () => {
+            mergeFooteCellFlag.value++;
+        });
         watch(() => props.mergeFooterItems ? props.mergeFooterItems.length : -1, () => {
-            mergeFooterItemFlag.value++;
+            mergeFooteCellFlag.value++;
         });
         watch(() => props.mergeFooterItems, () => {
-            mergeFooterItemFlag.value++;
+            mergeFooteCellFlag.value++;
         });
-        watch(mergeFooterItemFlag, () => {
-            handleUpdateMergeFooterCells(props.mergeFooterItems || []);
+        watch(mergeFooteCellFlag, () => {
+            const mFooterCells = props.mergeFooterCells || props.mergeFooterItems;
+            handleUpdateMergeFooterCells(mFooterCells || []);
         });
         watch(computeRowGroupFields, (val) => {
             handleUpdateRowGroup(val);

package/es/table/src/util.js

@@ -80,14 +80,19 @@ export function createInternalData() {
         sourceDataRowIdData: {},
         fullColumnIdData: {},
         fullColumnFieldData: {},
+        // 合并表头单元格的数据
+        mergeHeaderList: [],
+        mergeHeaderMaps: {},
+        // 已合并单元格数据集合
+        mergeHeaderCellMaps: {},
         // 合并单元格的数据
         mergeBodyList: [],
         mergeBodyMaps: {},
+        // 已合并单元格数据集合
+        mergeBodyCellMaps: {},
         // 合并表尾的数据
         mergeFooterList: [],
         mergeFooterMaps: {},
-        // 已合并单元格数据集合
-        mergeBodyCellMaps: {},
         // 已合并表尾数据集合
         mergeFooterCellMaps: {},
         // 已展开的行集合
@@ -181,6 +186,69 @@ export const convertHeaderColumnToRows = (originColumns) => {
     });
     return rows;
 };
+export function convertHeaderToGridRows(spanColumns) {
+    const rSize = spanColumns.length;
+    const cSize = spanColumns[0].reduce((sum, cell) => sum + cell.colSpan, 0);
+    const occupiedRows = [];
+    const fullRows = [];
+    for (let rIndex = 0; rIndex < rSize; rIndex++) {
+        const oCols = [];
+        const dCols = [];
+        for (let cIndex = 0; cIndex < cSize; cIndex++) {
+            oCols.push(false);
+            dCols.push('');
+        }
+        occupiedRows.push(oCols);
+        fullRows.push(dCols);
+    }
+    for (let rIndex = 0; rIndex < rSize; rIndex++) {
+        let currColIndex = 0;
+        for (const column of spanColumns[rIndex]) {
+            const { colSpan, rowSpan } = column;
+            let startColIndex = -1;
+            for (let ccIndex = currColIndex; ccIndex <= cSize - colSpan; ccIndex++) {
+                let oFlag = true;
+                for (let csIndex = 0; csIndex < colSpan; csIndex++) {
+                    if (occupiedRows[rIndex][ccIndex + csIndex]) {
+                        oFlag = false;
+                        break;
+                    }
+                }
+                if (oFlag) {
+                    startColIndex = ccIndex;
+                    break;
+                }
+            }
+            if (startColIndex === -1) {
+                for (let j = 0; j <= cSize - colSpan; j++) {
+                    let oFlag = true;
+                    for (let k = 0; k < colSpan; k++) {
+                        if (occupiedRows[rIndex][j + k]) {
+                            oFlag = false;
+                            break;
+                        }
+                    }
+                    if (oFlag) {
+                        startColIndex = j;
+                        break;
+                    }
+                }
+                if (startColIndex === -1) {
+                    // error
+                    break;
+                }
+            }
+            for (let srIndex = rIndex; srIndex < rIndex + rowSpan; srIndex++) {
+                for (let scIndex = startColIndex; scIndex < startColIndex + colSpan; scIndex++) {
+                    occupiedRows[srIndex][scIndex] = true;
+                    fullRows[srIndex][scIndex] = column;
+                }
+            }
+            currColIndex = startColIndex + colSpan;
+        }
+    }
+    return fullRows;
+}
 export function restoreScrollLocation($xeTable, scrollLeft, scrollTop) {
     const internalData = $xeTable.internalData;
     if (scrollLeft || scrollTop) {