欧亿体育
工作动态
我的位置: 首页 > 工作动态
ElementUI Table实现多行省略,鼠标移动上去显示所有文字内容
发布时间:2024-01-28 11:03
  |  
阅读量:
  |  
作者:
欧亿体育

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

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

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

  
  

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

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

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

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

 这样设置就可以生效了。