vxe-table 3.22.2 → 3.22.4

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

@@ -2,7 +2,7 @@ import XEUtils from 'xe-utils';
 import { VxeUI } from '../../../ui';
 import { isColumnInfo, getCellValue, createHandleGetRowId } from '../../src/util';
 import { parseFile, formatText, eqEmptyValue } from '../../../ui/src/utils';
-import { hasClass } from '../../../ui/src/dom';
+import { hasClass, toCssUnit } from '../../../ui/src/dom';
 import { createHtmlPage, getExportBlobByContent } from './util';
 import { createComponentLog } from '../../../ui/src/log';
 const { warnLog, errLog } = createComponentLog('table');
@@ -473,6 +473,9 @@ function hasEllipsis($xeTable, column, property, allColumnOverflow) {
     }
     return isEllipsis;
 }
+function getCustomColKey(conf) {
+    return `${conf.field || ''}:${conf.type || ''}`;
+}
 function toHtml($xeTable, opts, columns, datas) {
     const props = $xeTable;
     const reactData = $xeTable;
@@ -481,17 +484,98 @@ function toHtml($xeTable, opts, columns, datas) {
     const { isAllSelected, isIndeterminate } = reactData;
     const { mergeBodyCellMaps, mergeFooterCellMaps } = internalData;
     const treeOpts = $xeTable.computeTreeOpts;
-    const { print: isPrint, isHeader, isFooter, isColgroup, isMerge, colgroups, original } = opts;
+    const { print: isPrint, widthMode, isHeader, isFooter, isColgroup, isMerge, colgroups, _columnConfs, original } = opts;
+    const isAutoWidth = widthMode === 'auto';
+    const isScaleWidth = widthMode === 'scale';
+    const isDefaultWidth = !isAutoWidth && !isScaleWidth;
+    const customWidthMaps = {};
+    if (_columnConfs) {
+        _columnConfs.forEach(conf => {
+            if (!isColumnInfo(conf)) {
+                if ((conf.field || conf.type) && conf.width) {
+                    customWidthMaps[getCustomColKey(conf)] = conf.width;
+                }
+            }
+        });
+    }
+    // 计算宽度
+    const colWidthMaps = {};
+    const printWidthMaps = {};
+    if (isPrint) {
+        let tableWidth = 0;
+        columns.forEach(column => {
+            tableWidth += column.renderWidth;
+        });
+        if (colgroups) {
+            colgroups.forEach((cols) => {
+                cols.forEach((column) => {
+                    if (!column.childNodes || !column.childNodes.length) {
+                        return;
+                    }
+                    let childWidth = 0;
+                    let countChild = 0;
+                    XEUtils.eachTree([column], item => {
+                        if (!item.childNodes || !column.childNodes.length) {
+                            countChild++;
+                        }
+                        const ptWidth = printWidthMaps[item.id];
+                        childWidth += ptWidth || 0;
+                    }, { children: 'childNodes' });
+                    const colWidth = childWidth - countChild;
+                    colWidthMaps[column.id] = colWidth;
+                    printWidthMaps[column.id] = XEUtils.floor(colWidth / tableWidth * 180, 2);
+                });
+            });
+        }
+        columns.forEach(column => {
+            const colWidth = column.renderWidth;
+            if (column.width) {
+                colWidthMaps[column.id] = colWidth;
+            }
+            printWidthMaps[column.id] = XEUtils.floor(colWidth / tableWidth * 180, 2);
+        });
+    }
+    const getHeaderWidthStyle = (column) => {
+        const cmColKey = getCustomColKey(column);
+        const cmWidthMaps = customWidthMaps[cmColKey];
+        if (cmWidthMaps) {
+            return 'width:' + toCssUnit(cmWidthMaps);
+        }
+        if (isAutoWidth) {
+            return '';
+        }
+        if (isScaleWidth) {
+            return printWidthMaps[column.id] ? ('width:' + printWidthMaps[column.id] + 'mm') : '';
+        }
+        return colWidthMaps[column.id] ? ('width:' + toCssUnit(colWidthMaps[column.id])) : '';
+    };
+    const getCellWidthStyle = (column) => {
+        const cmColKey = getCustomColKey(column);
+        const cmWidthMaps = customWidthMaps[cmColKey];
+        if (cmWidthMaps) {
+            return 'width:' + toCssUnit(cmWidthMaps);
+        }
+        if (isAutoWidth || isDefaultWidth) {
+            return '';
+        }
+        if (isScaleWidth) {
+            return printWidthMaps[column.id] ? ('width:' + printWidthMaps[column.id] + 'mm') : '';
+        }
+        return colWidthMaps[column.id] ? ('width:' + toCssUnit(colWidthMaps[column.id])) : '';
+    };
     const allCls = 'check-all';
     const clss = [
         'vxe-table',
         `border--${toTableBorder(border)}`,
         isPrint ? 'is--print' : '',
+        isAutoWidth ? 'is--auto-width' : '',
+        isScaleWidth ? 'is--scale-width' : '',
+        isDefaultWidth ? 'is--default-width' : '',
         isHeader ? 'is--header' : ''
     ].filter(cls => cls);
     const tables = [
         `<table class="${clss.join(' ')}" border="0" cellspacing="0" cellpadding="0">`,
-        `<colgroup>${columns.map(column => `<col style="width:${column.renderWidth}px">`).join('')}</colgroup>`
+        `<colgroup>${columns.map((column) => `<col style="${getHeaderWidthStyle(column)}">`).join('')}</colgroup>`
     ];
     if (isHeader) {
         tables.push('<thead>');
@@ -501,22 +585,13 @@ function toHtml($xeTable, opts, columns, datas) {
                     const headAlign = column.headerAlign || column.align || allHeaderAlign || allAlign;
                     const classNames = hasEllipsis($xeTable, column, 'showHeaderOverflow', allColumnHeaderOverflow) ? ['col--ellipsis'] : [];
                     const cellTitle = getHeaderTitle($xeTable, opts, column);
-                    let childWidth = 0;
-                    let countChild = 0;
-                    XEUtils.eachTree([column], item => {
-                        if (!item.childNodes || !column.childNodes.length) {
-                            countChild++;
-                        }
-                        childWidth += item.renderWidth;
-                    }, { children: 'childNodes' });
-                    const cellWidth = childWidth - countChild;
                     if (headAlign) {
                         classNames.push(`col--${headAlign}`);
                     }
                     if (column.type === 'checkbox') {
-                        return `<th class="${classNames.join(' ')}" colspan="${column._colSpan}" rowspan="${column._rowSpan}"><div ${isPrint ? '' : `style="width: ${cellWidth}px"`}><input type="checkbox" class="${allCls}" ${isAllSelected ? 'checked' : ''}><span>${cellTitle}</span></div></th>`;
+                        return `<th class="${classNames.join(' ')}" colspan="${column._colSpan}" rowspan="${column._rowSpan}"><div style="${getCellWidthStyle(column)}"><input type="checkbox" class="${allCls}" ${isAllSelected ? 'checked' : ''}><span>${cellTitle}</span></div></th>`;
                     }
-                    return `<th class="${classNames.join(' ')}" colspan="${column._colSpan}" rowspan="${column._rowSpan}" title="${cellTitle}"><div ${isPrint ? '' : `style="width: ${cellWidth}px"`}><span>${formatText(cellTitle, true)}</span></div></th>`;
+                    return `<th class="${classNames.join(' ')}" colspan="${column._colSpan}" rowspan="${column._rowSpan}" title="${cellTitle}"><div style="${getCellWidthStyle(column)}"><span>${formatText(cellTitle, true)}</span></div></th>`;
                 }).join('')}</tr>`);
             });
         }
@@ -529,9 +604,9 @@ function toHtml($xeTable, opts, columns, datas) {
                     classNames.push(`col--${headAlign}`);
                 }
                 if (column.type === 'checkbox') {
-                    return `<th class="${classNames.join(' ')}"><div ${isPrint ? '' : `style="width: ${column.renderWidth}px"`}><input type="checkbox" class="${allCls}" ${isAllSelected ? 'checked' : ''}><span>${cellTitle}</span></div></th>`;
+                    return `<th class="${classNames.join(' ')}"><div style="${getCellWidthStyle(column)}"><input type="checkbox" class="${allCls}" ${isAllSelected ? 'checked' : ''}><span>${cellTitle}</span></div></th>`;
                 }
-                return `<th class="${classNames.join(' ')}" title="${cellTitle}"><div ${isPrint ? '' : `style="width: ${column.renderWidth}px"`}><span>${formatText(cellTitle, true)}</span></div></th>`;
+                return `<th class="${classNames.join(' ')}" title="${cellTitle}"><div style="${getCellWidthStyle(column)}"><span>${formatText(cellTitle, true)}</span></div></th>`;
             }).join('')}</tr>`);
         }
         tables.push('</thead>');
