Element el-table组件的show-overflow-tooltip的实现原理

最新推荐文章于 2024-02-27 09:06:41 发布

Vgbire

最新推荐文章于 2024-02-27 09:06:41 发布

阅读量3.9k

点赞数 2

文章标签： javascript 前端表格 table

本文链接：https://blog.csdn.net/rkhker/article/details/116126931

版权

Element el-table的show-overflow-tooltip

刚开始用到这个属性的时候还有点好奇，他是如何判断字体超出了容器的宽度，完成鼠标悬浮上去时在超出宽度时显示tooltip，未超出就不显示的功能。
因为我们经常为了省事使用原生title属性代替tooltip功能，但是我们做出的效果确实，不管是否隐藏鼠标悬浮上去都会显示title的信息，看起来不够“智能”。

如何自己实现

为了足够通用，我不用Vue不用Element，用div和原生title属性来实现同样的效果。

<!DOCTYPE html>
<html lang="en">
<head>-
    <title>Document</title>
    <style>
        #div{
            width: 100px;
            border: 1px solid #ccc;
        }
        #text{
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <button onclick="overflow()">超出宽度</button>
    <div id="div"><div id="text"></div></div>
    <script>
        let div = document.querySelector('#div')
        let span = document.querySelector('#text')
        span.textContent = '超长了'
        if(div.clientWidth < span.scrollWidth){
            div.title = 'title显示了'
        }
        function overflow(){
            span.textContent = '很长很长20cm很长很长很长很长'
            console.log(div.clientWidth, span.scrollWidth)
            if(div.clientWidth < span.scrollWidth){
                div.title = 'title显示了'
            }
        }
    </script>
</body>
</html>

我们通过判断父容器的clientWidth是否小于文本容器的scrollWidth来判断文本是否隐藏了。再以此决定是否显示title。clientWidth是容器的宽度，scrollWidth是内容的宽度包括超出隐藏的部分。
Element的show-overflow-tooltip也是如此实现的，在渲染的时候，判断文本容器是否超出父容器，超出了鼠标悬浮才显示tooltip，否则不显示。

Vgbire

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
Element el-table组件的show-overflow-tooltip的实现原理

Element el-table组件的show-overflow-tooltip属性可以让单元格的文本内容在超出单元格宽度的才显示tooltip
复制链接

扫一扫