vxe-table 3.22.2 → 3.22.4

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

@@ -2,7 +2,7 @@ import XEUtils from 'xe-utils'
 import { VxeUI } from '../../../ui'
 import { isColumnInfo, getCellValue, createHandleGetRowId } from '../../src/util'
 import { parseFile, formatText, eqEmptyValue } from '../../../ui/src/utils'
-import { hasClass } from '../../../ui/src/dom'
+import { hasClass, toCssUnit } from '../../../ui/src/dom'
 import { createHtmlPage, getExportBlobByContent } from './util'
 import { createComponentLog } from '../../../ui/src/log'
 
@@ -491,6 +491,10 @@ function hasEllipsis ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, co
   return isEllipsis
 }
 
+function getCustomColKey (conf: VxeTableDefines.ColumnInfo<any> | VxeTablePropTypes.ExportOrPrintColumnOption) {
+  return `${conf.field || ''}:${conf.type || ''}`
+}
+
 function toHtml ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, opts: VxeTablePropTypes.ExportHandleOptions, columns: VxeTableDefines.ColumnInfo[], datas: any[]) {
   const props = $xeTable
   const reactData = $xeTable as unknown as TableReactData
@@ -500,17 +504,103 @@ function toHtml ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, opts: V
   const { isAllSelected, isIndeterminate } = reactData
   const { mergeBodyCellMaps, mergeFooterCellMaps } = internalData
   const treeOpts = $xeTable.computeTreeOpts
-  const { print: isPrint, isHeader, isFooter, isColgroup, isMerge, colgroups, original } = opts
+  const { print: isPrint, widthMode, isHeader, isFooter, isColgroup, isMerge, colgroups, _columnConfs, original } = opts
+  const isAutoWidth = widthMode === 'auto'
+  const isScaleWidth = widthMode === 'scale'
+  const isDefaultWidth = !isAutoWidth && !isScaleWidth
+
+  const customWidthMaps: 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 => `<col style="width:${column.renderWidth}px">`).join('')}</colgroup>`
+    `<colgroup>${columns.map((column) => `<col style="${getHeaderWidthStyle(column)}">`).join('')}</colgroup>`
   ]
   if (isHeader) {
     tables.push('<thead>')
@@ -521,22 +611,13 @@ function toHtml ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, opts: V
             const headAlign = column.headerAlign || column.align || allHeaderAlign || allAlign
             const classNames = hasEllipsis($xeTable, column, 'showHeaderOverflow', allColumnHeaderOverflow) ? ['col--ellipsis'] : []
             const cellTitle = getHeaderTitle($xeTable, opts, column)
-            let childWidth = 0
-            let countChild = 0
-            XEUtils.eachTree([column], item => {
-              if (!item.childNodes || !column.childNodes.length) {
-                countChild++
-              }
-              childWidth += item.renderWidth
-            }, { children: 'childNodes' })
-            const cellWidth = childWidth - countChild
-            if (headAlign) {
+             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>`
         )
       })
@@ -550,9 +631,9 @@ function toHtml ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, opts: V
             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>`
       )
     }
@@ -577,18 +658,18 @@ function toHtml ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, opts: V
               }
               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>'
         )
       })
@@ -623,11 +704,11 @@ function toHtml ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, opts: V
               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>'
         )
       })
@@ -646,28 +727,28 @@ function toHtml ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, opts: V
             const classNames = hasEllipsis($xeTable, column, 'showOverflow', allColumnOverflow) ? ['col--ellipsis'] : []
             const cellValue = getFooterCellValue($xeTable, opts, row, column)
             let rowSpan = 1
-                let colSpan = 1
-                if (isMerge) {
-                  const _rowIndex = rIndex
-                  const _columnIndex = $xeTable.getVTColumnIndex(column)
-                  const spanRest = mergeFooterCellMaps[`${_rowIndex}:${_columnIndex}`]
-                  if (spanRest) {
-                    const { rowspan, colspan } = spanRest
-                    if (!rowspan || !colspan) {
-                      return ''
-                    }
-                    if (rowspan > 1) {
-                      rowSpan = rowspan
-                    }
-                    if (colspan > 1) {
-                      colSpan = colspan
-                    }
-                  }
+            let colSpan = 1
+            if (isMerge) {
+              const _rowIndex = rIndex
+              const _columnIndex = $xeTable.getVTColumnIndex(column)
+              const spanRest = mergeFooterCellMaps[`${_rowIndex}:${_columnIndex}`]
+              if (spanRest) {
+                const { rowspan, colspan } = spanRest
+                if (!rowspan || !colspan) {
+                  return ''
+                }
+                if (rowspan > 1) {
+                  rowSpan = rowspan
                 }
+                if (colspan > 1) {
+                  colSpan = colspan
+                }
+              }
+            }
             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>`
         )
       })