@@ -554,20 +629,20 @@ function toHtml($xeTable, opts, columns, datas) {
                         }
                         classNames.push('vxe-table--tree-node');
                         if (column.type === 'radio') {
-                            return `<td class="${classNames.join(' ')}" title="${cellValue}"><div ${isPrint ? '' : `style="width: ${column.renderWidth}px"`}><div class="vxe-table--tree-node-wrapper" style="padding-left: ${item._level * treeOpts.indent}px"><div class="vxe-table--tree-icon-wrapper">${treeIcon}</div><div class="vxe-table--tree-cell"><input type="radio" name="radio_${id}" ${item._radioDisabled ? 'disabled ' : ''}${getBooleanValue(cellValue) ? 'checked' : ''}><span>${item._radioLabel}</span></div></div></div></td>`;
+                            return `<td class="${classNames.join(' ')}" title="${cellValue}"><div style="${getCellWidthStyle(column)}"><div class="vxe-table--tree-node-wrapper" style="padding-left: ${item._level * treeOpts.indent}px"><div class="vxe-table--tree-icon-wrapper">${treeIcon}</div><div class="vxe-table--tree-cell"><input type="radio" name="radio_${id}" ${item._radioDisabled ? 'disabled ' : ''}${getBooleanValue(cellValue) ? 'checked' : ''}><span>${item._radioLabel}</span></div></div></div></td>`;
                         }
                         else if (column.type === 'checkbox') {
-                            return `<td class="${classNames.join(' ')}" title="${cellValue}"><div ${isPrint ? '' : `style="width: ${column.renderWidth}px"`}><div class="vxe-table--tree-node-wrapper" style="padding-left: ${item._level * treeOpts.indent}px"><div class="vxe-table--tree-icon-wrapper">${treeIcon}</div><div class="vxe-table--tree-cell"><input type="checkbox" ${item._checkboxDisabled ? 'disabled ' : ''}${getBooleanValue(cellValue) ? 'checked' : ''}><span>${item._checkboxLabel}</span></div></div></div></td>`;
+                            return `<td class="${classNames.join(' ')}" title="${cellValue}"><div style="${getCellWidthStyle(column)}"><div class="vxe-table--tree-node-wrapper" style="padding-left: ${item._level * treeOpts.indent}px"><div class="vxe-table--tree-icon-wrapper">${treeIcon}</div><div class="vxe-table--tree-cell"><input type="checkbox" ${item._checkboxDisabled ? 'disabled ' : ''}${getBooleanValue(cellValue) ? 'checked' : ''}><span>${item._checkboxLabel}</span></div></div></div></td>`;
                         }
