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属性 内容为空时 出现tooltip问题

当 `el-table-column` 中设置 `show-overflow-tooltip` 属性时，如果单元格内容为空，会出现 tooltip 显示的问题。

解决方法是在单元格内部设置一个不可见的空格占位符，例如使用 ` `，这样就能正常显示 tooltip 了。

示例代码：

<el-table-column prop="name" label="姓名" show-overflow-tooltip>
  <template slot-scope="{ row }">
    {{ row.name || '&nbsp;' }}
  </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` 为空，则使用默认值 `'无'` 来代替，这样就可以避免触发悬浮框的问题了。