vxe-table 3.21.5 → 3.21.7

package/es/table/src/body.js

@@ -330,23 +330,11 @@ function renderTdColumn(h, $xeTable, seq, rowid, fixedType, isOptimizeMode, rowL
                 class: 'vxe-cell--wrapper vxe-body-cell--wrapper'
             }, column.renderCell(h, cellParams)));
         }
-        tdVNs.push(h('div', {
-            key: 'tc',
-            class: ['vxe-cell', {
-                    'c--title': showTitle,
-                    'c--tooltip': showTooltip,
-                    'c--ellipsis': showEllipsis
-                }],
-            style: tcStyle,
-            attrs: {
-                title: showTitle ? $xeTable.getCellLabel(row, column) : null
-            }
-        }, clVNs));
         if (showValidTip && errorValidItem) {
             const errRule = errorValidItem.rule;
             const validSlot = slots ? slots.valid : null;
             const validParams = Object.assign(Object.assign(Object.assign({}, cellParams), errorValidItem), { rule: errorValidItem });
-            tdVNs.push(h('div', {
+            clVNs.push(h('div', {
                 key: 'tcv',
                 class: ['vxe-cell--valid-error-tip', getClass(validOpts.className, errorValidItem)],
                 style: errRule && errRule.maxWidth
@@ -368,6 +356,18 @@ function renderTdColumn(h, $xeTable, seq, rowid, fixedType, isOptimizeMode, rowL
                 ])
             ]));
         }
+        tdVNs.push(h('div', {
+            key: 'tc',
+            class: ['vxe-cell', {
+                    'c--title': showTitle,
+                    'c--tooltip': showTooltip,
+                    'c--ellipsis': showEllipsis
+                }],
+            style: tcStyle,
+            attrs: {
+                title: showTitle ? $xeTable.getCellLabel(row, column) : null
+            }
+        }, clVNs));
     }
     let showAreaRowStatus = false;
     if (mouseConfig && mouseOpts.area && !_columnIndex && selectCellToRow) {

package/es/table/src/group.js

@@ -35,6 +35,9 @@ export default {
         if ($scopedSlots.header) {
             columnSlots.header = $scopedSlots.header;
         }
+        if ($scopedSlots.title) {
+            columnSlots.title = $scopedSlots.title;
+        }
         this.columnConfig.slots = columnSlots;
         assembleColumn($xeColgroup);
     },

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';
@@ -397,12 +397,19 @@ function updateScrollXStatus($xeTable, fullColumn) {
     reactData.scrollXLoad = scrollXLoad;
     return scrollXLoad;
 }
+function syncGanttScrollYStatus($xeTable) {
+    const reactData = $xeTable;
+    const internalData = $xeTable;
+    const $xeGanttView = internalData.xeGanttView;
+    if ($xeGanttView && $xeGanttView.handleUpdateSYStatus) {
+        $xeGanttView.handleUpdateSYStatus(reactData.scrollYLoad);
+    }
+}
 function updateScrollYStatus($xeTable, fullData) {
     const props = $xeTable;
     const reactData = $xeTable;
     const internalData = $xeTable;
     const { treeConfig } = props;
-    const $xeGanttView = internalData.xeGanttView;
     const virtualYOpts = $xeTable.computeVirtualYOpts;
     const treeOpts = $xeTable.computeTreeOpts;
     const { transform } = treeOpts;
@@ -410,9 +417,7 @@ function updateScrollYStatus($xeTable, fullData) {
     // 如果gt为0，则总是启用
     const scrollYLoad = (transform || !treeConfig) && !!virtualYOpts.enabled && virtualYOpts.gt > -1 && (virtualYOpts.gt === 0 || virtualYOpts.gt < allList.length);
     reactData.scrollYLoad = scrollYLoad;
-    if ($xeGanttView && $xeGanttView.handleUpdateSYStatus) {
-        $xeGanttView.handleUpdateSYStatus(scrollYLoad);
-    }
+    syncGanttScrollYStatus($xeTable);
     return scrollYLoad;
 }
 /**
@@ -959,6 +964,7 @@ function updateStyle($xeTable) {
     const props = $xeTable;
     const reactData = $xeTable;
     const internalData = $xeTable;
+    const $xeGantt = $xeTable.$xeGantt;
     const { mouseConfig } = props;
     const { isGroup, tableColumn, overflowX, scrollbarWidth, overflowY, scrollbarHeight, scrollXWidth, columnStore, editStore, isColLoading } = reactData;
     const { visibleColumn, tableHeight, elemStore, currentRow, customHeight, customMinHeight, customMaxHeight, tHeaderHeight, tFooterHeight } = internalData;
@@ -996,7 +1002,7 @@ function updateStyle($xeTable) {
         xScrollbarVisible = 'hidden';
     }
     let yScrollbarVisible = overflowY ? 'visible' : 'hidden';
-    if ((scrollbarYConf.visible === 'hidden' || scrollbarYConf.visible === false) || ($xeGanttView && !scrollbarYToLeft)) {
+    if ((scrollbarYConf.visible === 'hidden' || scrollbarYConf.visible === false) || (($xeGantt && $xeGanttView && $xeGantt.reactData.showRightView) && !scrollbarYToLeft)) {
         osbWidth = 0;
         yScrollbarVisible = 'hidden';
     }
@@ -2332,6 +2338,7 @@ function autoCellWidth($xeTable) {
     if (!xHandleEl) {
         return;
     }
+    const columnOpts = $xeTable.computeColumnOpts;
     let tWidth = 0;
     const minCellWidth = 40; // 列宽最少限制 40px
     const bodyWidth = bodyWrapperElem.clientWidth;
@@ -2340,41 +2347,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 +2423,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 +2447,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;
@@ -3425,6 +3468,7 @@ function loadTableData($xeTable, datas, isReload, isReset) {
         updateStyle($xeTable);
     }).then(() => {
         computeScrollLoad($xeTable);
+        syncGanttScrollYStatus($xeTable);
     }).then(() => {
         const virtualYOpts = $xeTable.computeVirtualYOpts;
         // 是否启用了虚拟滚动
@@ -3484,6 +3528,7 @@ function loadTableData($xeTable, datas, isReload, isReset) {
                 reactData.isRowLoading = false;
                 handleRecalculateStyle($xeTable, false, false, false);
                 updateTreeLineStyle($xeTable);
+                syncGanttScrollYStatus($xeTable);
                 // 如果是自动行高，特殊情况需调用 recalculate 手动刷新
                 if (!props.showOverflow) {
                     setTimeout(() => {
@@ -6521,6 +6566,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;
@@ -6560,6 +6606,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`;
@@ -6643,6 +6693,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');
@@ -6650,6 +6701,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();
@@ -7711,7 +7765,14 @@ const tableMethods = {
     },
     handleGlobalPasteEvent(evnt) {
         const $xeTable = this;
-        const { isActivated, keyboardConfig, keyboardOpts, mouseConfig, mouseOpts, editStore, filterStore } = this;
+        const props = $xeTable;
+        const internalData = $xeTable;
+        const reactData = $xeTable;
+        const { keyboardConfig, mouseConfig } = props;
+        const { editStore, filterStore } = reactData;
+        const { isActivated } = internalData;
+        const mouseOpts = $xeTable.computeMouseOpts;
+        const keyboardOpts = $xeTable.computeKeyboardOpts;
         const { actived } = editStore;
         if (isActivated && !filterStore.visible) {
             if (!(actived.row || actived.column)) {
@@ -7724,7 +7785,14 @@ const tableMethods = {
     },
     handleGlobalCopyEvent(evnt) {
         const $xeTable = this;
-        const { isActivated, keyboardConfig, keyboardOpts, mouseConfig, mouseOpts, editStore, filterStore } = this;
+        const props = $xeTable;
+        const internalData = $xeTable;
+        const reactData = $xeTable;
+        const { keyboardConfig, mouseConfig } = props;
+        const { editStore, filterStore } = reactData;
+        const { isActivated } = internalData;
+        const mouseOpts = $xeTable.computeMouseOpts;
+        const keyboardOpts = $xeTable.computeKeyboardOpts;
         const { actived } = editStore;
         if (isActivated && !filterStore.visible) {
             if (!(actived.row || actived.column)) {
@@ -7737,7 +7805,14 @@ const tableMethods = {
     },
     handleGlobalCutEvent(evnt) {
         const $xeTable = this;
-        const { isActivated, keyboardConfig, keyboardOpts, mouseConfig, mouseOpts, editStore, filterStore } = this;
+        const props = $xeTable;
+        const internalData = $xeTable;
+        const reactData = $xeTable;
+        const { keyboardConfig, mouseConfig } = props;
+        const { editStore, filterStore } = reactData;
+        const { isActivated } = internalData;
+        const mouseOpts = $xeTable.computeMouseOpts;
+        const keyboardOpts = $xeTable.computeKeyboardOpts;
         const { actived } = editStore;
         if (isActivated && !filterStore.visible) {
             if (!(actived.row || actived.column)) {
@@ -12296,9 +12371,9 @@ const tableMethods = {
             return updateStyle($xeTable);
         });
     },
-    updateScrollYStatus() {
+    updateScrollYStatus(fullData) {
         const $xeTable = this;
-        return updateScrollYStatus($xeTable);
+        return updateScrollYStatus($xeTable, fullData);
     },
     /**
      * 如果有滚动条，则滚动到对应的位置

package/es/table/src/util.js

@@ -711,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) {
@@ -724,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.5";
+export const version = "3.21.7";
 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.5"}`;
+const version = `table v${"3.21.7"}`;
 export const warnLog = log.create('warn', version);
 export const errLog = log.create('error', version);