只安装vxe-table时,使用show-overflow控制台报错 [vxe table v4.7.76] 缺少 “vxe-tooltip“ 组件,请检查是否正确安装

问题复现

界面使用的某个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组件,官方说明中有提到:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值