element表格tooltip内容换行展示（本人第一次写帖子效果图在最后如果是各位想要的效果请点个赞，写的不好的地方也可以指导一下万分感谢）-Toy模板网

这篇具有很好参考价值的文章主要介绍了element表格tooltip内容换行展示（本人第一次写帖子效果图在最后如果是各位想要的效果请点个赞，写的不好的地方也可以指导一下万分感谢）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

在使用element的table中咱们有可能会遇到后端返回的单个字段有多个内容这个时候想一个单元格展示换行其实很简单直接就是template加个块标签v-for就可以了如果是很多的话这样表格就不美观如下图，这个时候大家会想到是show-overflow-tooltip，但是如果说数据跟我的一样是时间，他只能说是帮你隐藏不能帮你做到换行展示这个时候还得使用tooltip。

element表格tooltip内容换行展示（本人第一次写帖子效果图在最后如果是各位想要的效果请点个赞，写的不好的地方也可以指导一下万分感谢）,前端,vue,elementui

文章来源地址https://www.toymoban.com/news/detail-557199.html

二、话不多少了直接上代码和成果图了

1.HTML部分

代码如下：tooltip其实也是不支持换行的但是官方给了我们slot将内容作为插槽传入dom就可以达到我们想到的效果了。

下图的popper-class是tooltip的样式是不在当前组件的是一个和APPvue同级别的文件因此官方给了我们这个特殊的class让我们来修改他的样式，至于我为什么有两个，这点的确也是我的困扰之处，我使用overflow-y：auto无论多少个内容都会出现滚动条，无奈只能给他设置两种样式了，如有大佬知道是什么原因也还请为解答一下。