-                        return `<td class="${classNames.join(' ')}" title="${cellValue}"><div ${isPrint ? '' : `style="width: ${column.renderWidth}px"`}><div class="vxe-table--tree-node-wrapper" style="padding-left: ${item._level * treeOpts.indent}px"><div class="vxe-table--tree-icon-wrapper">${treeIcon}</div><div class="vxe-table--tree-cell">${cellValue}</div></div></div></td>`;
+                        return `<td class="${classNames.join(' ')}" title="${cellValue}"><div style="${getCellWidthStyle(column)}"><div class="vxe-table--tree-node-wrapper" style="padding-left: ${item._level * treeOpts.indent}px"><div class="vxe-table--tree-icon-wrapper">${treeIcon}</div><div class="vxe-table--tree-cell">${cellValue}</div></div></div></td>`;
                     }
                     if (column.type === 'radio') {
-                        return `<td class="${classNames.join(' ')}"><div ${isPrint ? '' : `style="width: ${column.renderWidth}px"`}><input type="radio" name="radio_${id}" ${item._radioDisabled ? 'disabled ' : ''}${getBooleanValue(cellValue) ? 'checked' : ''}><span>${item._radioLabel}</span></div></td>`;
+                        return `<td class="${classNames.join(' ')}"><div style="${getCellWidthStyle(column)}"><input type="radio" name="radio_${id}" ${item._radioDisabled ? 'disabled ' : ''}${getBooleanValue(cellValue) ? 'checked' : ''}><span>${item._radioLabel}</span></div></td>`;
                     }
                     else if (column.type === 'checkbox') {
-                        return `<td class="${classNames.join(' ')}"><div ${isPrint ? '' : `style="width: ${column.renderWidth}px"`}><input type="checkbox" ${item._checkboxDisabled ? 'disabled ' : ''}${getBooleanValue(cellValue) ? 'checked' : ''}><span>${item._checkboxLabel}</span></div></td>`;
+                        return `<td class="${classNames.join(' ')}"><div style="${getCellWidthStyle(column)}"><input type="checkbox" ${item._checkboxDisabled ? 'disabled ' : ''}${getBooleanValue(cellValue) ? 'checked' : ''}><span>${item._checkboxLabel}</span></div></td>`;
                     }
-                    return `<td class="${classNames.join(' ')}" title="${cellValue}"><div ${isPrint ? '' : `style="width: ${column.renderWidth}px"`}>${formatText(cellValue, true)}</div></td>`;
+                    return `<td class="${classNames.join(' ')}" title="${cellValue}"><div style="${getCellWidthStyle(column)}">${formatText(cellValue, true)}</div></td>`;
                 }).join('') + '</tr>');
             });
         }
@@ -601,12 +676,12 @@ function toHtml($xeTable, opts, columns, datas) {
                         classNames.push(`col--${cellAlign}`);
                     }
                     if (column.type === 'radio') {
-                        return `<td class="${classNames.join(' ')}" rowspan="${rowSpan}" colspan="${colSpan}"><div ${isPrint ? '' : `style="width: ${column.renderWidth}px"`}><input type="radio" name="radio_${id}" ${item._radioDisabled ? 'disabled ' : ''}${getBooleanValue(cellValue) ? 'checked' : ''}><span>${item._radioLabel}</span></div></td>`;
+                        return `<td class="${classNames.join(' ')}" rowspan="${rowSpan}" colspan="${colSpan}"><div style="${getCellWidthStyle(column)}"><input type="radio" name="radio_${id}" ${item._radioDisabled ? 'disabled ' : ''}${getBooleanValue(cellValue) ? 'checked' : ''}><span>${item._radioLabel}</span></div></td>`;
                     }
                     else if (column.type === 'checkbox') {
-                        return `<td class="${classNames.join(' ')}" rowspan="${rowSpan}" colspan="${colSpan}"><div ${isPrint ? '' : `style="width: ${column.renderWidth}px"`}><input type="checkbox" ${item._checkboxDisabled ? 'disabled ' : ''}${getBooleanValue(cellValue) ? 'checked' : ''}><span>${item._checkboxLabel}</span></div></td>`;
+                        return `<td class="${classNames.join(' ')}" rowspan="${rowSpan}" colspan="${colSpan}"><div style="${getCellWidthStyle(column)}"><input type="checkbox" ${item._checkboxDisabled ? 'disabled ' : ''}${getBooleanValue(cellValue) ? 'checked' : ''}><span>${item._checkboxLabel}</span></div></td>`;
                     }
