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

这个问题可能是由于单元格内容的长度超过了列宽度，导致内容被截断，从而触发了 `show-overflow-tooltip` 属性。你可以尝试添加一个 CSS 样式来解决这个问题：

.el-table__body .cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

这个样式将会把单元格的文本限制在单元格内部，并且当文本超出单元格宽度时，将会出现省略号。这样就可以避免单元格内容空悬浮触发黑色悬浮框的问题了。

相关问题

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` 为空，则使用默认值 `'无'` 来代替，这样就可以避免触发悬浮框的问题了。

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>

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