项目场景：

使用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;}

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

前端Element-UI中show-overflow-tooltip属性不生效相关推荐

Web前端笔记-element ui中table中某列添加a便签进行跳转
效果是这样的: 这里的文章标题和查看都可以进行跳转. 其中对应的代码如下: <template style="height: 100%"><el-table:da ...
Web前端笔记-修改element ui中表格样式（透明、去横纵线等含修改思路）
官方效果是这样的: 此处改成了这样的效果: 此处是可以进行滑动的,就是去除了滑动条,仍能滑动的效果. 下面说下修改样式,找到使用el-table的vue组建: 在style中贴上: <style ...
关于Element UI中页面样式小问题
一,修改组件dialog窗口的大小二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...
element ui 中 el-checkbox-group 点击一个全部选中的问题
element ui 中 el-checkbox-group 点击一个全部选中的问题原因是:checkbox-group中的v-modle要单独一个数组对象,不能作为表单对象,ruleForm中的一 ...
Element UI中Steps 步骤条description描述换行展示
突然要求加了个显示字段,之前的代码只能显示一行,于是乎找到了解决办法,代码如下:其中的属性自行到官网查看释义吧:Element UI官网传送门 <el-table><!-- 可展开的 ...
修改element ui中form表单的 label 颜色样式
此时,emement ui的form表单的label(年龄二字)是黑色的. 原代码: <template><el-form :model="numberValidateFo ...
element ui中的el-dropdown（下拉框）防止点一下就隐藏的问题
element ui中的el-dropdown(下拉框)防止点一下就影藏的问题当使用el-dropdown下拉框时,下拉框的每项中,可能需要加入@click.@change或复选框等事件,而el-d ...
关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
Vue：Vue的element组件中的el-row的属性gutter什么意思？
Vue:Vue的element组件中的el-row的属性gutter什么意思? 资源 gutter elementui中gutter和offset的区别
使用xlsx 下载 element ui 中的表格
原文链接: 使用xlsx 下载 element ui 中的表格上一篇: MongoDB 聚合下一篇: vue router 路由守卫登录验证 https://github.com/SheetJS ...

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

项目场景：

问题描述

原因分析：

解决方案：

前端Element-UI中show-overflow-tooltip属性不生效相关推荐

最新文章

热门文章