el-table-column的show-overflow-tooltip内容过长不能完整显示

你可以使用 `tooltip-effect` 属性来设置 tooltip 的显示效果，例如设置为 `light`，这样 tooltip 会在单元格上方显示，并且会跟随鼠标移动，这样可以让你完整地看到单元格的内容。同时，你也可以通过设置 `min-width` 来调整 tooltip 的宽度，使其能够容纳更多的内容。例如：

<el-table-column prop="name" label="姓名" :show-overflow-tooltip="true">
  <template slot-scope="{ row }">
    <div class="cell-ellipsis" :title="row.name">{{ row.name }}</div>
  </template>
</el-table-column>

.cell-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* 设置最小宽度为 100px */
  min-width: 100px;
}

// 在 el-table 上设置 tooltip-effect 属性
<el-table :data="tableData" tooltip-effect="light">
  <!-- ... -->
</el-table>

这样就可以让你完整地看到单元格内容了。

相关问题

el-table show-overflow-tooltip 字段过长闪烁问题

如果 `el-table` 中某些字段的内容过长，在表格中显示时可能会出现闪烁的问题，这是因为默认情况下 `el-table` 会尝试自动调整单元格的宽度以使其适应内容。当单元格宽度不足以容纳内容时，`el-table` 会对其进行截断，然后通过 CSS 属性 `text-overflow: ellipsis` 显示省略号。

为了解决这个问题，可以开启 `show-overflow-tooltip` 属性。这样，当单元格内容过长时，会自动为其添加一个提示框，鼠标悬停在单元格上时即可显示完整内容。

<el-table :data="tableData" show-overflow-tooltip>
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

如果你想要手动控制单元格的宽度而不开启 `show-overflow-tooltip` 属性，可以在 `el-table-column` 中使用 `min-width` 属性来设置单元格的最小宽度，这样就可以避免单元格因内容过长而导致的宽度调整。

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名" min-width="100px"></el-table-column>
  <el-table-column prop="age" label="年龄" min-width="80px"></el-table-column>
  <el-table-column prop="address" label="地址" min-width="200px"></el-table-column>
</el-table>

以上是两种解决 `el-table` 中字段过长闪烁问题的方法，根据你的实际需求选择即可。

el-table组件中设置show-overflow-tooltip属性

在el-table组件中，show-overflow-tooltip属性用于控制当单元格内容过长时是否显示tooltip提示。默认情况下，当单元格内容过长时，会自动隐藏多余的内容，而show-overflow-tooltip属性可以让多余的内容以tooltip的形式展示出来。

以下是在el-table组件中设置show-overflow-tooltip属性的示例代码：

<el-table
  :data="tableData"
  style="width: 100%">
  <el-table-column
    prop="name"
    label="姓名"
    show-overflow-tooltip>
  </el-table-column>
  <el-table-column
    prop="age"
    label="年龄">
  </el-table-column>
</el-table>

在上述代码中，el-table-column组件的show-overflow-tooltip属性被设置为true，这意味着当该列单元格内容过长时，会以tooltip的形式展示多余的内容。