问题复现
界面使用的某个table组件是之前员工自己写的,性能不太好,想要换成高性能的组件,在网上找到了vxe-table
官方网站: https://vxetable.cn/#/demo/list
因为我们的网页是打包后放在服务器上,用户在打开这个网页时申请网页资源下载到本地再打开,因此对工程打包后的大小比较敏感;
刚开始使用了vxe全套组件,
但是打包测试后发现vxe-ui占用的体积比vxe-table还大
于是考虑仅仅引入vxe-table然后祛除vxe-ui部分,修改为:
测试发现打包时确实不再有vxe-ui的文件了,但是运行的时候发现控制台会有警告:
而实际代码中并没有主动使用vxe-tooltip的部分,vxe代码:
<template>
<div class="container" ref="container">
<vxe-table class="vxeTable" ref="theTable"
:min-height="30"
:max-height="height"
:style="{ maxWidth: actualWidth + 'px' }"
:border="border" :align="align"
:row-config="{
height: rowHeight,
useKey: true,
isHover: rowHoverClass,
}"
:column-config="{
useKey: true,
}"
show-overflow
:scroll-x="{enabled: true, gt: 0}"
:scroll-y="{enabled: true, gt: 0}"
:loading="loading"
:loading-config="{
text: '',
}"
:header-cell-class-name="headerCellClassName"
:cell-class-name="cellClassName"
:row-class-name="RowSelect"
@cell-click="handlerCellClick"
:sort-config="{
trigger: 'cell',
showIcon: false,
sortMethod: customSortMethod,
orders: ['asc', 'desc'],
defaultSort: {
field: defaultSortField,
order: defaultSortOrder,
}
}"
v-bind="computedProps"
>
</vxe-table>
</div>
</template>
解决方法
修改vxe-table的属性:
show-overflow="title"
show-header-overflow="title"
show-footer-overflow="title"
具体原因是: show-overflow/show-header-overflow/show-footer-overflow 三个属性为true的时候会将对应的内容过长时显示为tooltip,从而触发使用vxe-tooltip组件,官方说明中有提到: