问题描述

element表格内容过多，鼠标悬浮显示全部内容（show-overflow-tooltip)，内容过长显示悬浮抖动
el-table设置show-overflow-tooltip属性后，数据过多时(超过3000字符)闪烁不显示
在table中设置了show-overflow-tooltip后,当某一列字符内容超长时,鼠标移入会出现闪烁不显示提示

解决方法：

方法一：可以使用el-popover代替tooltip

可以使用el-popover代替tooltip, 且重写el-popover的样式, 保持跟tooltip提示框样式一致：

<el-table-columnprop="problemDesc"label="问题描述"min-width="95"><template slot-scope="scope"><span v-if="scope.row.problemDesc && scope.row.problemDesc.length > 10"><el-popover placement="top-start" title="" width="800" trigger="hover" popper-class="workorder-problem-desc"><div>{{ scope.row.problemDesc }}</div><span slot="reference">{{ scope.row.problemDesc.substr(0,10) + '...' }}</span></el-popover></span><span v-else>{{ scope.row.problemDesc }}</span></template>
</el-table-column>

【重点】：修改el-popover样式需要放在不含scoped的style样式中，为了防止污染全局的el-popover样式，可以给popper添加类名：

所以修改el-popover样式为：
注意：这个一定要自己写类名，否则放在不含scoped的style中会污染全局样式

<style>
.workorder-problem-desc {background-color: #303133;color: #fff;border-color: #303133;
}
</style>

效果图：

方法二：使用show-overflow-tooltip超过一定的行数显示...

使用show-overflow-tooltip超过一定的行数，通过样式控制显示...

<el-table-columnprop="problemDesc"label="问题描述"min-width="95"show-overflow-tooltip>
</el-table-column>

样式：

<style>
.el-tooltip__popper {/* max-width:30%;padding-bottom: 5px!important; */display: -webkit-box;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 12;-webkit-box-orient: vertical;
}
</style>

其中-webkit-line-clamp是要显示的行数，例子显示12行。

效果图：

方法三：使用el-tooltip太长的时候显示滚动条【好用，推荐】

       <el-table-columnprop="problemDesc"label="问题描述"min-width="95"><template slot-scope="scope"><el-tooltipv-if="scope.row.problemDesc"popper-class="workorder-reason-popper"effect="dark":content="scope.row.problemDesc"placement="top":disabled="isShowTooltip"><div@mouseover="onMouseOver(scope.row.workorderNo)"style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"><span :ref="scope.row.workorderNo">{{ scope.row.problemDesc }}</span></div></el-tooltip><span v-else>—</span></template></el-table-column>

isShowTooltip: false,

获取可视宽度

    onMouseOver(str) {// 内容超出，显示文字提示内容let tag = this.$refs[str];let parentWidth = tag.parentNode.offsetWidth; // 获取元素父级可视宽度let contentWidth = tag.offsetWidth; // 获取元素可视宽度this.isShowTooltip = contentWidth <= parentWidth;},

注意样式写在不带scoped的style里面，为了避免影响其它样式，使用了自定义样式popper-class=“workorder-reason-popper”

<style>
.workorder-reason-popper {max-height: 300px;overflow: auto;
}
.workorder-reason-popper .popper__arrow {display: none;
}
</style>

效果图，带滚动条的鼠标hover显示全部：

前端字数太多使用el-table设置show-overflow-tooltip显示不下，闪烁不显示相关推荐

解决：el-table组件中设置show-overflow-tooltip属性，数据过多时闪烁不显示不能复制问题。
使用el-popover组件代替show-overflow-tooltip属性. ...  <el-table-column labe ...
Ubuntu设置虚拟机共享目录/mnt/hgfs下无文件显示相关问题归纳
文章目录问题一:/mnt目录下无hgfs文件夹问题二:/mnt/hgfs 文件夹为空问题一:/mnt目录下无hgfs文件夹问题背景: 在打开共享目录A的时候,突然改变共享目录,也就是从A改到了 ...
VMWare下设置共享文件夹，/mnt/hgfs下却不显示共享文件夹
sudo vmhgfs-fuse .host:/ /mnt/hgfs -o subtype=vmhgfs-fuse,allow_other 可以输入这行代码试试
fastreport文本字数太多换行_Flutter实战】文本组件及五大案例
老孟导读:大家好,这是[Flutter实战]系列文章的第二篇,这一篇讲解文本组件,文本组件包括文本展示组件(Text和RichText)和文本输入组件(TextField),基础用法和五个案例助你快速 ...
table 设置边框
本文引自:https://www.cnblogs.com/leona-d/p/6125896.html 示例代码: <!DOCTYPE html> <html lang=" ...
css table设置边框_table布局的一些总结
工作中遇到的自适应表格,实现过程并不顺畅,花费了一些功夫.将其中不熟悉的技术点总结如下,期待下次可以行云流水的做出来. 1.自适应表格如何实现文本溢出点点的效果自适应的表格,由于单元格的流动性,文字 ...
layui table 字体大小_layui table设置某一行的字体颜色方法
table自带的可以设置某一个单元格颜色,必须根据内容来修改,对于很多列同时修改并不方便,直接使用js操作比较简单. 首先自定义一个div,内部存放table,根据class找到table,然后找到行 ...
layui table 设置滚动条
table设置一下高度,就会自动出现滚动条: table.render({ elem: '#jqGrid' ,height: 420 <!DOCT ...
antd table设置表格一个单元格的字体颜色_开源 UI 库中，唯一同时实现了大表格虚拟化和树表格的 Table 组件
背景有这样一个需求,一位 React Suite (以下简称 rsuite)的用户,他需要一个 Table 组件能够像 Jira Portfolio 一样,支持树形数据,同时需要支持大数据渲染. 截 ...

前端字数太多使用el-table设置show-overflow-tooltip显示不下，闪烁不显示

问题描述

解决方法：

前端字数太多使用el-table设置show-overflow-tooltip显示不下，闪烁不显示相关推荐

最新文章

热门文章