vxe-table 单元格 Tooltip 内容过多时启用滚动条

在使用 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，最大高300tooltipConfig: {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 容器，可能导致双重滚动条。建议统一使用表格配置控制，避免内嵌滚动。

https://vxetable.cn