如何在溢出时触发tooltip，其他时候不触发？

用过element的可能知道，在文本溢出时，Table组件有个属性好用：show-overflow-tooltip，当文本超过给定的width时，显示tooltip，否则不显示。

demo:

<el-table-column align="center" show-overflow-tooltip label="数据链路代号" prop="tlCode" />

也有很多人研究了，原来就是对比文本框指定宽度和文字的实际宽度，加入实际宽度大于文本框指定宽度，那么显示tooltip，否则关闭。

最后发现一个人在外面封装了一层，不影响el原来的代码，就拿来改改用起来了。

在components文件夹下新建tooltipOverflow.vue：

<template>
  <div class="text-tooltip">
    <el-tooltip class="item" effect="dark" :visible="isShowTooltip" :content="content" :placement="placement">
      <p class="over-flow" :class="className" @mouseover="onMouseOver(refName)" @mouseleave="onMouseLeave()">
        <span :ref="refName">{{ content || '-' }}</span>
      </p>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  name: 'textTooltip',
  props: {
    // 显示的文字内容
    content: {
      type: String,
      default: () => {
        return ''
      }
    },
    // 位置
    placement: {
      type: String,
      default: () => {
        return 'top'
      }
    },
    // 外层框的样式，在传入的这个类名中设置文字显示的宽度
    className: {
      type: String,
      default: () => {
        return ''
      }
    },
    // 为页面文字标识（如在同一页面中调用多次组件，此参数不可重复）
    refName: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  data() {
    return {
      isShowTooltip: false
    }
  },
  methods: {
    onMouseOver(str) {
      let parentWidth = this.$refs[str].parentNode.offsetWidth;
      let contentWidth = this.$refs[str].offsetWidth;

      // 若子集比中间层更宽 开启tooltip功能
      if (contentWidth > parentWidth) {
        this.isShowTooltip = true;
      } else { // 否则 关掉tooltip功能
        this.isShowTooltip = false;
      }
    },
    // 加上了这个方法，否则tooltip一直显示
    onMouseLeave() {
        this.isShowTooltip = false
    }
  }
}
</script>

<style lang="scss" scoped>
.over-flow {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}


p {
  margin: 0;
}

.zzorname {
  margin-right: 3rem;
  width: 420px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.zzponame {
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>

使用：

<el-tree-v2 :data="vTreeData" show-checkbox :props="props" :height="508" @check-change="checkChange" ref="vTreeRef">
  <template #default="{ data }">
    <div></div>
    <div class="prefix name">{{ data.zzename }}</div>
    <div class="prefix code ">{{ data.zzecode }}</div>

    <tooltipOver effect="dark" :content="data.zzorname" placement="top" :refName="data.zzecode + data.zzorname"
      class="zzorname">
    </tooltipOver>

    <tooltipOver effect="dark" :content="data.zzponame" placement="top" :refName="data.zzecode + data.zzponame"
      class="zzponame">
    </tooltipOver>
  </template>
</el-tree-v2>

参考

文本溢出与 Tooltip，如何更好的处理二者

[element-ui] el-tooltip 超出部分显示省略号，鼠标悬浮显示详情 , 没超出的不给予提示。