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

相关内容

热门资讯

怎么才能让鹦鹉说话? 怎么才能让鹦鹉说话?不是所有鹦鹉都会说话的，虎皮 牡丹 玄凤 之类的就不会说话，虽然有些资料上介绍 ...
孙悟空在南瞻部州被称呼为什么？ 孙悟空在南瞻部州被称呼为什么？孙悟空在南瞻部州被称为孙大圣。他的称呼是比较威武凶猛的。因为他的人物形...
“每一个晚上”英语怎么讲 “每一个晚上”英语怎么讲every night
我在红袖写了一篇小说，只有签约... 我在红袖写了一篇小说，只有签约，没有上架，请问怎么样才能拿到稿费，我是签网协的每天都有更新的话。。达...
王朔：这辈子最对不起老婆和女儿... 王朔：这辈子最对不起老婆和女儿，但我死后财产全归徐静蕾，这是为何呢？因为在这个人的心中，徐静蕾才是自...
游戏《天地玄门》激活账号的激活... 游戏《天地玄门》激活账号的激活码怎么写？那个游戏得发短信到腾武才会获得激活码
孩子课后作业辅导，如何让老公平... 孩子课后作业辅导，如何让老公平心静气的教孩子？可以告诉老公，孩子的辅导需要老公有耐心一些，因为孩子犯...
《阿姨暖暖你的手》阅读题答案 《阿姨暖暖你的手》阅读题答案1、“春寒料峭”和“春暖花开”都是形容春天的词语。文中第（2）段中的“春...
想找到一本有声小说，喜马拉雅有... 想找到一本有声小说，喜马拉雅有，但是我忘记名字了。讲的是茅山道士的故事，但不是紫襟讲的，我问过了？书...
郝邵文合释小龙都演过什么电影我... 郝邵文合释小龙都演过什么电影我想知道，要全的1、笑林小子（又名：旋风小子）2、笑林小子2之乌龙院3、...
林黛玉放屁拉肚子 林黛玉放屁拉肚子林黛玉放屁拉肚子是《红楼梦》中的一个情节。在小说中，林黛玉因为情绪低落和身体不适而出...
克雷洛夫寓言有哪些寓言故事?故... 克雷洛夫寓言有哪些寓言故事?故事的主要内容及道理是什么?最起码说出3个,克雷洛夫寓言有哪些寓言故事?...
请告诉我一点笑话! 请告诉我一点笑话!告诉我一点笑话便可!如此美丽夜晚孤独是一种遗憾，想念着得不到的爱情已经成为习惯，情...
樱花、新年、任性、武士、爆破、... 樱花、新年、任性、武士、爆破、缇娜、武媚娘、土豪biangbiang面、萌萌哒、小鲜肉、醉了 用以上...
东北出马仙堂怎么写 东北出马仙堂怎么写去找高人查看 ，看看是否具备出马缘分，出马仙的堂单一般都是仙 或者给你立堂的师傅给...
探访鹿邑：漫步古城，寻迹历史名... 探访鹿邑：漫步古城，寻迹历史名人之路鹿邑是一个历史悠久的古城，有着丰富的文化底蕴和历史遗迹。探访鹿邑...
类似与儒道至圣的小说 类似与儒道至圣的小说[剑三+文修]自古名士真国色[系统]国士无双
星际争霸2人族怎么防隐形?怎么... 星际争霸2人族怎么防隐形?怎么看隐形?：轨道控制基地的雷达，防空塔和渡鸦自带的反隐效果人族有4招防隐...
谁有《从零开始学画漫画》电子书... 谁有《从零开始学画漫画》电子书 谢谢亲，去狗狗书籍呗，你去新浪爱问搜搜，应该能找到》
公主日记1里有首笨爱神的歌叫什... 公主日记1里有首笨爱神的歌叫什么名字stupid cupidstupid cupidstupid c...