前端Element-UI中show-overflow-tooltip属性不生效

项目场景:

使用Element-UI中的el-table对获取的属性数据进行展示

问题描述

el-table表格中设置show-overflow-tooltip属性,鼠标悬浮后,tooltip文本提示内容不显示

原因分析:

在网络上查看时,发现解决方法最多的就以下几个:
1、属性替换:
:show-overflow-tooltip="true"替换为show-overflow-tooltip
然而,无用(下一个);
2、使用show-overflow-tooltip需要添加嵌套才能生效
嵌套内容格式:标签,标签里面嵌套标签才能生效
(对于初学者是不是觉得看的有点懵?),上代码,类似这种

 <el-table-column prop="cooperateStatus" label="状态" min-width="110" align="center" show-overflow-tooltip>
           <template slot-scope="scope">
            <span v-if="scope.row.status== 0">启用</span>
          </template>
 </el-table-column>

然而,使用之后依旧无用(下一个);
3、偶尔的时机,顺着代码找到属性表父组件的时候,看到z-index,我觉得我的机会来了
首先属性表类的z-index设置为9999,当鼠标悬浮在省略的列上是,发现tooltip的z-index为2024,那么解决方法就一目了然了

解决方案:

z-index 属性指定一个元素的堆叠顺序,拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面;
通俗的说就是表格堆叠在tooltip上面了,当鼠标悬浮之后,tooltip其实是显示了出来,只是被属性表遮挡住了,我们看不见而已,所以只需要把属性表的Z-index设置的比tooltip小,那么属性表中的溢出列就会显示提示了

.propsTable {
            position: absolute;
            left: 390px;
            bottom: 0px;
            z-index: 99;
            width: 1400px;
            background-color: #fff;
        }

问题完美解决,希望可以帮助到你们!!!

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值