table中的内容超过2行自动显示Tooltip

Rabbityyhh

已于 2023-01-05 15:39:34 修改

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签：前端 vue.js

于 2022-12-30 10:43:55 首次发布

本文链接：https://blog.csdn.net/weixin_46645338/article/details/128492253

vue 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何在Vue的el-table组件中，当内容超过两行时显示省略号，并在鼠标悬浮时通过Tooltip显示完整内容。通过监听鼠标移入事件和计算文本宽度，动态控制Tooltip的显示与隐藏，同时优化了未超过两行内容时的悬浮行为。涉及到的技术点包括CSS样式控制（如webkit-line-clamp）和Vue的条件渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当我们在table中的某列内容过多时，会撑开td的高度，导致非常的难看

本文介绍的是，当内容超过两行时，超出的部分用 … 代替，并且鼠标悬浮时，会显示出所有的内容

但是当内容未超过两行时，鼠标悬浮时不显示Tooltip

下面先看效果
在这里插入图片描述

在这里插入图片描述

template

              <el-table-column label="项目名称" min-width="25%" align="left">
                <template slot-scope="scope">
                  <el-tooltip
                  placement="bottom"
                  v-model="scope.row.showTooltip"
                  effect="light"
                  :disabled="!scope.row.showTooltip"
                  >
                    <div slot="content">{{scope.row.itemName}}</div>
                    <div @mouseenter="showTips($event,scope.row)" class='myNote'>{{scope.row.itemName}}</div>
                  </el-tooltip>
                </template>
              </el-table-column>

注意！ 显示悬浮提示时v-model 和 disabled属性要一起使用才有效果。
加上鼠标移入事件控制方法的触发时间

methods

      showTips(obj, row){
        /*obj为鼠标移入时的事件对象*/
        /*currentWidth 为文本在页面中所占的宽度，创建标签，加入到页面，获取currentWidth ,最后在移除*/
        let TemporaryTag = document.createElement('span');
        TemporaryTag.innerText = row.itemName;
        TemporaryTag.className = 'getTextWidth';
        document.querySelector('body').appendChild(TemporaryTag);
        let currentWidth = document.querySelector('.getTextWidth').offsetWidth;
        document.querySelector('.getTextWidth').remove();
        /*cellWidth为表格容器的宽度*/
        const cellWidth = obj.target.offsetWidth
        /*当文本宽度小于||等于容器宽度两倍时，代表文本显示未超过两行*/
        currentWidth <= (2*cellWidth) ? row.showTooltip = false : row.showTooltip = true
      },
        
  粘贴这部分代码的时候注意修改第五行中的内容（跟自己的业务符合）

style

  .myNote{
    display:-webkit-box;
    text-overflow:ellipsis;
    overflow:hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient:vertical;
  }

webkit-line-clamp 你可以随意控制几行，不一定非得是两行，看实际业务

！！！！！！注意showTooltip必须从后端传过来，否则当操作表格，例如翻页后，这个功能会失效！！！！！！