el-table-column的show-overflow-tooltip悬浮异位

`el-table-column` 的 `show-overflow-tooltip` 属性用于当列内容溢出时显示一个提示 tooltip。这个属性允许你在单元格的内容过多无法全部展示时，提供额外的信息给用户，通常会在鼠标悬停在超出部分时显示。当设置为 `true` 时，如果单元格的文字或图标超过其容器的宽度，一个带有省略标记的tooltip就会出现，鼠标移开后tooltip会自动消失。

为了实现这种悬浮异位效果，你需要确保 `title` 或者自定义的 tooltip 内容已经被设置，并且列的样式已经设置了适当的宽度限制。当内容超过这个宽度时，hover 事件会被触发，显示 tooltip。例如：

<el-table-column label="标题" prop="name" show-overflow-tooltip>
</el-table-column>

如果你需要更精细的控制，可以利用 CSS 来调整 tooltip 的位置和样式，例如：

.el-tooltip {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* 添加其他定位和样式规则 */
}

相关问题

vue+el-table-column的show-overflow-tooltip属性 内容为空 出现悬浮窗问题

当使用 `show-overflow-tooltip` 属性时，如果内容为空，则会出现悬浮窗问题。这是因为该属性会将单元格内容隐藏，只显示省略号，并在悬浮时显示完整内容。因此，如果内容为空，则悬浮窗会出现在单元格的左上角，不符合预期。

为了解决这个问题，可以使用 `v-if` 来判断内容是否为空，如果为空，则不使用 `show-overflow-tooltip` 属性。示例代码如下：

<el-table-column prop="name" label="姓名">
  <template slot-scope="scope">
    <div v-if="scope.row.name" show-overflow-tooltip>
      {{ scope.row.name }}
    </div>
    <div v-else>
      -
    </div>
  </template>
</el-table-column>

这样，在单元格内容为空时，会显示 `-`，而不会出现悬浮窗问题。

vue+el-table-column的show-overflow-tooltip属性 内容为空 悬浮会触发黑色悬浮框的问题

如果el-table-column` 的 `show-overflow-tooltip` 属性设置为 `true`，但是内容为空，会触发悬浮框的问题。为了解决这个问题，你可以在 `el-table-column` 中设置 `show-overflow-tooltip` 属性，并且提供一个默认值，例如：

<el-table-column prop="name" label="姓名" show-overflow-tooltip="true">
  <template slot-scope="{ row }">{{ row.name || '无' }}</template>
</el-table-column>

在上面的代码中，`{{ row.name || '无' }}` 表示如果 `row.name` 为空，则使用默认值 `'无'` 来代替，这样就可以避免触发悬浮框的问题了。