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

原创已于 2022-06-21 11:04:38 修改 · 9.8k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #visual studio code #elementui

于 2022-06-16 19:15:11 首次发布

前端编码问题专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在Element-UI的el-table中解决show-overflow-tooltip属性下tooltip文本提示内容不显示的问题，重点在于理解z-index在层级关系中的作用，并通过调整属性表的z-index值使之低于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;
        }

问题完美解决，希望可以帮助到你们！！！