结合Elementui实现文字溢出才展示Tooltip

在使用Element UI时，可以结合Tooltip组件来实现文本溢出显示Tooltip。以下是一个简单的例子：

<template>
  <el-tooltip class="item" effect="dark" placement="top" :content="content" :disabled="isDisabled">
    <div class="text-overflow">{{ content }}</div>
  </el-tooltip>
</template>
 
<script>
export default {
  data() {
    return {
      content: '这是一段很长的文本，当文本超出容器范围时，会显示Tooltip。'
    };
  },
  computed: {
    isDisabled() {
      return this.content.length < this.$el.clientWidth; // 当文本长度小于容器宽度时，不显示Tooltip
    }
  }
};
</script>
 
<style scoped>
.text-overflow {
  width: 200px; /* 定义一个容器宽度 */
  white-space: nowrap; /* 确保文本不会换行 */
  overflow: hidden; /* 超出容器部分的文本将被隐藏 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  text-align: center;
}
</style>

在这个例子中，.text-overflow 类定义了一个容器，该容器有固定的宽度，并且通过CSS规则确保文本溢出时隐藏，并以省略号显示。el-tooltip 组件绑定了这个容器，并在内容溢出时显示Tooltip。通过计算属性isDisabled，当文本长度不超出容器宽度时，将禁用Tooltip的显示。