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）（十）

相关内容

热门资讯

六月二十七日望湖楼醉书 这首诗... 六月二十七日望湖楼醉书 这首诗的写作结构是怎样的？雨前：黑云到入船。雨停：第三句。雨后：最后一句
如果我带着醉意出生,或许我会忘... 如果我带着醉意出生,或许我会忘掉所有的哀伤,这是哪本书上的句子《八百万种死法》，最近电视剧无懈可击之...
优美动人怎么造句孑 优美动人怎么造句孑她的舞姿优美动人，真是让人难以忘怀！
在科学上没有平坦的大道，只有不... 在科学上没有平坦的大道，只有不畏艰险沿着陡峭山路攀登的人，才有希望达到光辉的顶点。这句话的意思。这句...
有什么好看的网王小说？要完结的 有什么好看的网王小说？要完结的四叶三叶草，我的幸福《网王守望幸福《网王——今生无忧》（《夏之纪年》《...
郭达换大米剧本谁写的 郭达换大米剧本谁写的换大米的作者是 郭达和蔡明
园林绿化公司怎么起名 园林绿化公司怎么起名我们是做园林绿化设计、施工管理的自然世界园林绿化公司，新鲜空气园林绿化公司，超时...
命运石之门，谁发信对主人公说你... 命运石之门，谁发信对主人公说你知道的太多了FB指示萌郁发送的(官方资料设定集里写了)FB即是楼下的显...
有关超市开业播放的音乐 有关超市开业播放的音乐请各位关注本问题的大侠们，帮我找一下超市、商场开业时用到的喜庆音乐！谢谢，有追...
现代人物人物苦学成才的故事 现代人物人物苦学成才的故事现代人物人物苦学成才的故事 张恨水先生是我国著名的现代作家。17岁时，他...
是惊的成语，以惊字结尾的成语，... 是惊的成语，以惊字结尾的成语，惊字在后面的成语 第四个字是惊的成语详细〔 胆颤心惊 〕颤：发抖。形...
判断一个女人对你“欲擒故纵”，... 判断一个女人对你“欲擒故纵”，还是“压根没戏”，关键看哪几点？首先知竖，对方给你回消息的语气。如历芹...
自己写的儿童诗 自己写的儿童诗有什么可以帮你的追问：我要自己写的儿童诗，谢谢了！追答：主要是我都不知道有什么要求啊追...
地下城堡2聚火之心有用吗 地下城堡2聚火之心有用吗有用。《地下城堡2：黑暗觉醒》是一款模拟经营与地牢探险游戏高贺轿。游戏中聚火...
在学校如何和老师斗智斗勇 在学校如何和老师斗智斗勇 老师说上课是对牛弹琴时，作为学生的我们应该感到高兴，因为老师说的是事实啊...
神级龙卫男主和谁在一起 神级龙卫男主和谁在一起你好。神级龙卫男主沈浪跟女主白倾雨,苏若雪,柳潇潇最终走到一起了。让我们来看看...
开学以来作文520初中 开学以来作文520初中初一的感觉 似水流年,今天的我们已不再是在草地里玩过家家的小朋友；今天的我们已...
家有黄仙能养两只猫吗 家有黄仙能养两只猫吗可以养的，不犯冲突，猫捉老鼠是老鼠的天敌，养猫后家里的老鼠会少很多。
失忆后的人会不会有恐惧和绝望的... 失忆后的人会不会有恐惧和绝望的心理？我是指那种完全忘记了自己的一切的人。失忆...如果真的全部忘记，...
胡萝卜长期保存方法 胡萝卜长期保存方法胡萝卜放保鲜袋里放冰箱可以放很长时间。