vxe-table插件，使用show-overflow控制台报错 [vxe table v3.16.1] 缺少 “vxe-tooltip“ 组件，请检查是否正确安装。
"vxe-table":"3.16.1",
"xe-utils":"^3.5.7",
"xss":"^1.0.11"
原因
vxe-table 提供了强大的表格功能，其中 tooltip 用于显示超出单元格内容的提示信息。默认情况下，show-overflow 属性会触发 tooltip，但需要确保正确安装了 vxe-tooltip 组件。
<template>
<vxe-table
:data="tableData"
:columns="columns"
show-overflow
show-header-overflow="tooltip"
show-footer-overflow="tooltip"
></vxe-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: "张三", age: 28 },
{ name: "李四", age: 32 },
],
columns: [
{ field: "name", title: "姓名", width: 100 },
{ field: "age", title: "年龄", width: 100 },
],
};
},
};
</script>
组件依赖
如果控制台报错提示缺少 vxe-tooltip，需要安装并引入相关组件。
vxe-tooltip 不是从 vxe-table 导入的，而是从 vxe-pc-ui 导入的
npm install vxe-pc-ui
import { VxeUI } from 'vxe-table';
import { VxeTooltip } from 'vxe-pc-ui';
VxeUI.component(VxeTooltip);
如果不需要完整的 UI 库，占用体积大，可以仅引入必要的组件以减小打包体积，或者启用 title 功能。
解决方法
修改vxe-table的属性，启用 title 功能
show-overflow="title"
show-header-overflow="title"
show-footer-overflow="title"
show-overflow/show-header-overflow/show-footer-overflow 三个属性为true的时候会将对应的内容过长时显示为tooltip，从而触发使用vxe-tooltip组件：
参考文档