@@ -677,7 +758,7 @@ function toHtml ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, opts: V
   // 是否半选状态
   const script = !isAllSelected && isIndeterminate ? `<script>(function(){var a=document.querySelector(".${allCls}");if(a){a.indeterminate=true}})()</script>` : ''
   tables.push('</table>', script)
-  return isPrint ? tables.join('') : createHtmlPage(opts, tables.join(''))
+  return isAutoWidth ? tables.join('') : createHtmlPage(opts, tables.join(''))
 }
 
 function toXML ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, opts: any, columns: any[], datas: any[]) {
@@ -1277,6 +1358,9 @@ function handleExportAndPrint ($xeTable: VxeTableConstructor, options: VxeTableP
   if (!typeList.some(item => item.value === type)) {
     exportParams.type = typeList[0].value
   }
+  if (!exportParams.widthMode) {
+    exportParams.widthMode = ''
+  }
   initStore.export = true
   return $xeTable.$nextTick()
 }
@@ -1421,7 +1505,7 @@ export default {
           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

@@ -148,7 +148,7 @@ function renderTdColumn (
   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

@@ -49,7 +49,7 @@ function renderRows (h: CreateElement, _vm: any, isOptimizeMode: boolean, tableC
     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,6 +29,7 @@ function renderRows (h: CreateElement, _vm: any, isGroup: boolean, isOptimizeMod
   const virtualXOpts = $xeTable.computeVirtualXOpts
   const columnOpts = $xeTable.computeColumnOpts
   const columnDragOpts = $xeTable.computeColumnDragOpts
+  const headerTooltipOpts = $xeTable.computeHeaderTooltipOpts
   const cellOpts = $xeTable.computeCellOpts
   const defaultRowHeight = $xeTable.computeDefaultRowHeight
   const headerCellOpts = $xeTable.computeHeaderCellOpts
@@ -46,11 +47,11 @@ function renderRows (h: CreateElement, _vm: any, isGroup: boolean, isOptimizeMod
     const isColGroup = column.children && column.children.length
     const fixedHiddenColumn = overflowX && !isColGroup && (fixedType ? column.fixed !== fixedType : !!column.fixed)
     const isPadding = XEUtils.isBoolean(headerCellOpts.padding) ? headerCellOpts.padding : cellOpts.padding
-    const headOverflow = XEUtils.isUndefined(showHeaderOverflow) || XEUtils.isNull(showHeaderOverflow) ? allColumnHeaderOverflow : showHeaderOverflow
+    const headOverflow = XEUtils.eqNull(showHeaderOverflow) ? allColumnHeaderOverflow : showHeaderOverflow
     const headAlign = headerAlign || (compConf ? compConf.tableHeaderCellAlign : '') || allHeaderAlign || align || (compConf ? compConf.tableCellAlign : '') || allAlign
     const showEllipsis = headOverflow === 'ellipsis'
     const showTitle = headOverflow === 'title'
-    const showTooltip = headOverflow === true || headOverflow === 'tooltip'
+    const showTooltip = headOverflow === true ? headerTooltipOpts.mode === 'tooltip' : headOverflow === 'tooltip'
     const hasEllipsis = showTitle || showTooltip || showEllipsis
     let hasFilter = false
     let firstFilterOption: VxeColumnPropTypes.FilterItem | null = null
@@ -228,6 +229,7 @@ function renderFilterRows (h: CreateElement, _vm: any, isOptimizeMode: boolean,
   const { showHeaderOverflow: allColumnHeaderOverflow, headerAlign: allHeaderAlign, align: allAlign } = tableProps
   const { currentColumn, overflowX } = tableReactData
   const { fullColumnIdData } = tableInternalData
+  const headerTooltipOpts = $xeTable.computeHeaderTooltipOpts
   const cellOpts = $xeTable.computeCellOpts
   const defaultRowHeight = $xeTable.computeDefaultRowHeight
   const headerCellOpts = $xeTable.computeHeaderCellOpts
@@ -250,7 +252,7 @@ function renderFilterRows (h: CreateElement, _vm: any, isOptimizeMode: boolean,
     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

package/packages/table/src/methods.ts

@@ -3,7 +3,7 @@ import { getTpImg, isPx, isScale, hasClass, addClass, removeClass, wheelScrollLe
 import { getLastZIndex, nextZIndex, hasChildrenList, getFuncText, isEnableConf, formatText, eqEmptyValue } from '../../ui/src/utils'
 import { VxeUI } from '../../ui'
 import Cell from './cell'
-import { getRowUniqueId, createRowId, clearTableAllStatus, getColumnList, toFilters, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleRowidOrRow, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, getRootColumn, getColReMinWidth, getColReMaxWidth, createHandleUpdateRowId, createHandleGetRowId, getRefElem, getCellRestHeight, getLastChildColumn, getRowMaxHeight, handleCustomStoreConfig } from './util'
+import { getRowUniqueId, createRowId, clearTableAllStatus, getColumnList, toFilters, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleRowidOrRow, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, getRootColumn, getColReMinWidth, getColReMaxWidth, createHandleUpdateRowId, createHandleGetRowId, getRefElem, getCellRestHeight, getLastChildColumn, getRowMaxHeight, handleCustomStoreConfig, encodeRowid } from './util'
 import { getSlotVNs } from '../../ui/src/vn'
 import { moveRowAnimateToTb, clearRowAnimate, moveColAnimateToLr, clearColAnimate } from '../../ui/src/anime'
 import { createComponentLog } from '../../ui/src/log'
@@ -1390,7 +1390,8 @@ function handleDefaultSelectionChecked ($xeTable: VxeTableConstructor & VxeTable
       handleCheckedAllCheckboxRow($xeTable, true, true)
     } else if (checkRowKeys) {
       const defSelection: any[] = []
-      checkRowKeys.forEach((rowid: any) => {
+      checkRowKeys.forEach((rowKey: any) => {
+        const rowid = encodeRowid(rowKey)
         if (fullDataRowIdData[rowid]) {
           defSelection.push(fullDataRowIdData[rowid].row)
         }
@@ -1411,7 +1412,8 @@ function handleDefaultRadioChecked ($xeTable: VxeTableConstructor & VxeTablePriv
   if (radioConfig) {
     const { fullDataRowIdData } = internalData
     const radioOpts = $xeTable.computeRadioOpts
-    const { checkRowKey: rowid, reserve } = radioOpts
+    const { checkRowKey: rowKey, reserve } = radioOpts
+    const rowid = rowKey ? encodeRowid(rowKey) : null
     if (rowid) {
       if (fullDataRowIdData[rowid]) {
         handleCheckedRadioRow($xeTable, fullDataRowIdData[rowid].row, true)
@@ -1440,7 +1442,8 @@ function handleDefaultRowExpand ($xeTable: VxeTableConstructor & VxeTablePrivate
       $xeTable.setAllRowExpand(true)
     } else if (expandRowKeys) {
       const defExpandeds: any[] = []
-      expandRowKeys.forEach((rowid: any) => {
+      expandRowKeys.forEach((rowKey) => {
+        const rowid = encodeRowid(rowKey)
         if (fullDataRowIdData[rowid]) {
           defExpandeds.push(fullDataRowIdData[rowid].row)
         }
@@ -1714,7 +1717,8 @@ const handleDefaultTreeExpand = ($xeTable: VxeTableConstructor) => {
       $xeTable.setAllTreeExpand(true)
     } else if (expandRowKeys) {
       const defExpandeds: any[] = []
-      expandRowKeys.forEach((rowid) => {
+      expandRowKeys.forEach((rowKey) => {
+        const rowid = encodeRowid(rowKey)
         const rowRest = fullAllDataRowIdData[rowid]
         if (rowRest) {
           defExpandeds.push(rowRest.row)
@@ -8700,7 +8704,7 @@ const tableMethods: any = {
     }
     return handleCheckedCheckboxRow($xeTable, rows, checked, true)
   },
-  setCheckboxRowKey (keys: any, checked: boolean) {
+  setCheckboxRowByKey (keys: any, checked: boolean) {
     const $xeTable = this
     const internalData = $xeTable as unknown as TableInternalData
 
@@ -8709,7 +8713,8 @@ const tableMethods: any = {
       keys = [keys]
     }
     const rows: any = []
-    keys.forEach((rowid: string) => {
+    keys.forEach((rowKey: string) => {
+      const rowid = encodeRowid(rowKey)
       const rowRest = fullAllDataRowIdData[rowid]
       if (rowRest) {
         rows.push(rowRest.row)
@@ -8717,6 +8722,11 @@ const tableMethods: any = {
     })
     return handleCheckedCheckboxRow($xeTable, rows, checked, true)
   },
+  setCheckboxRowKey (keys: any, checked: boolean) {
+    const $xeTable = this
+
+    return $xeTable.setCheckboxRowByKey(keys, checked)
+  },
   isCheckedByCheckboxRow (row: any) {
     const $xeTable = this
     const reactData = $xeTable as unknown as TableReactData
@@ -8731,7 +8741,7 @@ const tableMethods: any = {
     }
     return !!updateCheckboxFlag && !!selectCheckboxMaps[getRowid($xeTable, row)]
   },
-  isCheckedByCheckboxRowKey (rowid: string) {
+  isCheckedByCheckboxRowKey (rowKey: string) {
     const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
     const reactData = $xeTable as unknown as TableReactData
     const internalData = $xeTable as unknown as TableInternalData
@@ -8740,6 +8750,7 @@ const tableMethods: any = {
     const { fullAllDataRowIdData, selectCheckboxMaps } = internalData
     const checkboxOpts = $xeTable.computeCheckboxOpts
     const { checkField } = checkboxOpts
+    const rowid = encodeRowid(rowKey)
     if (checkField) {
       const rowRest = fullAllDataRowIdData[rowid]
       if (rowRest) {
@@ -8756,11 +8767,12 @@ const tableMethods: any = {
     const { treeIndeterminateRowMaps } = internalData
     return !!treeIndeterminateRowMaps[getRowid($xeTable, row)] && !$xeTable.isCheckedByCheckboxRow(row)
   },
-  isIndeterminateByCheckboxRowKey (rowid: string) {
+  isIndeterminateByCheckboxRowKey (rowKey: string) {
     const $xeTable = this
     const internalData = $xeTable as unknown as TableInternalData
 
     const { treeIndeterminateRowMaps } = internalData
+    const rowid = encodeRowid(rowKey)
     return !!treeIndeterminateRowMaps[rowid] && !$xeTable.isCheckedByCheckboxRowKey(rowid)
   },
   /**
@@ -9647,8 +9659,8 @@ const tableMethods: any = {
     return this.$nextTick()
   },
   isCheckedByRadioRow (row: any) {
-    const $xeTable = this
-    const reactData = $xeTable
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+    const reactData = $xeTable as unknown as TableReactData
 
     const { selectRadioRow } = reactData
     if (row && selectRadioRow) {
@@ -9657,8 +9669,8 @@ const tableMethods: any = {
     return false
   },
   isCheckedByRadioRowKey (key: string) {
-    const $xeTable = this
-    const reactData = $xeTable
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+    const reactData = $xeTable as unknown as TableReactData
 
     const { selectRadioRow } = reactData
     if (selectRadioRow) {
@@ -9671,7 +9683,7 @@ const tableMethods: any = {
    * @param {Row} row 行对象
    */
   setRadioRow (row: any) {
-    const $xeTable = this
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
 
     return handleCheckedRadioRow($xeTable, row, true)
   },
@@ -9679,17 +9691,23 @@ const tableMethods: any = {
    * 用于单选行，设置某一行为选中状态
    * @param key 行主键
    */
-  setRadioRowKey (rowid: any) {
+  setRadioByRowKey (rowKey: any) {
     const $xeTable = this
     const internalData = $xeTable
 
     const { fullAllDataRowIdData } = internalData
+    const rowid = encodeRowid(rowKey)
     const rowRest = fullAllDataRowIdData[rowid]
     if (rowRest) {
       return handleCheckedRadioRow($xeTable, rowRest.row, true)
     }
     return $xeTable.$nextTick()
   },
+  setRadioRowKey (rowKey: any) {
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+
+    return $xeTable.setRadioByRowKey(rowKey)
+  },
   /**
    * 用于当前行，手动清空当前高亮的状态
    */
@@ -9713,8 +9731,11 @@ const tableMethods: any = {
    * 用于单选行，手动清空用户的选择
    */
   clearRadioRow () {
-    this.selectRadioRow = null
-    return this.$nextTick()
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+    const reactData = $xeTable as unknown as TableReactData
+
+    reactData.selectRadioRow = null
+    return $xeTable.$nextTick()
   },
   /**
    * 用于当前行，获取当前行的数据

package/packages/table/src/table.ts

@@ -2070,35 +2070,35 @@ export default {
       const VxeUILoadingComponent = VxeUI.getComponent('VxeLoading')
       const VxeUITooltipComponent = VxeUI.getComponent('VxeTooltip')
 
+      const { showOverflow, showHeaderOverflow, showFooterOverflow } = props
+      const tooltipOpts = $xeTable.computeTooltipOpts
+      const headerTooltipOpts = $xeTable.computeHeaderTooltipOpts
+      const footerTooltipOpts = $xeTable.computeFooterTooltipOpts
       if (props.loading) {
         if (!VxeUILoadingComponent && !this.$scopedSlots.loading) {
-          errLog('vxe.error.errProp', ['loading=true', 'loading=false | <template #loading>...</template>'])
           errLog('vxe.error.reqComp', ['vxe-loading'])
+          errLog('vxe.error.errProp', ['loading=true', 'loading=false | <template #loading>...</template>'])
         }
       }
-      if ((props.showOverflow === true || props.showOverflow === 'tooltip') ||
-          (props.showHeaderOverflow === true || props.showHeaderOverflow === 'tooltip') ||
-          (props.showFooterOverflow === true || props.showFooterOverflow === 'tooltip')) {
-        if (!VxeUITooltipComponent) {
-          if (props.showOverflow === true) {
-            errLog('vxe.error.errProp', ['show-overflow=true', 'show-overflow=title'])
-          }
-          if (props.showOverflow === 'tooltip') {
-            errLog('vxe.error.errProp', ['show-overflow=tooltip', 'show-overflow=title'])
-          }
-          if (props.showHeaderOverflow === true) {
-            errLog('vxe.error.errProp', ['show-header-overflow=true', 'show-header-overflow=title'])
-          }
-          if (props.showHeaderOverflow === 'tooltip') {
-            errLog('vxe.error.errProp', ['show-header-overflow=tooltip', 'show-header-overflow=title'])
-          }
-          if (props.showFooterOverflow === true) {
-            errLog('vxe.error.errProp', ['show-footer-overflow=true', 'show-footer-overflow=title'])
-          }
-          if (props.showFooterOverflow === 'tooltip') {
-            errLog('vxe.error.errProp', ['show-footer-overflow=tooltip', 'show-footer-overflow=title'])
-          }
-          errLog('vxe.error.reqComp', ['vxe-tooltip'])
+      if (!VxeUITooltipComponent) {
+        errLog('vxe.error.reqComp', ['vxe-tooltip'])
+        if (showOverflow === 'tooltip') {
+          errLog('vxe.error.errProp', ['show-overflow=' + showOverflow, 'show-overflow=false,title,ellipsis'])
+        }
+        if (showOverflow === true && tooltipOpts.mode === 'tooltip') {
+          errLog('vxe.error.notSupportProp', ['show-overflow=' + showOverflow, 'tooltip-config.mode=tooltip', 'tooltip-config.mode=title,ellipsis'])
+        }
+        if (showHeaderOverflow === 'tooltip') {
+          errLog('vxe.error.errProp', ['show-header-overflow=' + showHeaderOverflow, 'show-header-overflow=false,title,ellipsis'])
+        }
+        if (showHeaderOverflow === true && headerTooltipOpts.mode === 'tooltip') {
+          errLog('vxe.error.notSupportProp', ['show-header-overflow=' + showHeaderOverflow, 'header-tooltip-config.mode=tooltip', 'header-tooltip-config.mode=title,ellipsis'])
+        }
+        if (showFooterOverflow === 'tooltip') {
+          errLog('vxe.error.errProp', ['show-footer-overflow=' + showFooterOverflow, 'show-footer-overflow=false,title,ellipsis'])
+        }
+        if (showFooterOverflow === true && footerTooltipOpts.mode === 'tooltip') {
+          errLog('vxe.error.notSupportProp', ['show-footer-overflow=' + showFooterOverflow, 'footer-tooltip-config.mode=tooltip', 'footer-tooltip-config.mode=title,ellipsis'])
         }
       }
 

package/packages/table/src/util.ts

@@ -390,6 +390,7 @@ export function createReactData (): TableReactData {
     mergeFootFlag: 1,
 
     rowHeightStore: {
+      xlarge: 54,
       large: 52,
       default: 48,
       medium: 44,
@@ -655,11 +656,11 @@ export function createHandleGetRowId ($xeTable: VxeTableConstructor) {
 }
 
 // 编码行主键
-export function encodeRowid (rowVal: string) {
+export function encodeRowid (rowVal: string | number) {
   return XEUtils.eqNull(rowVal) ? '' : encodeURIComponent(rowVal)
 }
 
-function getDeepRowIdByKey (row: any, rowKey: string) {
+function getDeepRowIdByKey (row: any, rowKey: string | number) {
   return XEUtils.get(row, rowKey)
 }
 

package/packages/ui/index.ts

@@ -73,6 +73,7 @@ VxeUI.setConfig({
       strict: true
     },
     tooltipConfig: {
+      mode: 'tooltip',
       enterable: true,
       defaultPlacement: 'top'
     },