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

发布于
2024-06-27 广东

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

element-ui vue2

阅读 3.9k

AI BotBETA

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

为 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>

使用 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>

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

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

2 个回答

陟上晴明

发布于
2024-06-27 浙江

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

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

睡不着的香菜_ciKMbm

发布于
2024-07-23 江苏

新手上路，请多包涵

吧div换成span

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题