前言

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

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

1.HTML部分

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

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

<el-tooltip placement="top" popper-class="popoverStyle"

v-if="scope.row.createTime.length > 20">

</div>

</div>

</el-tooltip>

<el-tooltip placement="top" popper-class="popoverStyle2" v-else>

</div>

</div>

</el-tooltip>

</template>

2.js部分

tooPlct(val) {

return val.toString().replace(/,/g, '</br>')

将后端返回字段中返回的逗号使用正则匹配替换成换行标签(具体可与后端协商)，

效果图

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

element table 组件内容换行方案
element table 组件内容换行方案 white-space的值: normal 默认.空白会被浏览器忽略. pre 空白会被浏览器保留.其行为方式类似 HTML 中的<pre> ...
table 表格，table表格细边框设置，table表格禁止内容换行设置，table表格斑马线设置
table 表格,细边框设置,禁止内容换行设置,斑马线设置 1.没有设置时的样式 2.设置后的样式 3.html代码 <div class="cp-table">< ...
java drawstring 换行_java Graphics2D drawString()内容换行问题
//字符串总宽度 private int getStringLength(Graphics g,String str) { char[] strcha=str.toCharArray(); int s ...
poi XWPFDocument 实现word中内容换行
poi实现word表格中内容换行实现效果图如下: 表格内容: String str = "(1)第一行\n(2)第二行"; 工具类: //获取文档docXWPFDocument ...
element ui 表格头部内容不换行
表格头部内容不换行方发封装 //* 格式化table列配置,根据label汉字个数设置宽度 function formatColWidth(cols) {let resCols = [];for (l ...
vue 使用vue-print-nb打印element表格展示不全
预览窗口有的列没有展示全先安装 vue-print-nb npm install vue-print-nb --save 因为要改源码,所以在依赖里找到这个文件,单独拿出来,然后再main.js引用 ...
Markdown编辑表格实现合并单元格、单元格内容换行
Markdown虽然没有合并单元格的语法,但是Markdown是兼容HTML的,因此,我们可以通过HTML的方式实现单元格合并. 跨行合并使用 rowspan 属性跨列合并使用 colspan 属性 ...
Element UI中Steps 步骤条description描述换行展示
突然要求加了个显示字段,之前的代码只能显示一行,于是乎找到了解决办法,代码如下:其中的属性自行到官网查看释义吧:Element UI官网传送门 <el-table><!-- 可展开的 ...
【表格设置】HTML中合并单元格，对列组合应用样式，适应各浏览器的内容换行
1.常用表格标签普通 <table> | <tr> | | <th ...

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

1.HTML部分

2.js部分

效果图

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

最新文章

热门文章