element ui Table 文字超出3行用...省略号表示，并在toolti

最新推荐文章于 2024-04-24 16:51:14 发布

Igiveufireworks

最新推荐文章于 2024-04-24 16:51:14 发布

阅读量1.3k

点赞数 1

文章标签： vue.js javascript elementui css

本文链接：https://blog.youkuaiyun.com/Igiveufireworks/article/details/130500078

版权

文章讲述了如何在HTML表格中处理过长的文字，通过CSS实现最多展示3行并用省略号表示超出部分，同时在鼠标移入时利用JavaScript控制tooltip显示完整内容。方法涉及到文本宽度计算和行数限制。

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

需求：table文字过长，最多展示3行，超出用...省略号显示，鼠标移入时用tooltip文字提示，文字没有超出3行则不用tooltip。

html：

            <el-table-column label="政策" prop="policyAccording" class="hide" width="170">
              <template #default="scope" >
                <el-tooltip :content="scope.row.policyAccording" effect="light" placement="top-start" :disabled="!isShowTooltip" >
                  <div class="hide" @mouseover="onMouseOver($event,scope.row.policyAccording)">
                    <span :ref="scope.row.policyAccording">{{ scope.row.policyAccording || '-' }}</span>
                  </div>
                </el-tooltip>
              </template>
            </el-table-column>

css：

  .hide {
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    white-space: pre-line;
  }

js:

    onMouseOver (obj, str) { 
      // 内容超出，显示文字提示内容
      /*currentWidth 为文本在页面中所占的宽度，创建标签，加入到页面，获取currentWidth ,最后在移除*/
      let TemporaryTag = document.createElement('span');
      TemporaryTag.innerText = str;
      TemporaryTag.className = 'getTextWidth';
      document.querySelector('body').appendChild(TemporaryTag);
      let currentWidth = document.querySelector('.getTextWidth').offsetWidth;
      document.querySelector('.getTextWidth').remove();

      /*cellWidth为表格容器的宽度*/
      const cellWidth = obj.target.offsetWidth

      /*当文本宽度小于||等于容器宽度3倍时，代表文本显示未超过3行*/
      currentWidth <= (3*cellWidth) ? this.isShowTooltip = false : this.isShowTooltip = true
    }