el-tooltip多行

### 配置 `el-tooltip` 实现多行文本提示

为了使 `el-tooltip` 支持多行文本显示，可以利用 CSS 和 JavaScript 来调整其行为。由于原生的 `el-tooltip` 不直接支持按需自适应宽度[^1]，因此需要额外处理。

#### 使用 CSS 控制 Tooltip 宽度

通过设置特定类名下的样式规则，可以让工具提示框自动换行并保持合适的宽度：

.el-tooltip__popper {
    max-width: 300px;
    white-space: normal !important;
}

这段代码确保了当内容超出指定的最大宽度时能够正常换行而不是被截断[^4]。

#### 动态控制 Tooltip 显示逻辑

对于仅在文本溢出时才显示的情况，在 Vue 组件内部可以通过监听 DOM 变化来判断是否应该激活 tooltip 效果[^2]：

export default {
  data() {
    return {
      showTooltip: false,
    };
  },
  mounted() {
    this.checkOverflow();
    window.addEventListener('resize', this.checkOverflow);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.checkOverflow);
  },
  methods: {
    checkOverflow() {
      const el = this.$refs.textContainer;
      if (el.scrollWidth > el.offsetWidth || el.scrollHeight > el.offsetHeight) {
        this.showTooltip = true;
      } else {
        this.showTooltip = false;
      }
    },
  },
};

上述方法会在组件挂载完成后立即执行一次检测，并且每当窗口大小发生变化时也会重新评估是否需要显示 tooltip。

#### HTML 结构示例

结合前面提到的技术点，完整的模板结构可能如下所示：

<template>
  <div ref="textContainer">
    <!-- 当前元素 -->
    <span :class="{ 'overflow-hidden': !showTooltip }">{{ text }}</span>

    <!-- 工具提示 -->
    <el-tooltip v-if="showTooltip" effect="dark" :content="text" placement="top-start">
      <span>{{ text }}</span>
    </el-tooltip>
  </div>
</template>

在这个例子中，如果文本未发生溢出，则不会渲染 `el-tooltip`；反之则会启用它以提供更详细的说明。