element-ui - elementui，el-table组件，设置show-overflow-tooltip无效如何处理？

Question

项目中用到ele的table组件，某些列需要使用show-overflow-tooltip来提示，超出显示省略号，如果正常使用是没有问题的，但是由于列内容比较复杂，所以需要在列里面通过div来包裹内容，虽然能够提示tooltip，但是却无法显示省略号了，请问该怎么处理呢？谢谢！

Answer 1

内容比较复杂，得看你的内容物是怎么样的。如果说只是文本内容的整理组装。那么可以使用 formatter 这个属性来传入转换函数，返回组装好的文本内容。这个是可以正确应用到 show-overflow-tooltip 的超出省略效果的。

如果是内部是图标元素+文本内容，那么你给你的 slot 插入的顶级 div 元素增加 text-overflow: ellipsis 样式即可。如果是更复杂的内容，比如说 el-tag 清单，那么就需要你自己设计处理超出隐藏的效果。

Answer 2

当在 el-table 的列中使用 show-overflow-tooltip 并通过 div 包裹内容时，如果 div 没有适当的样式来限制其宽度或触发溢出，那么它可能不会显示省略号（ellipsis）。以下是一些可能的解决方案：

1. 为 div 设置固定宽度和溢出样式：
   确保你为包裹内容的 div 设置了宽度，并使用了 overflow: hidden; text-overflow: ellipsis; 样式。

<el-table-column prop="yourProperty" label="Your Label" show-overflow-tooltip>  <template slot-scope="scope">    <div class="ellipsis-tooltip">{{ scope.row.yourProperty }}</div>  </template></el-table-column><style>.ellipsis-tooltip {  width: 100%; /* 或者你需要的任何固定宽度 */  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;}</style>

2. 使用 Element UI 的 cell-class-name 属性：
   如果你想要更动态地应用样式，你可以使用 cell-class-name 属性，并基于某些条件返回类名。

<el-table-column  prop="yourProperty"  label="Your Label"  show-overflow-tooltip  :cell-class-name="'ellipsis-tooltip'">  <!-- ... 省略模板部分 ... --></el-table-column><style>/* 同上 */.ellipsis-tooltip {  width: 100%;  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;}</style>

3. 检查其他可能影响布局的样式：
   确保没有其他 CSS 规则（如父元素的样式）正在干扰你的 div 的宽度或溢出行为。
4. 确保 el-table 和列有足够的宽度：
   如果 el-table 或其列没有足够的宽度来显示完整的文本，那么即使你设置了溢出样式，也可能看不到省略号，因为文本实际上并没有溢出。
5. 使用自定义指令或方法：
   如果以上方法都不起作用，你可以考虑使用 Vue 的自定义指令或方法来手动控制文本的显示和隐藏。

确保你检查了所有相关的样式和逻辑，并适当地调整了它们以满足你的需求。如果问题仍然存在，请考虑查看 Element UI 的官方文档或社区论坛，看看是否有其他开发者遇到了类似的问题并找到了解决方案。