今天给大家分享一个前端小伙伴平时会经常遇到的一个需求,就是elementui表格内容太多,只显示3行(根据自己需求,几行都可以),超出部分用省略号代替,鼠标悬停,tooltip提示。
但是我看到这个需求的时候也是很头大,因为我平时最讨厌写样式了,但是没办法需求来了就硬着头皮干吧。
首先,我遇到的是后台返回的是数组的数据,所以我这里第一步是先转成字符串然后再根据逗号实现数据换行
这里需要注意的是你在转成字符串的时候,值不能有空,因为如果有空或者数字,那么恭喜你,你的toString()会一直报错,我也是查了好久的资料才知道,所以我这里我先实现先做了判断,如果没有值的时候默认为‘-’
接下来我们就可以实现数据换行了,但是表格还是不换行,需要我们css写样式,注意这里的表格我们就不能用正常的表格了,而是需要用到插槽了
对应的样式
接下来我们就需要搞定这个提示框来实现换行,因为默认不换行的,我是自己打开控制台一步一步调试的,太心酸了。
我就直接上代码了
我之所以加这两个,是因为但是我明明写好了,刷新一下全部丢失了,后来修改的elementUI本身的样式才好。
到这里我们就实现了大概的功能,具体的样式根据自己的需求调整,不多说了,我就调bug了。
最后的效果: