封装组件中使用el-tooltip，只有文本溢出时才显示，不溢出则不显示弹框

可以通过计算文本的宽度和容器的宽度，判断文本是否溢出来判断是否需要显示 el-tooltip。具体实现可以参考以下代码：

<template>
  <div class="container" ref="container">
    <span class="text" ref="text">{{ text }}</span>
    <el-tooltip 
      :disabled="!showTooltip" 
      placement="top">
      <div>{{ text }}</div>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '这是一段很长的文本，当它的宽度超过容器的宽度时，才会显示 el-tooltip。',
      showTooltip: false
    }
  },
  mounted() {
    this.$nextTick(() => {
      const containerWidth = this.$refs.container.offsetWidth
      const textWidth = this.$refs.text.offsetWidth
      if (textWidth > containerWidth) {
        this.showTooltip = true
      }
    })
  }
}
</script>

<style>
.container {
  position: relative;
  width: 100%;
}

.text {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

在这个例子中，我们首先通过 `this.$refs` 获取到容器和文本元素的 DOM 对象，并计算它们的宽度。然后判断文本的宽度是否大于容器的宽度，如果是，则显示 el-tooltip。在模版中，我们使用了 el-tooltip 的 `:disabled` 属性来控制是否显示。最后，我们使用了一些 CSS 属性来控制文本的溢出和省略号的显示。