今天给大家分享一个前端小伙伴平时会经常遇到的一个需求，就是elementui表格内容太多，只显示3行（根据自己需求，几行都可以），超出部分用省略号代替，鼠标悬停，tooltip提示。

但是我看到这个需求的时候也是很头大，因为我平时最讨厌写样式了，但是没办法需求来了就硬着头皮干吧。

首先，我遇到的是后台返回的是数组的数据，所以我这里第一步是先转成字符串然后再根据逗号实现数据换行

这里需要注意的是你在转成字符串的时候，值不能有空，因为如果有空或者数字，那么恭喜你，你的toString（）会一直报错，我也是查了好久的资料才知道，所以我这里我先实现先做了判断，如果没有值的时候默认为‘-’

接下来我们就可以实现数据换行了，但是表格还是不换行，需要我们css写样式，注意这里的表格我们就不能用正常的表格了，而是需要用到插槽了

如图所示

对应的样式

这个就可以实现表格数据换行了

这种提示框是最令我头疼的

接下来我们就需要搞定这个提示框来实现换行，因为默认不换行的，我是自己打开控制台一步一步调试的，太心酸了。

我就直接上代码了

我之所以加这两个，是因为但是我明明写好了，刷新一下全部丢失了，后来修改的elementUI本身的样式才好。

到这里我们就实现了大概的功能，具体的样式根据自己的需求调整，不多说了，我就调bug了。

最后的效果：