vxe-table 4.20.2 → 4.20.4

package/packages/table/module/export/export-panel.ts

@@ -43,6 +43,14 @@ export default defineVxeComponent({
     const xInputFilename = ref() as Ref<HTMLInputElement>
     const xInputSheetname = ref() as Ref<HTMLInputElement>
 
+    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)
@@ -182,6 +190,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
@@ -386,6 +395,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: any) {
+                                      defaultOptions.widthMode = value
+                                    }
+                                  })
+                                  : renderEmptyElement($xeTable)
+                              ])
+                            ])
+                            : renderEmptyElement($xeTable),
                           h('tr', [
                             h('td', getI18n('vxe.export.expOpts')),
                             parameterSlot
@@ -397,115 +422,105 @@ export default defineVxeComponent({
                               : h('td', [
                                 h('div', {
                                   class: 'vxe-table-export--panel-option-row'
-                                }, [
-                                  VxeUICheckboxComponent
-                                    ? h(VxeUICheckboxComponent, {
-                                      modelValue: hasEmptyData || isHeader,
-                                      disabled: hasEmptyData,
-                                      title: getI18n('vxe.export.expHeaderTitle'),
-                                      content: getI18n('vxe.export.expOptHeader'),
-                                      'onUpdate:modelValue' (value: any) {
-                                        defaultOptions.isHeader = value
-                                      }
-                                    })
-                                    : renderEmptyElement($xeTable),
-                                  VxeUICheckboxComponent
-                                    ? h(VxeUICheckboxComponent, {
-                                      modelValue: defaultOptions.isFooter,
-                                      disabled: !storeData.hasFooter,
-                                      title: getI18n('vxe.export.expFooterTitle'),
-                                      content: getI18n('vxe.export.expOptFooter'),
-                                      'onUpdate:modelValue' (value: any) {
-                                        defaultOptions.isFooter = value
-                                      }
-                                    })
-                                    : renderEmptyElement($xeTable),
-                                  VxeUICheckboxComponent
-                                    ? h(VxeUICheckboxComponent, {
-                                      modelValue: isHeader ? defaultOptions.isTitle : false,
-                                      disabled: !isHeader,
-                                      title: getI18n('vxe.export.expTitleTitle'),
-                                      content: getI18n('vxe.export.expOptTitle'),
-                                      'onUpdate:modelValue' (value: any) {
-                                        defaultOptions.isTitle = value
-                                      }
-                                    })
-                                    : renderEmptyElement($xeTable),
-                                  VxeUICheckboxComponent
-                                    ? h(VxeUICheckboxComponent, {
-                                      modelValue: isHeader && hasColgroup && supportMerge ? defaultOptions.isColgroup : false,
-                                      title: getI18n('vxe.export.expColgroupTitle'),
-                                      disabled: !isHeader || !hasColgroup || !supportMerge,
-                                      content: getI18n('vxe.export.expOptColgroup'),
-                                      'onUpdate:modelValue' (value: any) {
-                                        defaultOptions.isColgroup = value
-                                      }
-                                    })
-                                    : renderEmptyElement($xeTable)
-                                ]),
+                                }, VxeUICheckboxComponent
+                                  ? [
+                                      h(VxeUICheckboxComponent, {
+                                        modelValue: hasEmptyData || isHeader,
+                                        disabled: hasEmptyData,
+                                        title: getI18n('vxe.export.expHeaderTitle'),
+                                        content: getI18n('vxe.export.expOptHeader'),
+                                        'onUpdate:modelValue' (value: any) {
+                                          defaultOptions.isHeader = value
+                                        }
+                                      }),
+                                      h(VxeUICheckboxComponent, {
+                                        modelValue: defaultOptions.isFooter,
+                                        disabled: !storeData.hasFooter,
+                                        title: getI18n('vxe.export.expFooterTitle'),
+                                        content: getI18n('vxe.export.expOptFooter'),
+                                        'onUpdate:modelValue' (value: any) {
+                                          defaultOptions.isFooter = value
+                                        }
+                                      }),
+                                      h(VxeUICheckboxComponent, {
+                                        modelValue: isHeader ? defaultOptions.isTitle : false,
+                                        disabled: !isHeader,
+                                        title: getI18n('vxe.export.expTitleTitle'),
+                                        content: getI18n('vxe.export.expOptTitle'),
+                                        'onUpdate:modelValue' (value: any) {
+                                          defaultOptions.isTitle = value
+                                        }
+                                      }),
+                                      h(VxeUICheckboxComponent, {
+                                        modelValue: isHeader && hasColgroup && supportMerge ? defaultOptions.isColgroup : false,
+                                        title: getI18n('vxe.export.expColgroupTitle'),
+                                        disabled: !isHeader || !hasColgroup || !supportMerge,
+                                        content: getI18n('vxe.export.expOptColgroup'),
+                                        'onUpdate:modelValue' (value: any) {
+                                          defaultOptions.isColgroup = value
+                                        }
+                                      })
+                                    ]
+                                  : []),
                                 h('div', {
                                   class: 'vxe-table-export--panel-option-row'
-                                }, [
-                                  VxeUICheckboxComponent
-                                    ? h(VxeUICheckboxComponent, {
-                                      modelValue: hasEmptyData ? false : defaultOptions.original,
-                                      disabled: hasEmptyData,
-                                      title: getI18n('vxe.export.expOriginalTitle'),
-                                      content: getI18n('vxe.export.expOptOriginal'),
-                                      'onUpdate:modelValue' (value: any) {
-                                        defaultOptions.original = value
-                                      }
-                                    })
-                                    : renderEmptyElement($xeTable),
-                                  VxeUICheckboxComponent
-                                    ? h(VxeUICheckboxComponent, {
-                                      modelValue: hasMerge && supportMerge && checkedAll ? defaultOptions.isMerge : false,
-                                      title: getI18n('vxe.export.expMergeTitle'),
-                                      disabled: hasEmptyData || !hasMerge || !supportMerge || !checkedAll,
-                                      content: getI18n('vxe.export.expOptMerge'),
-                                      'onUpdate:modelValue' (value: any) {
-                                        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: any) {
-                                        defaultOptions.useStyle = value
-                                      }
-                                    })
-                                ]),
+                                }, VxeUICheckboxComponent
+                                  ? [
+                                      h(VxeUICheckboxComponent, {
+                                        modelValue: hasEmptyData ? false : defaultOptions.original,
+                                        disabled: hasEmptyData,
+                                        title: getI18n('vxe.export.expOriginalTitle'),
+                                        content: getI18n('vxe.export.expOptOriginal'),
+                                        'onUpdate:modelValue' (value: any) {
+                                          defaultOptions.original = value
+                                        }
+                                      }),
+                                      h(VxeUICheckboxComponent, {
+                                        modelValue: hasMerge && supportMerge && checkedAll ? defaultOptions.isMerge : false,
+                                        title: getI18n('vxe.export.expMergeTitle'),
+                                        disabled: hasEmptyData || !hasMerge || !supportMerge || !checkedAll,
+                                        content: getI18n('vxe.export.expOptMerge'),
+                                        'onUpdate:modelValue' (value: any) {
+                                          defaultOptions.isMerge = 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: any) {
+                                            defaultOptions.useStyle = value
+                                          }
+                                        })
+                                    ]
+                                  : []),
                                 h('div', {
                                   class: 'vxe-table-export--panel-option-row'
-                                }, [
-                                  VxeUICheckboxComponent
-                                    ? h(VxeUICheckboxComponent, {
-                                      modelValue: hasTree ? defaultOptions.isTreeAllExpanded : false,
-                                      disabled: hasEmptyData || !hasTree,
-                                      title: getI18n('vxe.export.expTreeAllExpandTitle'),
-                                      content: getI18n('vxe.export.expOptTreeAllExpand'),
-                                      'onUpdate:modelValue' (value: any) {
-                                        defaultOptions.isTreeAllExpanded = value
-                                      }
-                                    })
-                                    : renderEmptyElement($xeTable),
-                                  VxeUICheckboxComponent
-                                    ? h(VxeUICheckboxComponent, {
-                                      modelValue: hasRowGroup ? defaultOptions.isRowGroupAllExpanded : false,
-                                      disabled: hasEmptyData || !hasRowGroup,
-                                      title: getI18n('vxe.export.expRowGroupAllExpandTitle'),
-                                      content: getI18n('vxe.export.expOptRowGroupAllExpand'),
-                                      'onUpdate:modelValue' (value: any) {
-                                        defaultOptions.isRowGroupAllExpanded = value
-                                      }
-                                    })
-                                    : renderEmptyElement($xeTable)
-                                ])
+                                }, VxeUICheckboxComponent
+                                  ? [
+                                      h(VxeUICheckboxComponent, {
+                                        modelValue: hasTree ? defaultOptions.isTreeAllExpanded : false,
+                                        disabled: hasEmptyData || !hasTree,
+                                        title: getI18n('vxe.export.expTreeAllExpandTitle'),
+                                        content: getI18n('vxe.export.expOptTreeAllExpand'),
+                                        'onUpdate:modelValue' (value: any) {
+                                          defaultOptions.isTreeAllExpanded = value
+                                        }
+                                      }),
+                                      h(VxeUICheckboxComponent, {
+                                        modelValue: hasRowGroup ? defaultOptions.isRowGroupAllExpanded : false,
+                                        disabled: hasEmptyData || !hasRowGroup,
+                                        title: getI18n('vxe.export.expRowGroupAllExpandTitle'),
+                                        content: getI18n('vxe.export.expOptRowGroupAllExpand'),
+                                        'onUpdate:modelValue' (value: any) {
+                                          defaultOptions.isRowGroupAllExpanded = value
+                                        }
+                                      })
+                                    ]
+                                  : [])
                               ])
                           ])
                         ]

