element ui el-table 表头内容超出省略，悬浮时显示（Tooltip 文字提示效果）

最新推荐文章于 2025-06-13 11:46:37 发布

codernmx

最新推荐文章于 2025-06-13 11:46:37 发布

阅读量5.5k

点赞数 2

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/qq_31754591/article/details/125187630

Vue 同时被 2 个专栏收录

63 篇文章

订阅专栏

Element

28 篇文章

订阅专栏

本文介绍了如何在前端开发中利用Element-UI库，通过设置表头和表体的样式及事件监听，实现当内容过长时智能显示Tooltip提示。具体方法包括设置min-width属性、判断内容宽度与父元素宽度，以及通过mouseover事件控制Tooltip的显示。同时展示了实际效果，帮助开发者优化表格展示效果。

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

❤️砥砺前行，不负余光，永远在路上❤️

一、设置表头

<el-table-column min-width="8%">
  <template slot="header">
    <div @mouseover="onMouseOver('technology')">
      <el-tooltip
        :disabled="isShowTooltip"
        content="*技术偏离(若无偏离勾选无偏离，有偏离则勾选有偏离，并上传偏离文件)"
        placement="top"
      >
        <div><span ref="technology">*技术偏离...</span></div>
      </el-tooltip>
    </div>
  </template>
  <template slot-scope="scope">
    <span>{{ scope.row.technology }}</span>
  </template>
</el-table-column>

methods：

onMouseOver(refName) {
  let parentWidth = this.$refs[refName].parentNode.offsetWidth;
  let contentWidth = this.$refs[refName].offsetWidth;
  // 判断是否开启tooltip功能
  if (contentWidth > parentWidth) {
    this.isShowTooltip = false;
  } else {
    this.isShowTooltip = true;
  }
},

data() {
	return {
		isShowTooltip: false
	}
},

二、设置表体

表体设置只需要一个show-overflow-tooltip属性就行

<el-table-column label="运输费用" min-width="20" show-overflow-tooltip>

在这里插入图片描述

三、实际效果

在这里插入图片描述

参考：https://my.oschina.net/u/3455362/blog/4674804