一、背景

请求后端接口，返回的数据中带有换行符 \n，直接渲染到el-table中后，期望带有换行功能，然而显示的效果并没换行。
打开F12进行源码检查，DOM -> Table Cell 的innerText 数据中的换行符 \n 丢失。

二、解决办法

1.代码

.el-table {.cell {white-space: pre-line !important;}
}

2.解读

根据MDN的解读：

white-space: 属性被指定为从下面的值列表中选择的单个关键字：
normal: 连续的空白符会被合并，换行符会被当作空白符来处理。换行在填充「行框盒子 (line boxes)」时是必要。
nowrap: 和 normal 一样，连续的空白符会被合并。但文本内的换行无效。
pre-wrap: 连续的空白符会被保留。在遇到换行符或者
元素，或者需要为了填充「行框盒子 (line boxes)」时才会换行。
pre-line: 连续的空白符会被合并。在遇到换行符或者
元素，或者需要为了填充「行框盒子 (line boxes)」时会换行。
break-spaces: 与 pre-wrap的行为相同，除了：
1. 任何保留的空白序列总是占用空间，包括在行尾。
2. 每个保留的空格字符后都存在换行机会，包括空格字符之间。
3. 这样保留的空间占用空间而不会挂起，从而影响盒子的固有尺寸（最小内容大小和最大内容大小）。

总结

各种 white-space 各种值的行为总结：

Elelemt-UI el-table 接收后端返回换行符 /n 不生效相关推荐

前端接收后端返回的集合数据并展示
前端通过AJAX接收后端返回的数据我们想要实现的功能是:通过ajax接收后端传过来的list集合,然后将数据转换并在前端页面的表格中展示.经过两天的修改,终于探索出了代码.表格展示用的是elemen ...
判断文件是否损坏_Bash技巧：把变量赋值为换行符，判断文件是否以换行符结尾...
在 bash 中,如果要把变量赋值为换行符,写为 '' 没有效果,需要写为 $''.具体举例如下: $ newline=''$ echo $newline$ newline=$''$ echo $ne ...
shell 回车键判断_Bash技巧：把变量赋值为换行符，判断文件是否以换行符结尾...
把变量赋值为换行符在 bash 中,如果要把变量赋值为换行符,写为 '\n' 没有效果,需要写为 $'\n'.具体举例如下:$ newline='\n' $ echo $newline \n $ n ...
后端返回数据中的换行符，在标签中不显示换行的解决方法
后端返回的的数据在Chrome浏览器上页面显示: 如果使用 let text = "后端返回字符串" text.replace(/\n/g,"<br/>& ...
前端页面上换行、根据后端返回的换行符（“↵”）进行换行展示（vue、v-html）
有时候我们会遇到这样的需求:后端返回一个换行符("↵"),前端拿到后需求根据该符号进行换行展示方法一:textarea赋值当我们拿到后端返回的数据时,直接通过v-model绑定 ...
后端返回数据ios接收精度丢失问题
问题描述,通过postman调用接口返回信息拿到的BigDecimal类型的数据是正常的,后端返回给ios丢失了小数后面的值正常应该是"price":"100.00&q ...
后端返回JSON数组转Tree树形格式，展示到element-ui的tree树形组件
将js数组转换成tree树形组件要的数据格式,有时候后端返回的是数组没有处理成树状结构,这个时候就需要前端自行转换,这里采用递归方式转换要展示的效果上代码 <!DOCTYPE html> ...
go语言练习：幂、函授接收和返回参数、转义字符、变量和常量
1.实现a^b次方 package mainfunc main() {r2 := power1(2,4)println(r2) } func power1(a uint64, b uint64) (r ...
vue 如何解析原生html,VUE渲染后端返回含有script标签的html字符串示例
VUE渲染后端返回含有script标签的html字符串示例发布时间:2020-09-14 23:37:52 来源:脚本之家阅读:207 作者:冷幽悠在接入支付宝支付模块的时候,支支返回的是一个f ...

Elelemt-UI el-table 接收后端返回换行符 /n 不生效

Elelemt-UI el-table 接收后端返回换行符 /n 显示未换行

一、背景

二、解决办法

1.代码

2.解读

总结

Elelemt-UI el-table 接收后端返回换行符 /n 不生效相关推荐

最新文章

热门文章