ElementUI Table实现多行省略，鼠标移动上去显示所有文字内容

scorpion_V

于 2023-04-13 15:46:53 发布

阅读量5.4k

点赞数 5

分类专栏：前端 vue 文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/scorpion_V/article/details/130123084

版权

20 篇文章

订阅专栏

20 篇文章

订阅专栏

6 篇文章

订阅专栏

在ElementUI的table中，通过设置`show-overflow-tooltip`属性可以实现文字超出后显示tooltip。当默认样式不满足需求时，可以创建全局style来修改`.el-tooltip__popper`类的样式，以控制tooltip的最大宽度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天写项目的时候，实现在table里面的文字过长，需要做悬浮文字提示的功能

给el-table-column设置:show-overflow-tooltip="true"属性可以使单元格超出的内容自动折叠显示，当鼠标移入时单元格的上方会自动弹出一个小tips来显示单元格得所有内容。

  <el-table-column prop="taskName" label="任务名称" width="180" :show-overflow-            
    tooltip="true" >
  </el-table-column>

这样写很简洁，不需要额外用插槽来写。就很nice！

如果你觉得展示的文字过长的时候，像下面这样，文字过多视觉体验不是很好，

tips的class名为.el-tooltip__popper，开始我试着直接通过它class名来给tips设置样式。

<style lang="scss" scoped>
.el-tooltip__popper{
  max-width:20%
}
</style>

发现并没有效果，后来发现是因为scoped导致的。但是如果去掉scoped样式，那么这个组件的其他style样式就会影响到所有组件。所以我们需要新建一个style标签来修改tips的样式。

<style>
.el-tooltip__popper{
  max-width:20%
}
</style>

这样设置就可以生效了。