vxe-table 3.21.4 → 3.21.6

package/es/table/module/export/mixin.js

@@ -365,7 +365,7 @@ function getBooleanValue(cellValue) {
 function getHeaderTitle($xeTable, opts, column) {
     const columnOpts = $xeTable.computeColumnOpts;
     const headExportMethod = column.headerExportMethod || columnOpts.headerExportMethod;
-    return headExportMethod ? headExportMethod({ column, options: opts, $table: $xeTable }) : ((opts.isTitle ? column.getTitle() : column.field) || '');
+    return headExportMethod ? headExportMethod({ column, options: opts, $table: $xeTable }) : ((opts.isTitle ? $xeTable.getHeaderCellLabel(column) : column.field) || '');
 }
 function getFooterCellValue($xeTable, opts, row, column) {
     const columnOpts = $xeTable.computeColumnOpts;
@@ -883,12 +883,12 @@ function handleImport($xeTable, content, opts) {
     const tableTitleMaps = {};
     tableFullColumn.forEach((column) => {
         const field = column.field;
-        const title = column.getTitle();
+        const title = $xeTable.getHeaderCellLabel(column);
         if (field) {
             tableFieldMaps[field] = column;
         }
         if (title) {
-            tableTitleMaps[column.getTitle()] = column;
+            tableTitleMaps[title] = column;
         }
     });
     const tableConf = {

package/es/table/src/cell.js

@@ -358,7 +358,7 @@ export const Cell = {
                 return getSlotVNs(renderTitleContent(h, params, rtHeader.call($table, h, renderOpts, params)));
             }
         }
-        return renderTitleContent(h, params, formatText(column.getTitle(), 1));
+        return renderTitleContent(h, params, $table.getHeaderCellLabel(column));
     },
     renderDefaultHeader(h, params) {
         return renderHeaderCellBaseVNs(h, params, Cell.renderHeaderTitle(h, params));
@@ -370,7 +370,7 @@ export const Cell = {
         const tableInternalData = $table;
         const { isRowGroupStatus } = tableReactData;
         const { editConfig } = tableProps;
-        const { field, slots, editRender, cellRender, rowGroupNode, aggFunc, formatter } = column;
+        const { field, slots, editRender, cellRender, rowGroupNode, aggFunc } = column;
         const isEnableEdit = editConfig && isEnableConf(editConfig);
         const editRenderOpts = isEnableEdit && isEnableConf(editRender) ? editRender : null;
         const cellRenderOpts = isEnableConf(cellRender) ? cellRender : null;
@@ -445,8 +445,9 @@ export const Cell = {
                 return renderCellBaseVNs(h, params, $table.callSlot(defaultSlot, params, h));
             }
             const renderOpts = editRenderOpts || cellRenderOpts;
-            // formatter > (renderTableCell | renderTableDefault)
-            if (renderOpts && !formatter) {
+            // 如果是编辑表格：renderTableCell > formatter
+            // 如果是查看表格：renderTableDefault > formatter
+            if (renderOpts) {
                 const compConf = renderer.get(renderOpts.name);
                 if (compConf) {
                     const renderFn = editRenderOpts ? (compConf.renderTableCell || compConf.renderCell) : (compConf.renderTableDefault || compConf.renderDefault);
@@ -620,7 +621,7 @@ export const Cell = {
     renderSeqHeader(h, params) {
         const { $table, column } = params;
         const { slots } = column;
-        return renderHeaderCellBaseVNs(h, params, renderTitleContent(h, params, slots && slots.header ? $table.callSlot(slots.header, params, h) : formatText(column.getTitle(), 1)));
+        return renderHeaderCellBaseVNs(h, params, renderTitleContent(h, params, slots && slots.header ? $table.callSlot(slots.header, params, h) : $table.getHeaderCellLabel(column)));
     },
     renderSeqCell(h, params) {
         const { $table, column } = params;
@@ -653,7 +654,7 @@ export const Cell = {
             : [
                 h('span', {
                     class: 'vxe-radio--label'
-                }, titleSlot ? $table.callSlot(titleSlot, params, h) : formatText(column.getTitle(), 1))
+                }, titleSlot ? $table.callSlot(titleSlot, params, h) : $table.getHeaderCellLabel(column))
             ]));
     },
     renderRadioCell(h, params) {
@@ -723,7 +724,7 @@ export const Cell = {
         const titleSlot = slots ? slots.title : null;
         const checkboxOpts = $table.computeCheckboxOpts;
         const { checkStrictly, showHeader, headerTitle } = checkboxOpts;
-        const colTitle = column.getTitle();
+        const colTitle = $table.getHeaderCellLabel(column);
         const ons = {};
         if (!isHidden) {
             ons.click = (evnt) => {

package/es/table/src/columnInfo.js

@@ -11,7 +11,7 @@ export class ColumnInfo {
         const $xeGrid = $xeTable.$xeGrid;
         const $xeGantt = $xeTable.$xeGantt;
         const $xeGGWrapper = $xeGrid || $xeGantt;
-        const { field, editRender, filterRender, headerFormatter } = _vm;
+        const { field, editRender, filterRender } = _vm;
         const colId = _vm.colId || XEUtils.uniqueId('col_');
         const proxyOpts = $xeGrid ? $xeGrid.computeProxyOpts : null;
         const formatter = _vm.formatter;
@@ -19,9 +19,6 @@ export class ColumnInfo {
         const flCompConf = isEnableConf(filterRender) ? renderer.get(filterRender.name) : null;
         const ctFilterOptions = flCompConf ? flCompConf.createTableFilterOptions : null;
         const filters = toFilters(_vm.filters, colId);
-        if (headerFormatter) {
-            errLog('vxe.error.notProp', ['header-formatter']);
-        }
         const types = ['seq', 'checkbox', 'radio', 'expand', 'html'];
         if (_vm.type && types.indexOf(_vm.type) === -1) {
             warnLog('vxe.error.errProp', [`type=${_vm.type}`, types.join(', ')]);

package/es/table/src/methods.js

@@ -3,7 +3,7 @@ import { getTpImg, isPx, isScale, hasClass, addClass, removeClass, wheelScrollLe
 import { getLastZIndex, nextZIndex, hasChildrenList, getFuncText, isEnableConf, formatText, eqEmptyValue } from '../../ui/src/utils';
 import { VxeUI } from '../../ui';
 import Cell from './cell';
-import { getRowUniqueId, createRowId, clearTableAllStatus, getColumnList, toFilters, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleRowidOrRow, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, getRootColumn, getColReMinWidth, createHandleUpdateRowId, createHandleGetRowId, getRefElem, getCellRestHeight, getLastChildColumn } from './util';
+import { getRowUniqueId, createRowId, clearTableAllStatus, getColumnList, toFilters, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleRowidOrRow, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, getRootColumn, getColReMinWidth, getColReMaxWidth, createHandleUpdateRowId, createHandleGetRowId, getRefElem, getCellRestHeight, getLastChildColumn } from './util';
 import { getSlotVNs } from '../../ui/src/vn';
 import { moveRowAnimateToTb, clearRowAnimate, moveColAnimateToLr, clearColAnimate } from '../../ui/src/anime';
 import { warnLog, errLog } from '../../ui/src/log';
@@ -2332,6 +2332,7 @@ function autoCellWidth($xeTable) {
     if (!xHandleEl) {
         return;
     }
+    const columnOpts = $xeTable.computeColumnOpts;
     let tWidth = 0;
     const minCellWidth = 40; // 列宽最少限制 40px
     const bodyWidth = bodyWrapperElem.clientWidth;
@@ -2340,41 +2341,75 @@ function autoCellWidth($xeTable) {
     const { fit } = props;
     const { columnStore } = reactData;
     const { resizeList, pxMinList, autoMinList, pxList, scaleList, scaleMinList, autoList, remainList } = columnStore;
+    const parseColumnMaxWidth = (column) => {
+        const maxWidth = column.maxWidth || columnOpts.maxWidth;
+        if (maxWidth && maxWidth !== 'auto') {
+            if (isScale(maxWidth)) {
+                return Math.floor(XEUtils.toInteger(maxWidth) * meanWidth);
+            }
+            return XEUtils.toInteger(maxWidth);
+        }
+        return 0;
+    };
     // 最小宽
     pxMinList.forEach((column) => {
-        const minWidth = XEUtils.toInteger(column.minWidth);
-        tWidth += minWidth;
-        column.renderWidth = minWidth;
+        let miWidth = XEUtils.toInteger(column.minWidth);
+        const mxWidth = parseColumnMaxWidth(column);
+        if (mxWidth) {
+            miWidth = Math.min(miWidth, mxWidth);
+        }
+        tWidth += miWidth;
+        column.renderWidth = miWidth;
     });
     // 最小自适应
     autoMinList.forEach((column) => {
-        const scaleWidth = Math.max(60, XEUtils.toInteger(column.renderAutoWidth));
-        tWidth += scaleWidth;
-        column.renderWidth = scaleWidth;
+        let caWidth = Math.max(60, XEUtils.toInteger(column.renderAutoWidth));
+        const mxWidth = parseColumnMaxWidth(column);
+        if (mxWidth) {
+            caWidth = Math.min(caWidth, mxWidth);
+        }
+        tWidth += caWidth;
+        column.renderWidth = caWidth;
     });
     // 最小百分比
     scaleMinList.forEach((column) => {
-        const scaleWidth = Math.floor(XEUtils.toInteger(column.minWidth) * meanWidth);
-        tWidth += scaleWidth;
-        column.renderWidth = scaleWidth;
+        let smWidth = Math.floor(XEUtils.toInteger(column.minWidth) * meanWidth);
+        const mxWidth = parseColumnMaxWidth(column);
+        if (mxWidth) {
+            smWidth = Math.min(smWidth, mxWidth);
+        }
+        tWidth += smWidth;
+        column.renderWidth = smWidth;
     });
     // 固定百分比
     scaleList.forEach((column) => {
-        const scaleWidth = Math.floor(XEUtils.toInteger(column.width) * meanWidth);
-        tWidth += scaleWidth;
-        column.renderWidth = scaleWidth;
+        let sfWidth = Math.floor(XEUtils.toInteger(column.width) * meanWidth);
+        const mxWidth = parseColumnMaxWidth(column);
+        if (mxWidth) {
+            sfWidth = Math.min(sfWidth, mxWidth);
+        }
+        tWidth += sfWidth;
+        column.renderWidth = sfWidth;
     });
     // 固定宽
     pxList.forEach((column) => {
-        const width = XEUtils.toInteger(column.width);
-        tWidth += width;
-        column.renderWidth = width;
+        let pWidth = XEUtils.toInteger(column.width);
+        const mxWidth = parseColumnMaxWidth(column);
+        if (mxWidth) {
+            pWidth = Math.min(pWidth, mxWidth);
+        }
+        tWidth += pWidth;
+        column.renderWidth = pWidth;
     });
     // 自适应宽
     autoList.forEach((column) => {
-        const width = Math.max(60, XEUtils.toInteger(column.renderAutoWidth));
-        tWidth += width;
-        column.renderWidth = width;
+        let aWidth = Math.max(60, XEUtils.toInteger(column.renderAutoWidth));
+        const mxWidth = parseColumnMaxWidth(column);
+        if (mxWidth) {
+            aWidth = Math.min(aWidth, mxWidth);
+        }
+        tWidth += aWidth;
+        column.renderWidth = aWidth;
     });
     // 调整了列宽
     resizeList.forEach((column) => {
@@ -2382,11 +2417,12 @@ function autoCellWidth($xeTable) {
         tWidth += width;
         column.renderWidth = width;
     });
+    const zoomColumnList = scaleMinList.concat(pxMinList).concat(autoMinList).filter(column => !parseColumnMaxWidth(column));
     remainWidth -= tWidth;
-    meanWidth = remainWidth > 0 ? Math.floor(remainWidth / (scaleMinList.length + pxMinList.length + autoMinList.length + remainList.length)) : 0;
+    meanWidth = remainWidth > 0 ? Math.floor(remainWidth / (zoomColumnList.length + remainList.length)) : 0;
     if (fit) {
         if (remainWidth > 0) {
-            scaleMinList.concat(pxMinList).concat(autoMinList).forEach((column) => {
+            zoomColumnList.forEach((column) => {
                 tWidth += meanWidth;
                 column.renderWidth += meanWidth;
             });
@@ -2405,8 +2441,9 @@ function autoCellWidth($xeTable) {
         /**
          * 偏移量算法
          * 如果所有列足够放的情况下，从最后动态列开始分配
+         * 排除已设置 max-width
          */
-        const dynamicList = scaleList.concat(scaleMinList).concat(pxMinList).concat(autoMinList).concat(remainList);
+        const dynamicList = scaleList.concat(scaleMinList).concat(pxMinList).concat(autoMinList).concat(remainList).filter(column => !parseColumnMaxWidth(column));
         let dynamicSize = dynamicList.length - 1;
         if (dynamicSize > 0) {
             let i = bodyWidth - tWidth;
@@ -3786,6 +3823,7 @@ function handleInitColumn($xeTable, collectColumn) {
                 loadScrollXData($xeTable);
             }
         });
+        $xeTable.clearHeaderFormatterCache();
         $xeTable.clearMergeCells();
         $xeTable.clearMergeFooterItems();
         $xeTable.handleTableData(true);
@@ -5408,6 +5446,88 @@ const tableMethods = {
         }
         return $xeTable.$nextTick();
     },
+    getHeaderCellLabel(fieldOrColumn) {
+        const $xeTable = this;
+        const internalData = $xeTable;
+        const column = handleFieldOrColumn($xeTable, fieldOrColumn);
+        if (!column) {
+            return null;
+        }
+        const { headerFormatter } = column;
+        const _columnIndex = $xeTable.getVTColumnIndex(column);
+        let cellLabel = column.getTitle();
+        if (headerFormatter) {
+            let formatData;
+            const { headerFullDataColData } = internalData;
+            const colid = column.id;
+            let colRest = headerFullDataColData[colid];
+            if (!colRest) {
+                colRest = headerFullDataColData[colid] = {};
+            }
+            const formatObj = colRest.formatObj;
+            if (formatObj && formatObj.value === cellLabel) {
+                return formatObj.label;
+            }
+            const headFormatParams = {
+                $table: $xeTable,
+                cellTitle: cellLabel,
+                cellValue: cellLabel,
+                column,
+                _columnIndex,
+                columnIndex: $xeTable.getColumnIndex(column)
+            };
+            if (XEUtils.isString(headerFormatter)) {
+                const gFormatOpts = formats.get(headerFormatter);
+                const fcFormatMethod = gFormatOpts ? gFormatOpts.tableHeaderCellFormatMethod : null;
+                cellLabel = XEUtils.toValueString(fcFormatMethod ? fcFormatMethod(headFormatParams) : '');
+            }
+            else if (XEUtils.isArray(headerFormatter)) {
+                const gFormatOpts = formats.get(headerFormatter[0]);
+                const fcFormatMethod = gFormatOpts ? gFormatOpts.tableHeaderCellFormatMethod : null;
+                cellLabel = XEUtils.toValueString(fcFormatMethod ? fcFormatMethod(headFormatParams, ...headerFormatter.slice(1)) : '');
+            }
+            else {
+                cellLabel = XEUtils.toValueString(headerFormatter(headFormatParams));
+            }
+            if (formatData) {
+                colRest.formatObj = { value: cellLabel, label: cellLabel };
+            }
+        }
+        return cellLabel;
+    },
+    updateHeaderCellLabel(fieldOrColumn) {
+        const $xeTable = this;
+        const internalData = $xeTable;
+        const column = handleFieldOrColumn($xeTable, fieldOrColumn);
+        if (!column) {
+            return '';
+        }
+        const { headerFullDataColData } = internalData;
+        const colid = column.id;
+        const colRest = headerFullDataColData[colid];
+        if (colRest) {
+            colRest.formatObj = undefined;
+        }
+        return $xeTable.getHeaderCellLabel(column);
+    },
+    clearHeaderFormatterCache(isUpdate) {
+        const $xeTable = this;
+        const reactData = $xeTable;
+        const internalData = $xeTable;
+        const { tableColumn } = reactData;
+        const { headerFullDataColData } = internalData;
+        XEUtils.each(headerFullDataColData, (colRest) => {
+            if (colRest.formatObj) {
+                colRest.formatObj = undefined;
+            }
+        });
+        if (isUpdate) {
+            tableColumn.forEach(column => {
+                $xeTable.getHeaderCellLabel(column);
+            });
+        }
+        return $xeTable.$nextTick();
+    },
     getFooterCellLabel(row, fieldOrColumn) {
         const $xeTable = this;
         const reactData = $xeTable;
@@ -6438,6 +6558,7 @@ const tableMethods = {
         const dragBtnOffsetWidth = XEUtils.floor(dragBtnWidth / 2);
         const dragPosLeft = dragBtnRect.x - tableRect.x + dragBtnOffsetWidth;
         const minInterval = getColReMinWidth(cellParams) - dragBtnOffsetWidth; // 列之间的最小间距
+        const maxInterval = getColReMaxWidth(cellParams); // 列之间的最大间距
         const dragMinLeft = isRightFixed ? 0 : (cellRect.x - tableRect.x + dragBtnWidth + minInterval);
         const dragMaxLeft = cellRect.x - tableRect.x + cell.clientWidth - minInterval;
         let fixedLeftRemainWidth = 0;
@@ -6477,6 +6598,10 @@ const tableMethods = {
                 left = Math.min(left, dragMaxLeft);
             }
             dragLeft = Math.max(left, dragMinLeft);
+            // 最大宽
+            if (maxInterval > 1) {
+                dragLeft = Math.min(dragLeft, maxInterval + dragMinLeft - minInterval);
+            }
             const resizeBarLeft = Math.max(1, dragLeft);
             resizeBarElem.style.left = `${resizeBarLeft}px`;
             resizeBarElem.style.top = `${scrollbarXToTop ? osbHeight : 0}px`;
@@ -6560,6 +6685,7 @@ const tableMethods = {
             const cell = dragBtnElem.parentNode;
             const cellParams = Object.assign(params, { cell, $table: $xeTable });
             const colMinWidth = getColReMinWidth(cellParams);
+            const colMaxWidth = getColReMaxWidth(cellParams);
             el.setAttribute('data-calc-col', 'Y');
             let resizeWidth = calcColumnAutoWidth($xeTable, resizeColumn, el);
             el.removeAttribute('data-calc-col');
@@ -6567,6 +6693,9 @@ const tableMethods = {
                 resizeWidth = Math.max(resizeWidth, colRest.width);
             }
             resizeWidth = Math.max(colMinWidth, resizeWidth);
+            if (colMaxWidth > 1) {
+                resizeWidth = Math.min(colMaxWidth, resizeWidth);
+            }
             const resizeParams = Object.assign(Object.assign({}, params), { resizeWidth, resizeColumn });
             reactData.isDragResize = false;
             internalData._lastResizeTime = Date.now();
@@ -12458,6 +12587,7 @@ const tableMethods = {
             footData = visibleColumn.length ? footerMethod({ columns: visibleColumn, data: afterFullData, $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt }) : [];
         }
         reactData.footerTableData = footData;
+        $xeTable.clearFooterFormatterCache();
         $xeTable.handleUpdateFooterMerge();
         $xeTable.dispatchEvent('footer-data-change', {
             visibleColumn: internalData.visibleColumn,

package/es/table/src/util.js

@@ -77,6 +77,7 @@ export function createInternalData() {
         // 数据集（仅可视）
         visibleDataRowIdData: {},
         keepUpdateFieldMaps: {},
+        headerFullDataColData: {},
         footerFullDataRowData: {},
         // 渲染中缓存数据
         sourceDataRowIdData: {},
@@ -710,10 +711,52 @@ export function toFilters(filters, colid) {
     }
     return filters;
 }
+/**
+ * 列宽拖动最大宽度
+ */
+export function getColReMaxWidth(params) {
+    const { $table, column, cell } = params;
+    const internalData = $table;
+    const { elemStore } = internalData;
+    const resizableOpts = $table.computeResizableOpts;
+    const columnOpts = $table.computeColumnOpts;
+    const { maxWidth: reMaxWidth } = resizableOpts;
+    const colMaxWidth = column.maxWidth || columnOpts.maxWidth;
+    // 如果自定义调整宽度逻辑
+    if (reMaxWidth) {
+        const customMaxWidth = XEUtils.isFunction(reMaxWidth) ? reMaxWidth(params) : reMaxWidth;
+        if (customMaxWidth !== 'auto') {
+            return Math.max(1, XEUtils.toNumber(customMaxWidth));
+        }
+    }
+    const minTitleWidth = XEUtils.floor((XEUtils.toNumber(getComputedStyle(cell).fontSize) || 14) * 1.8);
+    const paddingLeftRight = getPaddingLeftRightSize(cell) + getPaddingLeftRightSize(queryElement(cell, '.vxe-cell'));
+    const mWidth = minTitleWidth + paddingLeftRight;
+    // 如果设置最小宽
+    if (colMaxWidth) {
+        const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
+        if (bodyScrollElem) {
+            if (isScale(colMaxWidth)) {
+                const bodyWidth = bodyScrollElem.clientWidth - 1;
+                const meanWidth = bodyWidth / 100;
+                return Math.max(mWidth, Math.floor(XEUtils.toInteger(colMaxWidth) * meanWidth));
+            }
+            else if (isPx(colMaxWidth)) {
+                return Math.max(mWidth, XEUtils.toInteger(colMaxWidth));
+            }
+        }
+    }
+    return -1;
+}
+/**
+ * 列宽拖动最小宽度
+ */
 export function getColReMinWidth(params) {
     const { $table, column, cell } = params;
+    const tableProps = $table;
     const internalData = $table;
-    const { showHeaderOverflow: allColumnHeaderOverflow, resizableOpts } = $table;
+    const resizableOpts = $table.computeResizableOpts;
+    const columnOpts = $table.computeColumnOpts;
     const { minWidth } = resizableOpts;
     // 如果自定义调整宽度逻辑
     if (minWidth) {
@@ -723,7 +766,9 @@ export function getColReMinWidth(params) {
         }
     }
     const { elemStore } = internalData;
-    const { showHeaderOverflow, minWidth: colMinWidth } = column;
+    const { showHeaderOverflow: allColumnHeaderOverflow } = tableProps;
+    const { showHeaderOverflow } = column;
+    const colMinWidth = column.minWidth || columnOpts.minWidth;
     const headOverflow = XEUtils.isUndefined(showHeaderOverflow) || XEUtils.isNull(showHeaderOverflow) ? allColumnHeaderOverflow : showHeaderOverflow;
     const showEllipsis = headOverflow === 'ellipsis';
     const showTitle = headOverflow === 'title';

package/es/ui/index.js

@@ -1,6 +1,6 @@
 import { VxeUI } from '@vxe-ui/core';
 import { getFuncText } from './src/utils';
-export const version = "3.21.4";
+export const version = "3.21.6";
 VxeUI.version = version;
 VxeUI.tableVersion = version;
 VxeUI.setConfig({

package/es/ui/src/log.js

@@ -1,5 +1,5 @@
 import { VxeUI } from '@vxe-ui/core';
 const { log } = VxeUI;
-const version = `table v${"3.21.4"}`;
+const version = `table v${"3.21.6"}`;
 export const warnLog = log.create('warn', version);
 export const errLog = log.create('error', version);