网络知识 娱乐 前端Element-UI中show-overflow-tooltip属性不生效

前端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;
        }

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