package/packages/table/module/export/hook.ts

@@ -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'
 
@@ -714,48 +714,129 @@ hooks.add('tableExportModule', {
       return isEllipsis
     }
 
+    const getCustomColKey = (conf: VxeTableDefines.ColumnInfo<any> | VxeTablePropTypes.ExportOrPrintColumnOption) => {
+      return `${conf.field || ''}:${conf.type || ''}`
+    }
+
     const toHtml = (opts: VxeTablePropTypes.ExportHandleOptions, columns: VxeTableDefines.ColumnInfo[], datas: any[]) => {
       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: Record<string, number | string> = {}
+      if (_columnConfs) {
+        _columnConfs.forEach(conf => {
+          if (!isColumnInfo(conf)) {
+            if ((conf.field || conf.type) && conf.width) {
+              customWidthMaps[getCustomColKey(conf)] = conf.width
+            }
+          }
+        })
+      }
+
+      // 计算宽度
+      const colWidthMaps: Record<string, number> = {}
+      const printWidthMaps: Record<string, number> = {}
+      if (isPrint) {
+        let tableWidth = 0
+        columns.forEach(column => {
+          tableWidth += column.renderWidth
+        })
+        if (colgroups) {
+          colgroups.forEach((cols) => {
+            cols.forEach((column: any) => {
+              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: VxeTableDefines.ColumnInfo) => {
+        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: VxeTableDefines.ColumnInfo) => {
+        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: any) => `<col style="width:${column.renderWidth}px">`).join('')}</colgroup>`
+        `<colgroup>${columns.map((column) => `<col style="${getHeaderWidthStyle(column)}">`).join('')}</colgroup>`
       ]
       if (isHeader) {
         tables.push('<thead>')
         if (isColgroup && !original) {
-          colgroups.forEach((cols: any) => {
+          colgroups.forEach((cols) => {
             tables.push(
               `<tr>${cols.map((column: any) => {
                 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>`
             )
           })
@@ -769,9 +850,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>`
           )
         }
@@ -797,18 +878,18 @@ 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>'
             )
           })
@@ -842,11 +923,11 @@ 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>'
             )
           })
