项目场景:
使用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;}
问题完美解决,希望可以帮助到你们!!!
版权归原作者 空言道何以弘道 所有, 如有侵权,请联系我们删除。