基于el-tooltip+vue实现有省略号显示title，无省略号不显示title

最新推荐文章于 2025-03-12 09:16:27 发布

兮刈_lz

最新推荐文章于 2025-03-12 09:16:27 发布

阅读量2k

点赞数 5

分类专栏： vue.js 文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/qq_64803883/article/details/121979686

版权

本文记录在Vue项目中如何利用el-tooltip组件，根据元素内容是否有省略号决定是否显示title。通过比较元素的clientWidth和scrollWidth，实现有省略号时显示tooltip，无省略号时不显示的功能。

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

日常项目中，给一个元素添加title要么使用原生的title属性，要么使用插件或者自己模拟。在vue项目中则可以使用el-tooltip来实现，项目中经常有这种需求，有省略号显示tooltip，没有则不显示。之前看网上的很多都是提供思路，很少有直接拿来能用的例子，根本不能满足像本人这种信奉拿来主义的菜菜鸟。正好目前做的项目有这个需求，在项目中也实现了该功能，这里记录一下为以后的复制粘贴做准备。

vue文件：

<template>
  <!-- 有省略号显示tooltip,没有省略号不显示tooltip 全局组件-->
  <div>
    <el-tooltip :disabled="tooltipDisabled" :content="content" placement="top">
      <div
        ref="elipsisDom"
        class="text-ellipsis"
        @mouseenter="spanMouseenter($event)"
      >
        {
  { content }}
      </div>
    </el-tooltip>
  </div>
</template>
<script>
export default {
  props: ["content"],
  data() {
    return {
      tooltipDisabled: true,
    };
  },
  methods: {
    spanMouseenter(ev) {
      if (ev.target.c