vxe-table 4.20.1 → 4.20.3

package/es/table/module/export/export-panel.js

@@ -34,6 +34,13 @@ export default defineVxeComponent({
         const xButtonConfirm = ref();
         const xInputFilename = ref();
         const xInputSheetname = ref();
+        const computeColWidthModeOptions = computed(() => {
+            return [
+                { value: '', label: getI18n('vxe.export.wdModes.default') },
+                { value: 'auto', label: getI18n('vxe.export.wdModes.auto') },
+                { value: 'scale', label: getI18n('vxe.export.wdModes.scale') }
+            ];
+        });
         const computeCheckedAll = computed(() => {
             const { storeData } = props;
             return storeData.columns.every((column) => column.checked);
@@ -158,6 +165,7 @@ export default defineVxeComponent({
             const showSheet = computeShowSheet.value;
             const supportMerge = computeSupportMerge.value;
             const supportStyle = computeSupportStyle.value;
+            const colWidthModeOptions = computeColWidthModeOptions.value;
             // const supportGroup = computeSupportGroup.value
             const slots = defaultOptions.slots || {};
             const topSlot = slots.top;
@@ -358,6 +366,22 @@ export default defineVxeComponent({
                                                         ])
                                                     ])
                                                 ]),
+                                                isPrint
+                                                    ? h('tr', [
+                                                        h('td', getI18n('vxe.export.widthMode')),
+                                                        h('td', [
+                                                            VxeUISelectComponent
+                                                                ? h(VxeUISelectComponent, {
+                                                                    modelValue: defaultOptions.widthMode,
+                                                                    options: colWidthModeOptions,
+                                                                    'onUpdate:modelValue'(value) {
+                                                                        defaultOptions.widthMode = value;
+                                                                    }
+                                                                })
+                                                                : renderEmptyElement($xeTable)
+                                                        ])
+                                                    ])
+                                                    : renderEmptyElement($xeTable),
                                                 h('tr', [
                                                     h('td', getI18n('vxe.export.expOpts')),
                                                     parameterSlot
@@ -369,9 +393,9 @@ export default defineVxeComponent({
                                                         : h('td', [
                                                             h('div', {
                                                                 class: 'vxe-table-export--panel-option-row'
-                                                            }, [
-                                                                VxeUICheckboxComponent
-                                                                    ? h(VxeUICheckboxComponent, {
+                                                            }, VxeUICheckboxComponent
+                                                                ? [
+                                                                    h(VxeUICheckboxComponent, {
                                                                         modelValue: hasEmptyData || isHeader,
                                                                         disabled: hasEmptyData,
                                                                         title: getI18n('vxe.export.expHeaderTitle'),
@@ -379,10 +403,8 @@ export default defineVxeComponent({
                                                                         'onUpdate:modelValue'(value) {
                                                                             defaultOptions.isHeader = value;
                                                                         }
-                                                                    })
-                                                                    : renderEmptyElement($xeTable),
-                                                                VxeUICheckboxComponent
-                                                                    ? h(VxeUICheckboxComponent, {
+                                                                    }),
+                                                                    h(VxeUICheckboxComponent, {
                                                                         modelValue: defaultOptions.isFooter,
                                                                         disabled: !storeData.hasFooter,
                                                                         title: getI18n('vxe.export.expFooterTitle'),
@@ -390,10 +412,8 @@ export default defineVxeComponent({
                                                                         'onUpdate:modelValue'(value) {
                                                                             defaultOptions.isFooter = value;
                                                                         }
-                                                                    })
-                                                                    : renderEmptyElement($xeTable),
-                                                                VxeUICheckboxComponent
-                                                                    ? h(VxeUICheckboxComponent, {
+                                                                    }),
+                                                                    h(VxeUICheckboxComponent, {
                                                                         modelValue: isHeader ? defaultOptions.isTitle : false,
                                                                         disabled: !isHeader,
                                                                         title: getI18n('vxe.export.expTitleTitle'),
@@ -401,10 +421,8 @@ export default defineVxeComponent({
                                                                         'onUpdate:modelValue'(value) {
                                                                             defaultOptions.isTitle = value;
                                                                         }
-                                                                    })
-                                                                    : renderEmptyElement($xeTable),
-                                                                VxeUICheckboxComponent
-                                                                    ? h(VxeUICheckboxComponent, {
+                                                                    }),
+                                                                    h(VxeUICheckboxComponent, {
                                                                         modelValue: isHeader && hasColgroup && supportMerge ? defaultOptions.isColgroup : false,
                                                                         title: getI18n('vxe.export.expColgroupTitle'),
                                                                         disabled: !isHeader || !hasColgroup || !supportMerge,
@@ -413,13 +431,13 @@ export default defineVxeComponent({
                                                                             defaultOptions.isColgroup = value;
                                                                         }
                                                                     })
-                                                                    : renderEmptyElement($xeTable)
-                                                            ]),
+                                                                ]
+                                                                : []),
                                                             h('div', {
                                                                 class: 'vxe-table-export--panel-option-row'
-                                                            }, [
-                                                                VxeUICheckboxComponent
-                                                                    ? h(VxeUICheckboxComponent, {
+                                                            }, VxeUICheckboxComponent
+                                                                ? [
+                                                                    h(VxeUICheckboxComponent, {
                                                                         modelValue: hasEmptyData ? false : defaultOptions.original,
                                                                         disabled: hasEmptyData,
                                                                         title: getI18n('vxe.export.expOriginalTitle'),
@@ -427,10 +445,8 @@ export default defineVxeComponent({
                                                                         'onUpdate:modelValue'(value) {
                                                                             defaultOptions.original = value;
                                                                         }
-                                                                    })
-                                                                    : renderEmptyElement($xeTable),
-                                                                VxeUICheckboxComponent
-                                                                    ? h(VxeUICheckboxComponent, {
+                                                                    }),
+                                                                    h(VxeUICheckboxComponent, {
                                                                         modelValue: hasMerge && supportMerge && checkedAll ? defaultOptions.isMerge : false,
                                                                         title: getI18n('vxe.export.expMergeTitle'),
                                                                         disabled: hasEmptyData || !hasMerge || !supportMerge || !checkedAll,
@@ -438,25 +454,25 @@ export default defineVxeComponent({
                                                                         'onUpdate:modelValue'(value) {
                                                                             defaultOptions.isMerge = value;
                                                                         }
-                                                                    })
-                                                                    : renderEmptyElement($xeTable),
-                                                                isPrint || !VxeUICheckboxComponent
-                                                                    ? renderEmptyElement($xeTable)
-                                                                    : h(VxeUICheckboxComponent, {
-                                                                        modelValue: supportStyle ? defaultOptions.useStyle : false,
-                                                                        disabled: !supportStyle,
-                                                                        title: getI18n('vxe.export.expUseStyleTitle'),
-                                                                        content: getI18n('vxe.export.expOptUseStyle'),
-                                                                        'onUpdate:modelValue'(value) {
-                                                                            defaultOptions.useStyle = value;
-                                                                        }
-                                                                    })
-                                                            ]),
+                                                                    }),
+                                                                    isPrint
+                                                                        ? renderEmptyElement($xeTable)
+                                                                        : h(VxeUICheckboxComponent, {
+                                                                            modelValue: supportStyle ? defaultOptions.useStyle : false,
+                                                                            disabled: !supportStyle,
+                                                                            title: getI18n('vxe.export.expUseStyleTitle'),
+                                                                            content: getI18n('vxe.export.expOptUseStyle'),
+                                                                            'onUpdate:modelValue'(value) {
+                                                                                defaultOptions.useStyle = value;
+                                                                            }
+                                                                        })
+                                                                ]
+                                                                : []),
                                                             h('div', {
                                                                 class: 'vxe-table-export--panel-option-row'
-                                                            }, [
-                                                                VxeUICheckboxComponent
-                                                                    ? h(VxeUICheckboxComponent, {
+                                                            }, VxeUICheckboxComponent
+                                                                ? [
+                                                                    h(VxeUICheckboxComponent, {
                                                                         modelValue: hasTree ? defaultOptions.isTreeAllExpanded : false,
                                                                         disabled: hasEmptyData || !hasTree,
                                                                         title: getI18n('vxe.export.expTreeAllExpandTitle'),
@@ -464,10 +480,8 @@ export default defineVxeComponent({
                                                                         'onUpdate:modelValue'(value) {
                                                                             defaultOptions.isTreeAllExpanded = value;
                                                                         }
-                                                                    })
-                                                                    : renderEmptyElement($xeTable),
-                                                                VxeUICheckboxComponent
-                                                                    ? h(VxeUICheckboxComponent, {
+                                                                    }),
+                                                                    h(VxeUICheckboxComponent, {
                                                                         modelValue: hasRowGroup ? defaultOptions.isRowGroupAllExpanded : false,
                                                                         disabled: hasEmptyData || !hasRowGroup,
                                                                         title: getI18n('vxe.export.expRowGroupAllExpandTitle'),
@@ -476,8 +490,8 @@ export default defineVxeComponent({
                                                                             defaultOptions.isRowGroupAllExpanded = value;
                                                                         }
                                                                     })
-                                                                    : renderEmptyElement($xeTable)
-                                                            ])
+                                                                ]
+                                                                : [])
                                                         ])
                                                 ])
                                             ]

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

@@ -3,7 +3,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');
@@ -666,22 +666,106 @@ hooks.add('tableExportModule', {
             }
             return isEllipsis;
         };
+        const getCustomColKey = (conf) => {
+            return `${conf.field || ''}:${conf.type || ''}`;
+        };
         const toHtml = (opts, columns, datas) => {
             const { id, border, treeConfig, headerAlign: allHeaderAlign, align: allAlign, footerAlign: allFooterAlign, showOverflow: allColumnOverflow, showHeaderOverflow: allColumnHeaderOverflow } = props;
             const { isAllSelected, isIndeterminate } = reactData;
             const { mergeBodyCellMaps, mergeFooterCellMaps } = internalData;
             const treeOpts = computeTreeOpts.value;
-            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>');
@@ -691,22 +775,13 @@ hooks.add('tableExportModule', {
                             const headAlign = column.headerAlign || column.align || allHeaderAlign || allAlign;
                             const classNames = hasEllipsis(column, 'showHeaderOverflow', allColumnHeaderOverflow) ? ['col--ellipsis'] : [];
                             const cellTitle = getHeaderTitle(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>`);
                     });
                 }
@@ -719,9 +794,9 @@ hooks.add('tableExportModule', {
                             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>');
@@ -745,20 +820,20 @@ hooks.add('tableExportModule', {
                                 }
                                 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>');
                     });
                 }
@@ -791,12 +866,12 @@ hooks.add('tableExportModule', {
                                 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>');
                     });
                 }
@@ -834,7 +909,7 @@ hooks.add('tableExportModule', {
                             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>');
@@ -1249,6 +1324,9 @@ hooks.add('tableExportModule', {
             if (!typeList.some(item => item.value === type)) {
                 exportParams.type = typeList[0].value;
             }
+            if (!exportParams.widthMode) {
+                exportParams.widthMode = '';
+            }
             initStore.export = true;
             return nextTick();
         };
@@ -1335,7 +1413,7 @@ hooks.add('tableExportModule', {
                         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

@@ -139,7 +139,7 @@ export default defineVxeComponent({
             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

@@ -66,7 +66,7 @@ export default defineVxeComponent({
                 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

@@ -23,7 +23,7 @@ export default defineVxeComponent({
     setup(props) {
         const $xeTable = inject('$xeTable', {});
         const { xID, props: tableProps, reactData: tableReactData, internalData: tableInternalData } = $xeTable;
-        const { computeColumnOpts, computeColumnDragOpts, computeCellOpts, computeMouseOpts, computeHeaderCellOpts, computeDefaultRowHeight, computeVirtualXOpts, computeFloatingFilterOpts, computeIsHeaderRenderOptimize } = $xeTable.getComputeMaps();
+        const { computeColumnOpts, computeColumnDragOpts, computeCellOpts, computeMouseOpts, computeHeaderCellOpts, computeDefaultRowHeight, computeVirtualXOpts, computeFloatingFilterOpts, computeIsHeaderRenderOptimize, computeHeaderTooltipOpts } = $xeTable.getComputeMaps();
         const headerColumn = ref([]);
         const refElem = ref();
         const refHeaderScroll = ref();
@@ -58,6 +58,7 @@ export default defineVxeComponent({
             const virtualXOpts = computeVirtualXOpts.value;
             const columnOpts = computeColumnOpts.value;
             const columnDragOpts = computeColumnDragOpts.value;
+            const headerTooltipOpts = computeHeaderTooltipOpts.value;
             const cellOpts = computeCellOpts.value;
             const defaultRowHeight = computeDefaultRowHeight.value;
             const headerCellOpts = computeHeaderCellOpts.value;
@@ -77,7 +78,7 @@ export default defineVxeComponent({
                 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;
@@ -237,6 +238,7 @@ export default defineVxeComponent({
             const { showHeaderOverflow: allColumnHeaderOverflow, headerAlign: allHeaderAlign, align: allAlign } = tableProps;
             const { currentColumn, overflowX } = tableReactData;
             const { fullColumnIdData } = tableInternalData;
+            const headerTooltipOpts = computeHeaderTooltipOpts.value;
             const cellOpts = computeCellOpts.value;
             const defaultRowHeight = computeDefaultRowHeight.value;
             const headerCellOpts = computeHeaderCellOpts.value;
@@ -258,7 +260,7 @@ export default defineVxeComponent({
                 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/table.js

@@ -14672,35 +14672,35 @@ export default defineVxeComponent({
             $xeTable.preventEvent(null, 'unmounted', { $table: $xeTable });
         });
         nextTick(() => {
+            const { showOverflow, showHeaderOverflow, showFooterOverflow } = props;
+            const tooltipOpts = computeTooltipOpts.value;
+            const headerTooltipOpts = computeHeaderTooltipOpts.value;
+            const footerTooltipOpts = computeFooterTooltipOpts.value;
             if (props.loading) {
                 if (!VxeUILoadingComponent && !slots.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']);
                 }
             }
         });

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 = "4.20.1";
+export const version = "4.20.3";
 VxeUI.version = version;
 VxeUI.tableVersion = version;
 VxeUI.setConfig({
@@ -66,6 +66,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${"4.20.1"}`;
+const tableVersion = `table v${"4.20.3"}`;
 export function createComponentLog(name) {
     const uiVersion = VxeUI.uiVersion ? `ui v${VxeUI.uiVersion}` : '';
     const ganttVersion = VxeUI.ganttVersion ? `gantt v${VxeUI.ganttVersion}` : '';