-                    return `<td class="${classNames.join(' ')}" rowspan="${rowSpan}" colspan="${colSpan}" title="${cellValue}"><div ${isPrint ? '' : `style="width: ${column.renderWidth}px"`}>${formatText(cellValue, true)}</div></td>`;
+                    return `<td class="${classNames.join(' ')}" rowspan="${rowSpan}" colspan="${colSpan}" title="${cellValue}"><div style="${getCellWidthStyle(column)}">${formatText(cellValue, true)}</div></td>`;
                 }).join('') + '</tr>');
             });
         }
@@ -644,7 +719,7 @@ function toHtml($xeTable, opts, columns, datas) {
                     if (footAlign) {
                         classNames.push(`col--${footAlign}`);
                     }
-                    return `<td class="${classNames.join(' ')}" rowspan="${rowSpan}" colspan="${colSpan}" title="${cellValue}"><div ${isPrint ? '' : `style="width: ${column.renderWidth}px"`}>${formatText(cellValue, true)}</div></td>`;
+                    return `<td class="${classNames.join(' ')}" rowspan="${rowSpan}" colspan="${colSpan}" title="${cellValue}"><div style="${getCellWidthStyle(column)}">${formatText(cellValue, true)}</div></td>`;
                 }).join('')}</tr>`);
             });
             tables.push('</tfoot>');
@@ -653,7 +728,7 @@ function toHtml($xeTable, opts, columns, datas) {
     // 是否半选状态
     const script = !isAllSelected && isIndeterminate ? `<script>(function(){var a=document.querySelector(".${allCls}");if(a){a.indeterminate=true}})()</script>` : '';
     tables.push('</table>', script);
-    return isPrint ? tables.join('') : createHtmlPage(opts, tables.join(''));
+    return isAutoWidth ? tables.join('') : createHtmlPage(opts, tables.join(''));
 }
 function toXML($xeTable, opts, columns, datas) {
     const reactData = $xeTable;
@@ -1216,6 +1291,9 @@ function handleExportAndPrint($xeTable, options, isPrint) {
     if (!typeList.some(item => item.value === type)) {
         exportParams.type = typeList[0].value;
     }
+    if (!exportParams.widthMode) {
+        exportParams.widthMode = '';
+    }
     initStore.export = true;
     return $xeTable.$nextTick();
 }
@@ -1355,7 +1433,7 @@ export default {
                     return isChecked;
                 }, { children: 'children', mapChildren: 'childNodes', original: true });
             }
-            const handleOptions = Object.assign({}, opts, { filename: '', sheetName: '' });
+            const handleOptions = Object.assign({}, opts, { filename: '', sheetName: '', _columnConfs: columns });
             // 如果设置源数据，则默认导出设置了字段的列
             if (!isCustomCol && !columnFilterMethod) {
                 columnFilterMethod = ({ column }) => {

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

@@ -1,5 +1,5 @@
 // 默认导出或打印的 HTML 样式
-const defaultHtmlStyle = 'body{margin:0;padding: 0 1px;color:#333333;font-size:14px;font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu}body *{-webkit-box-sizing:border-box;box-sizing:border-box}.vxe-table{border-collapse:collapse;text-align:left;border-spacing:0}.vxe-table:not(.is--print){table-layout:fixed}.vxe-table,.vxe-table th,.vxe-table td,.vxe-table td{border-color:#D0D0D0;border-style:solid;border-width:0}.vxe-table.is--print{width:100%}.border--default,.border--full,.border--outer{border-top-width:1px}.border--default,.border--full,.border--outer{border-left-width:1px}.border--outer,.border--default th,.border--default td,.border--full th,.border--full td,.border--outer th,.border--inner th,.border--inner td{border-bottom-width:1px}.border--default,.border--outer,.border--full th,.border--full td{border-right-width:1px}.border--default th,.border--full th,.border--outer th{background-color:#f8f8f9}.vxe-table td>div,.vxe-table th>div{padding:.5em .4em}.col--center{text-align:center}.col--right{text-align:right}.vxe-table:not(.is--print) .col--ellipsis>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all}.vxe-table--tree-node{text-align:left}.vxe-table--tree-node-wrapper{position:relative}.vxe-table--tree-icon-wrapper{position:absolute;top:50%;width:1em;height:1em;text-align:center;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.vxe-table--tree-unfold-icon,.vxe-table--tree-fold-icon{position:absolute;width:0;height:0;border-style:solid;border-width:.5em;border-right-color:transparent;border-bottom-color:transparent}.vxe-table--tree-unfold-icon{left:.3em;top:0;border-left-color:#939599;border-top-color:transparent}.vxe-table--tree-fold-icon{left:0;top:.3em;border-left-color:transparent;border-top-color:#939599}.vxe-table--tree-cell{display:block;padding-left:1.5em}.vxe-table input[type="checkbox"]{margin:0}.vxe-table input[type="checkbox"],.vxe-table input[type="radio"],.vxe-table input[type="checkbox"]+span,.vxe-table input[type="radio"]+span{vertical-align:middle;padding-left:0.4em}';
+const defaultHtmlStyle = 'body{padding:0;color:rgba(0,0,0,0.7);font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu;}body *{-webkit-box-sizing:border-box;box-sizing:border-box;}.vxe-table{border-collapse:collapse;text-align:left;border-spacing:0;}.vxe-table.is--default-width,.vxe-table.is--auto-width{width:100%;}.vxe-table.is--scale-width{table-layout:fixed;}.vxe-table,.vxe-table th,.vxe-table td,.vxe-table td{word-break:break-all;border-color:#D0D0D0;border-style:solid;border-width:0;}.border--default,.border--full,.border--outer{border-top-width:1px;}.border--default,.border--full,.border--outer{border-left-width:1px}.border--outer,.border--default th,.border--default td,.border--full th,.border--full td,.border--outer th,.border--inner th,.border--inner td{border-bottom-width:1px;}.border--default,.border--outer,.border--full th,.border--full td{border-right-width:1px;}.border--default th,.border--full th,.border--outer th{background-color:#f8f8f9;}.vxe-table td>div,.vxe-table th>div{padding:0.5em 0.4em;}.col--center{text-align:center;}.col--right{text-align:right;}.vxe-table .col--ellipsis>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all;}.vxe-table--tree-node{text-align:left;}.vxe-table--tree-node-wrapper{position:relative;}.vxe-table--tree-icon-wrapper{position:absolute;top:50%;width:1em;height:1em;text-align:center;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;}.vxe-table--tree-unfold-icon,.vxe-table--tree-fold-icon{position:absolute;width:0;height:0;border-style:solid;border-width:0.5em;border-right-color:transparent;border-bottom-color:transparent;}.vxe-table--tree-unfold-icon{left:.3em;top:0;border-left-color:#939599;border-top-color:transparent;}.vxe-table--tree-fold-icon{left:0;top:.3em;border-left-color:transparent;border-top-color:#939599;}.vxe-table--tree-cell{display:block;padding-left:1.5em;}.vxe-table input[type="checkbox"]{margin:0;}.vxe-table input[type="checkbox"],.vxe-table input[type="radio"],.vxe-table input[type="checkbox"]+span,.vxe-table input[type="radio"]+span{vertical-align:middle;padding-left:0.4em}';
 export function getExportBlobByContent(content, options) {
     return new Blob([content], { type: `text/${options.type};charset=utf-8;` });
 }

package/es/table/src/body.js

@@ -122,7 +122,7 @@ function renderTdColumn(h, $xeTable, seq, rowid, fixedType, isOptimizeMode, rowL
     const cellOverflow = XEUtils.eqNull(showOverflow) ? allShowOverflow : showOverflow;
     const showEllipsis = cellOverflow === 'ellipsis';
     const showTitle = cellOverflow === 'title';
-    const showTooltip = cellOverflow === true || cellOverflow === 'tooltip';
+    const showTooltip = cellOverflow === true ? tooltipOpts.mode === 'tooltip' : cellOverflow === 'tooltip';
     const hasEllipsis = isAllOverflow || showTitle || showTooltip || showEllipsis;
     const showResizable = (XEUtils.isBoolean(column.resizable) ? column.resizable : (columnOpts.resizable || allResizable));
     const isCsHeight = !!customCellHeight;

package/es/table/src/footer.js

@@ -41,7 +41,7 @@ function renderRows(h, _vm, isOptimizeMode, tableColumn, footerTableData, row, $
         const footAlign = footerAlign || (compConf ? compConf.tableFooterCellAlign : '') || allFooterAlign || align || (compConf ? compConf.tableCellAlign : '') || allAlign;
         const showEllipsis = footOverflow === 'ellipsis';
         const showTitle = footOverflow === 'title';
-        const showTooltip = footOverflow === true || footOverflow === 'tooltip';
+        const showTooltip = footOverflow === true ? footerTooltipOpts.mode === 'tooltip' : footOverflow === 'tooltip';
         const hasEllipsis = showTitle || showTooltip || showEllipsis;
         const showResizable = (XEUtils.isBoolean(column.resizable) ? column.resizable : (columnOpts.resizable || allResizable));
         const attrs = { colid };

package/es/table/src/header.js

@@ -22,6 +22,7 @@ function renderRows(h, _vm, isGroup, isOptimizeMode, headerGroups, _rowIndex, co
     const virtualXOpts = $xeTable.computeVirtualXOpts;
     const columnOpts = $xeTable.computeColumnOpts;
     const columnDragOpts = $xeTable.computeColumnDragOpts;
+    const headerTooltipOpts = $xeTable.computeHeaderTooltipOpts;
     const cellOpts = $xeTable.computeCellOpts;
     const defaultRowHeight = $xeTable.computeDefaultRowHeight;
     const headerCellOpts = $xeTable.computeHeaderCellOpts;
@@ -38,11 +39,11 @@ function renderRows(h, _vm, isGroup, isOptimizeMode, headerGroups, _rowIndex, co
         const isColGroup = column.children && column.children.length;
         const fixedHiddenColumn = overflowX && !isColGroup && (fixedType ? column.fixed !== fixedType : !!column.fixed);
         const isPadding = XEUtils.isBoolean(headerCellOpts.padding) ? headerCellOpts.padding : cellOpts.padding;
-        const headOverflow = XEUtils.isUndefined(showHeaderOverflow) || XEUtils.isNull(showHeaderOverflow) ? allColumnHeaderOverflow : showHeaderOverflow;
+        const headOverflow = XEUtils.eqNull(showHeaderOverflow) ? allColumnHeaderOverflow : showHeaderOverflow;
         const headAlign = headerAlign || (compConf ? compConf.tableHeaderCellAlign : '') || allHeaderAlign || align || (compConf ? compConf.tableCellAlign : '') || allAlign;
         const showEllipsis = headOverflow === 'ellipsis';
         const showTitle = headOverflow === 'title';
-        const showTooltip = headOverflow === true || headOverflow === 'tooltip';
+        const showTooltip = headOverflow === true ? headerTooltipOpts.mode === 'tooltip' : headOverflow === 'tooltip';
         const hasEllipsis = showTitle || showTooltip || showEllipsis;
         let hasFilter = false;
         let firstFilterOption = null;
@@ -214,6 +215,7 @@ function renderFilterRows(h, _vm, isOptimizeMode, cols) {
     const { showHeaderOverflow: allColumnHeaderOverflow, headerAlign: allHeaderAlign, align: allAlign } = tableProps;
     const { currentColumn, overflowX } = tableReactData;
     const { fullColumnIdData } = tableInternalData;
+    const headerTooltipOpts = $xeTable.computeHeaderTooltipOpts;
     const cellOpts = $xeTable.computeCellOpts;
     const defaultRowHeight = $xeTable.computeDefaultRowHeight;
     const headerCellOpts = $xeTable.computeHeaderCellOpts;
@@ -235,7 +237,7 @@ function renderFilterRows(h, _vm, isOptimizeMode, cols) {
         const headAlign = headerAlign || (compConf ? compConf.tableHeaderCellAlign : '') || allHeaderAlign || align || (compConf ? compConf.tableCellAlign : '') || allAlign;
         const showEllipsis = headOverflow === 'ellipsis';
         const showTitle = headOverflow === 'title';
-        const showTooltip = headOverflow === true || headOverflow === 'tooltip';
+        const showTooltip = headOverflow === true ? headerTooltipOpts.mode === 'tooltip' : headOverflow === 'tooltip';
         const hasEllipsis = showTitle || showTooltip || showEllipsis;
         let hasFilter = false;
         let firstFilterOption = null;

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, getColReMaxWidth, createHandleUpdateRowId, createHandleGetRowId, getRefElem, getCellRestHeight, getLastChildColumn, getRowMaxHeight, handleCustomStoreConfig } 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, getRowMaxHeight, handleCustomStoreConfig, encodeRowid } from './util';
 import { getSlotVNs } from '../../ui/src/vn';
 import { moveRowAnimateToTb, clearRowAnimate, moveColAnimateToLr, clearColAnimate } from '../../ui/src/anime';
 import { createComponentLog } from '../../ui/src/log';
@@ -1320,7 +1320,8 @@ function handleDefaultSelectionChecked($xeTable) {
         }
         else if (checkRowKeys) {
             const defSelection = [];
-            checkRowKeys.forEach((rowid) => {
+            checkRowKeys.forEach((rowKey) => {
+                const rowid = encodeRowid(rowKey);
                 if (fullDataRowIdData[rowid]) {
                     defSelection.push(fullDataRowIdData[rowid].row);
                 }
@@ -1339,7 +1340,8 @@ function handleDefaultRadioChecked($xeTable) {
     if (radioConfig) {
         const { fullDataRowIdData } = internalData;
         const radioOpts = $xeTable.computeRadioOpts;
-        const { checkRowKey: rowid, reserve } = radioOpts;
+        const { checkRowKey: rowKey, reserve } = radioOpts;
+        const rowid = rowKey ? encodeRowid(rowKey) : null;
         if (rowid) {
             if (fullDataRowIdData[rowid]) {
                 handleCheckedRadioRow($xeTable, fullDataRowIdData[rowid].row, true);
@@ -1367,7 +1369,8 @@ function handleDefaultRowExpand($xeTable) {
         }
         else if (expandRowKeys) {
             const defExpandeds = [];
-            expandRowKeys.forEach((rowid) => {
+            expandRowKeys.forEach((rowKey) => {
+                const rowid = encodeRowid(rowKey);
                 if (fullDataRowIdData[rowid]) {
                     defExpandeds.push(fullDataRowIdData[rowid].row);
                 }
@@ -1637,7 +1640,8 @@ const handleDefaultTreeExpand = ($xeTable) => {
         }
         else if (expandRowKeys) {
             const defExpandeds = [];
-            expandRowKeys.forEach((rowid) => {
+            expandRowKeys.forEach((rowKey) => {
+                const rowid = encodeRowid(rowKey);
                 const rowRest = fullAllDataRowIdData[rowid];
                 if (rowRest) {
                     defExpandeds.push(rowRest.row);
@@ -8408,7 +8412,7 @@ const tableMethods = {
         }
         return handleCheckedCheckboxRow($xeTable, rows, checked, true);
     },
-    setCheckboxRowKey(keys, checked) {
+    setCheckboxRowByKey(keys, checked) {
         const $xeTable = this;
         const internalData = $xeTable;
         const { fullAllDataRowIdData } = internalData;
@@ -8416,7 +8420,8 @@ const tableMethods = {
             keys = [keys];
         }
         const rows = [];
-        keys.forEach((rowid) => {
+        keys.forEach((rowKey) => {
+            const rowid = encodeRowid(rowKey);
             const rowRest = fullAllDataRowIdData[rowid];
             if (rowRest) {
                 rows.push(rowRest.row);
@@ -8424,6 +8429,10 @@ const tableMethods = {
         });
         return handleCheckedCheckboxRow($xeTable, rows, checked, true);
     },
+    setCheckboxRowKey(keys, checked) {
+        const $xeTable = this;
+        return $xeTable.setCheckboxRowByKey(keys, checked);
+    },
     isCheckedByCheckboxRow(row) {
         const $xeTable = this;
         const reactData = $xeTable;
@@ -8437,7 +8446,7 @@ const tableMethods = {
         }
         return !!updateCheckboxFlag && !!selectCheckboxMaps[getRowid($xeTable, row)];
     },
-    isCheckedByCheckboxRowKey(rowid) {
+    isCheckedByCheckboxRowKey(rowKey) {
         const $xeTable = this;
         const reactData = $xeTable;
         const internalData = $xeTable;
@@ -8445,6 +8454,7 @@ const tableMethods = {
         const { fullAllDataRowIdData, selectCheckboxMaps } = internalData;
         const checkboxOpts = $xeTable.computeCheckboxOpts;
         const { checkField } = checkboxOpts;
+        const rowid = encodeRowid(rowKey);
         if (checkField) {
             const rowRest = fullAllDataRowIdData[rowid];
             if (rowRest) {
@@ -8460,10 +8470,11 @@ const tableMethods = {
         const { treeIndeterminateRowMaps } = internalData;
         return !!treeIndeterminateRowMaps[getRowid($xeTable, row)] && !$xeTable.isCheckedByCheckboxRow(row);
     },
-    isIndeterminateByCheckboxRowKey(rowid) {
+    isIndeterminateByCheckboxRowKey(rowKey) {
         const $xeTable = this;
         const internalData = $xeTable;
         const { treeIndeterminateRowMaps } = internalData;
+        const rowid = encodeRowid(rowKey);
         return !!treeIndeterminateRowMaps[rowid] && !$xeTable.isCheckedByCheckboxRowKey(rowid);
     },
     /**
@@ -9380,16 +9391,21 @@ const tableMethods = {
      * 用于单选行，设置某一行为选中状态
      * @param key 行主键
      */
-    setRadioRowKey(rowid) {
+    setRadioByRowKey(rowKey) {
         const $xeTable = this;
         const internalData = $xeTable;
         const { fullAllDataRowIdData } = internalData;
+        const rowid = encodeRowid(rowKey);
         const rowRest = fullAllDataRowIdData[rowid];
         if (rowRest) {
             return handleCheckedRadioRow($xeTable, rowRest.row, true);
         }
         return $xeTable.$nextTick();
     },
+    setRadioRowKey(rowKey) {
+        const $xeTable = this;
+        return $xeTable.setRadioByRowKey(rowKey);
+    },
     /**
      * 用于当前行，手动清空当前高亮的状态
      */
@@ -9412,8 +9428,10 @@ const tableMethods = {
      * 用于单选行，手动清空用户的选择
      */
     clearRadioRow() {
-        this.selectRadioRow = null;
-        return this.$nextTick();
+        const $xeTable = this;
+        const reactData = $xeTable;
+        reactData.selectRadioRow = null;
+        return $xeTable.$nextTick();
     },
     /**
      * 用于当前行，获取当前行的数据

package/es/table/src/table.js

@@ -1913,35 +1913,35 @@ export default {
             // 使用已安装的组件，如果未安装则不渲染
             const VxeUILoadingComponent = VxeUI.getComponent('VxeLoading');
             const VxeUITooltipComponent = VxeUI.getComponent('VxeTooltip');
+            const { showOverflow, showHeaderOverflow, showFooterOverflow } = props;
+            const tooltipOpts = $xeTable.computeTooltipOpts;
+            const headerTooltipOpts = $xeTable.computeHeaderTooltipOpts;
+            const footerTooltipOpts = $xeTable.computeFooterTooltipOpts;
             if (props.loading) {
                 if (!VxeUILoadingComponent && !this.$scopedSlots.loading) {
-                    errLog('vxe.error.errProp', ['loading=true', 'loading=false | <template #loading>...</template>']);
                     errLog('vxe.error.reqComp', ['vxe-loading']);
+                    errLog('vxe.error.errProp', ['loading=true', 'loading=false | <template #loading>...</template>']);
                 }
             }
-            if ((props.showOverflow === true || props.showOverflow === 'tooltip') ||
-                (props.showHeaderOverflow === true || props.showHeaderOverflow === 'tooltip') ||
-                (props.showFooterOverflow === true || props.showFooterOverflow === 'tooltip')) {
-                if (!VxeUITooltipComponent) {
-                    if (props.showOverflow === true) {
-                        errLog('vxe.error.errProp', ['show-overflow=true', 'show-overflow=title']);
-                    }
-                    if (props.showOverflow === 'tooltip') {
-                        errLog('vxe.error.errProp', ['show-overflow=tooltip', 'show-overflow=title']);
-                    }
-                    if (props.showHeaderOverflow === true) {
-                        errLog('vxe.error.errProp', ['show-header-overflow=true', 'show-header-overflow=title']);
-                    }
-                    if (props.showHeaderOverflow === 'tooltip') {
-                        errLog('vxe.error.errProp', ['show-header-overflow=tooltip', 'show-header-overflow=title']);
-                    }
-                    if (props.showFooterOverflow === true) {
-                        errLog('vxe.error.errProp', ['show-footer-overflow=true', 'show-footer-overflow=title']);
-                    }
-                    if (props.showFooterOverflow === 'tooltip') {
-                        errLog('vxe.error.errProp', ['show-footer-overflow=tooltip', 'show-footer-overflow=title']);
-                    }
-                    errLog('vxe.error.reqComp', ['vxe-tooltip']);
+            if (!VxeUITooltipComponent) {
+                errLog('vxe.error.reqComp', ['vxe-tooltip']);
+                if (showOverflow === 'tooltip') {
+                    errLog('vxe.error.errProp', ['show-overflow=' + showOverflow, 'show-overflow=false,title,ellipsis']);
+                }
+                if (showOverflow === true && tooltipOpts.mode === 'tooltip') {
+                    errLog('vxe.error.notSupportProp', ['show-overflow=' + showOverflow, 'tooltip-config.mode=tooltip', 'tooltip-config.mode=title,ellipsis']);
+                }
+                if (showHeaderOverflow === 'tooltip') {
+                    errLog('vxe.error.errProp', ['show-header-overflow=' + showHeaderOverflow, 'show-header-overflow=false,title,ellipsis']);
+                }
+                if (showHeaderOverflow === true && headerTooltipOpts.mode === 'tooltip') {
+                    errLog('vxe.error.notSupportProp', ['show-header-overflow=' + showHeaderOverflow, 'header-tooltip-config.mode=tooltip', 'header-tooltip-config.mode=title,ellipsis']);
+                }
+                if (showFooterOverflow === 'tooltip') {
+                    errLog('vxe.error.errProp', ['show-footer-overflow=' + showFooterOverflow, 'show-footer-overflow=false,title,ellipsis']);
+                }
+                if (showFooterOverflow === true && footerTooltipOpts.mode === 'tooltip') {
+                    errLog('vxe.error.notSupportProp', ['show-footer-overflow=' + showFooterOverflow, 'footer-tooltip-config.mode=tooltip', 'footer-tooltip-config.mode=title,ellipsis']);
                 }
             }
             if (this.autoResize) {

package/es/table/src/util.js

@@ -364,6 +364,7 @@ export function createReactData() {
         mergeBodyFlag: 1,
         mergeFootFlag: 1,
         rowHeightStore: {
+            xlarge: 54,
             large: 52,
             default: 48,
             medium: 44,

package/es/ui/index.js

@@ -1,6 +1,6 @@
 import { VxeUI } from '@vxe-ui/core';
 import { getFuncText } from './src/utils';
-export const version = "3.22.2";
+export const version = "3.22.4";
 VxeUI.version = version;
 VxeUI.tableVersion = version;
 VxeUI.setConfig({
@@ -67,6 +67,7 @@ VxeUI.setConfig({
             strict: true
         },
         tooltipConfig: {
+            mode: 'tooltip',
             enterable: true,
             defaultPlacement: 'top'
         },

package/es/ui/src/log.js

@@ -1,6 +1,6 @@
 import { VxeUI } from '@vxe-ui/core';
 const { log } = VxeUI;
-const tableVersion = `table v${"3.22.2"}`;
+const tableVersion = `table v${"3.22.4"}`;
 export function createComponentLog(name) {
     const uiVersion = VxeUI.uiVersion ? `ui v${VxeUI.uiVersion}` : '';
     const ganttVersion = VxeUI.ganttVersion ? `gantt v${VxeUI.ganttVersion}` : '';