@@ -886,7 +967,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>`
             )
           })
@@ -1307,6 +1388,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()
     }
@@ -1395,7 +1479,7 @@ hooks.add('tableExportModule', {
             return isChecked
           }, { children: 'children', mapChildren: 'childNodes', original: true })
         }
-        const handleOptions: VxeTablePropTypes.ExportHandleOptions = Object.assign({ } as { data: any[], colgroups: any[], columns: any[] }, opts, { filename: '', sheetName: '' })
+        const handleOptions: VxeTablePropTypes.ExportHandleOptions = Object.assign({ } as { data: any[], colgroups: any[], columns: any[] }, opts, { filename: '', sheetName: '', _columnConfs: columns })
         // 如果设置源数据，则默认导出设置了字段的列
         if (!isCustomCol && !columnFilterMethod) {
           columnFilterMethod = ({ column }) => {

package/packages/table/module/export/util.ts

@@ -1,7 +1,7 @@
 import type { VxeTablePropTypes } from '../../../../types'
 
 // 默认导出或打印的 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: string, options: { type: string }) {
   return new Blob([content], { type: `text/${options.type};charset=utf-8;` })

package/packages/table/src/body.ts

@@ -163,7 +163,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/packages/table/src/footer.ts

@@ -76,7 +76,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: any = { colid }

package/packages/table/src/header.ts

@@ -29,7 +29,7 @@ export default defineVxeComponent({
     const $xeTable = inject('$xeTable', {} as VxeTableConstructor & VxeTableMethods & VxeTablePrivateMethods)
 
     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<VxeTableDefines.ColumnInfo[][]>([])
 
@@ -69,6 +69,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
@@ -89,7 +90,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: VxeTableDefines.FilterOption | null = null
@@ -262,6 +263,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
@@ -284,7 +286,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: VxeTableDefines.FilterOption | null = null