在使用 vxe-table 时，单元格内容过长会触发 Tooltip 悬浮提示。但默认的 Tooltip 尺寸有限，当提示内容非常多（例如包含大量文字、自定义组件、列表等）时，会出现内容溢出、显示不全的问题。本文将介绍如何通过配置 tooltipConfig 及相关插槽，让 Tooltip 容器固定宽高并自动显示滚动条，从而优雅地展示所有内容。
参数说明
vxe-table 为表头（header）、单元格（body）、表尾（footer）分别提供了独立的 Tooltip 配置项：
| 配置属性 | 作用对象 | 常用字段 |
|---|---|---|
| headerTooltipConfig | 表头单元格（需开启 showHeaderOverflow） | width, height, maxWidth, maxHeight |
| tooltipConfig | 数据行单元格（需开启 showOverflow） | width, height, maxWidth, maxHeight |
| footerTooltipConfig | 表尾单元格（需开启 showFooterOverflow） | width, height, maxWidth, maxHeight |
当 Tooltip 内容超过 maxWidth 或 maxHeight 时，内部会自动出现滚动条。你也可以直接设置固定 width / height 强制指定容器尺寸。
代码
<template>
<div>
<vxe-grid v-bind="gridOptions">
<!-- 自定义表头 Tooltip 内容 -->
<template #header-tooltip="{ column }">
<div>
<div style="color: red;">自定义表头：{{ column.title }}</div>
<div style="color: red;">自定义表头：{{ column.title }}</div>
<div style="color: red;">自定义表头：{{ column.title }}</div>
<div style="color: red;">自定义表头：{{ column.title }}</div>
<div style="color: red;">自定义表头：{{ column.title }}</div>
<div style="color: red;">自定义表头：{{ column.title }}</div>
<div style="color: red;">自定义表头：{{ column.title }}</div>
<div style="color: red;">自定义表头：{{ column.title }}</div>
<div style="color: red;">自定义表头：{{ column.title }}</div>
<div style="color: red;">自定义表头：{{ column.title }}</div>
<div style="color: red;">自定义表头：{{ column.title }}</div>
<div style="color: red;">自定义表头：{{ column.title }}</div>
<div style="color: red;">自定义表头：{{ column.title }}</div>
<div style="color: red;">自定义表头：{{ column.title }}</div>
<div style="color: red;">自定义表头：{{ column.title }}</div>
<div style="color: red;">自定义表头：{{ column.title }}</div>
<div style="color: red;">自定义表头：{{ column.title }}</div>
<div style="color: red;">自定义表头：{{ column.title }}</div>
<div style="color: red;">自定义表头：{{ column.title }}</div>
<div style="color: red;">自定义表头：{{ column.title }}</div>
<div style="color: red;">自定义表头：{{ column.title }}</div>
</div>
</template>
<!-- 自定义单元格 Tooltip 内容 -->
<template #tooltip="{ row, column }">
<div style="width: 800px;">
<div style="color: orange;">自定义：{{ row[column.field] }}</div>
<vxe-link status="primary" href="https://vxeui.com/" target="_blank">点击查看官网</vxe-link>
<div style="color: orange;">自定义：{{ row[column.field] }}</div>
<vxe-link status="primary" href="https://vxeui.com/" target="_blank">点击查看官网</vxe-link>
<div style="color: orange;">自定义：{{ row[column.field] }}</div>
<vxe-link status="primary" href="https://vxeui.com/" target="_blank">点击查看官网</vxe-link>
<div style="color: orange;">自定义：{{ row[column.field] }}</div>
<vxe-link status="primary" href="https://vxeui.com/" target="_blank">点击查看官网</vxe-link>
<div style="color: orange;">自定义：{{ row[column.field] }}</div>
<vxe-link status="primary" href="https://vxeui.com/" target="_blank">点击查看官网</vxe-link>
<div style="color: orange;">自定义：{{ row[column.field] }}</div>
<vxe-link status="primary" href="https://vxeui.com/" target="_blank">点击查看官网</vxe-link>
<div style="color: orange;">自定义：{{ row[column.field] }}</div>
<vxe-link status="primary" href="https://vxeui.com/" target="_blank">点击查看官网</vxe-link>
<div style="color: orange;">自定义：{{ row[column.field] }}</div>
<vxe-link status="primary" href="https://vxeui.com/" target="_blank">点击查看官网</vxe-link>
<div style="color: orange;">自定义：{{ row[column.field] }}</div>
<vxe-link status="primary" href="https://vxeui.com/" target="_blank">点击查看官网</vxe-link>
<div style="color: orange;">自定义：{{ row[column.field] }}</div>
<vxe-link status="primary" href="https://vxeui.com/" target="_blank">点击查看官网</vxe-link>
<div style="color: orange;">自定义：{{ row[column.field] }}</div>
<vxe-link status="primary" href="https://vxeui.com/" target="_blank">点击查看官网</vxe-link>
<div style="color: orange;">自定义：{{ row[column.field] }}</div>
<vxe-link status="primary" href="https://vxeui.com/" target="_blank">点击查看官网</vxe-link>
<div style="color: orange;">自定义：{{ row[column.field] }}</div>
<vxe-link status="primary" href="https://vxeui.com/" target="_blank">点击查看官网</vxe-link>
</div>
</template>
<!-- 自定义表尾单元格 Tooltip 内容 -->
<template #footer-tooltip="{ row, column }">
<div>
<div style="color: chartreuse">自定义表尾：{{ row[column.field] }}</div>
<div style="color: chartreuse">自定义表尾：{{ row[column.field] }}</div>
<div style="color: chartreuse">自定义表尾：{{ row[column.field] }}</div>
<div style="color: chartreuse">自定义表尾：{{ row[column.field] }}</div>
<div style="color: chartreuse">自定义表尾：{{ row[column.field] }}</div>
<div style="color: chartreuse">自定义表尾：{{ row[column.field] }}</div>
<div style="color: chartreuse">自定义表尾：{{ row[column.field] }}</div>
<div style="color: chartreuse">自定义表尾：{{ row[column.field] }}</div>
<div style="color: chartreuse">自定义表尾：{{ row[column.field] }}</div>
<div style="color: chartreuse">自定义表尾：{{ row[column.field] }}</div>
<div style="color: chartreuse">自定义表尾：{{ row[column.field] }}</div>
<div style="color: chartreuse">自定义表尾：{{ row[column.field] }}</div>
<div style="color: chartreuse">自定义表尾：{{ row[column.field] }}</div>
<div style="color: chartreuse">自定义表尾：{{ row[column.field] }}</div>
<div style="color: chartreuse">自定义表尾：{{ row[column.field] }}</div>
<div style="color: chartreuse">自定义表尾：{{ row[column.field] }}</div>
<div style="color: chartreuse">自定义表尾：{{ row[column.field] }}</div>
<div style="color: chartreuse">自定义表尾：{{ row[column.field] }}</div>
<div style="color: chartreuse">自定义表尾：{{ row[column.field] }}</div>
<div style="color: chartreuse">自定义表尾：{{ row[column.field] }}</div>
<div style="color: chartreuse">自定义表尾：{{ row[column.field] }}</div>
<div style="color: chartreuse">自定义表尾：{{ row[column.field] }}</div>
<div style="color: chartreuse">自定义表尾：{{ row[column.field] }}</div>
</div>
</template>
</vxe-grid>
</div>
</template>
<script setup>
import { reactive } from 'vue'
const gridOptions = reactive({
height: 300,
showOverflow: true,
showHeaderOverflow: true,
showFooterOverflow: true,
showFooter: true,
// 表头 Tooltip 尺寸限制：最大宽200，最大高100，超出滚动
headerTooltipConfig: {
maxWidth: 200,
maxHeight: 100
},
// 单元格 Tooltip 尺寸限制：最大宽400，最大高300
tooltipConfig: {
maxWidth: 400,
maxHeight: 300
},
// 表尾 Tooltip 尺寸限制
footerTooltipConfig: {
maxWidth: 200,
maxHeight: 100
},
columns: [
{ field: 'seq', type: 'seq', width: 70 },
{ field: 'name', title: '名称' },
{ field: 'role', title: '角色' },
{ field: 'date', title: '日期日期日期日期日期日期日期日期日期', width: 200 },
{ field: 'rate', title: 'Rate' },
{ field: 'address', title: '地址地址地址地址地址地址地址地址地址地址', width: 200 }
],
data: [
{ name: 'Test1', role: '前端', date: '2020-02-14', rate: 5, address: 'address1' },
{ name: 'Test2', role: '后端', date: '2020-02-22', rate: 2, address: 'address1' },
{ name: 'Test3', role: '前端前端前端前端前端前端前端前端', date: '2020-01-01', rate: 0, address: '深圳市深圳市深圳市深圳市深圳市深圳市' },
{ name: 'Test4', role: '设计师设计师设计师设计师设计师设计师设计师', date: '2020-02-23', rate: 1, address: '上海市上海市上海市上海市上海市上海市' },
{ name: 'Test5', role: '前端', date: '2020-01-20', rate: 3, address: '广州市广州市广州市广州市广州市广州市广州市广州市广州市' }
],
footerData: [
{ seq: '合计', date: '2020-02-23', rate: '123456789123456789123456789123456789' }
]
})
</script>
- tooltipConfig 仅对设置了 showOverflow 的列生效。对于不开启溢出提示的列，Tooltip 不会出现，也就无法控制滚动。
- 如果自定义插槽内容本身已经具有滚动条（例如内部 div 设置了 overflow: auto），则表格的 maxHeight 仍会限制整个 Tooltip 容器，可能导致双重滚动条。建议统一使用表格配置控制，避免内嵌滚动。
