element ui表格showOverflowTooltip文字过长优化方案
创始人
2024-06-02 11:06:17
0次

在 table 组件展示数据时，对于文本过长的单元格添加show-overflow-tootip 属性后，tooltip 的宽度会撑满屏幕
在这里插入图片描述
从 DOM 节点可以看到，当鼠标进入 show-overflow-tooltip 属性作用的单元格时，body 下会多一个 class 为 el-tooltip__popper 的节点，这个节点就是真实的 tooltip 的 DOM

在这里插入图片描述
看来，一种非常直观的优化，就是直接重新 el-tooltip__popper 的样式，像这样：

注意：这个样式重写必须通过设置全局样式修改，如果在组件中添加样式不能使用 scoped 属性

在这里插入图片描述

上面这种方法的缺点显而易见，会造成全局样式的污染。在 table 组件源码中，可以从 table-body.js 中发现，showOverflowTooltip 的实现，也是使用了 element ui 的 tooltip 组件

如此，这里关闭 showOverflowTooltip，用 slot 重写单元格内容，使用我们自己定义的 tooltip 样式，像这样：

并且只需要在组件中修改 tooltip 提示内容的样式即可

而这种方法也有缺点，每个单元格都会有 tooltip 逻辑，而不是在文本超出裁剪之后才显示，那就就按需选择吧

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：JavaScript Window对象

下一篇：c++11 标准模板（STL）（std::unordered_map）（十）

相关内容

热门资讯

资本界金控(00204.HK)... 格隆汇7月2日丨资本界金控(00204.HK)公告，公司近期与江苏福万代科技信息有限公司("福万代"...
新希望：独立董事彭龙接受纪律审... 转自：财联社【新希望：独立董事彭龙接受纪律审查和监察调查】财联社7月2日电，新希望公告，公司独立董事...
3岁萌娃迷路街头，妈妈急疯！两... 来源：杭州公安 “你好 我在天万街与羊头坝路交叉口的桥上 这边有个小孩子找不到家人一直在哭” 6月2...
中考成绩单｜低波策略业绩盘点 （转自：国泰基金微幸福）
华菱钢铁：投资者建议连续三年回... 投资者提问：回购注销是财务手段里提升pb最稳定最可靠最有效的方式，在pb回升到1之前，每年分红可以少...
今年前5个月销量排名前十位轿车... 转自：北京商报北京商报讯（记者 刘晓梦）7月2日，据中国汽车工业协会统计分析，今年前5个月，销量排名...
法国已有2人死于热浪 转自：新华社新华社巴黎7月2日电（记者罗毓）法国商业调频电视台2日上午报道，最近该国遭遇强热浪天气，...
赛意信息(300687.SZ)... 格隆汇7月2日丨赛意信息(300687.SZ)公布，截至2025年6月30日，公司通过股份回购专用证...
比亚迪汽车：海洋网累计销售超5... 7月2日，比亚迪汽车官方微博显示，比亚迪海洋网6月热销196766辆，同比增长24.6%。2025年...
能特科技：拟以3亿元-5亿元回... 格隆汇7月2日｜能特科技公告，公司拟使用自有资金及自筹资金，本次回购股份将全部用于注销并相应减少注册...