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

ElementUI table文字超出一行,隐藏多余文字,移入显示tips。

今天写项目的时候,实现在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>

 这样设置就可以生效了。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>