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

一、背景

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

二、解决办法

1.代码

.el-table {
  .cell {
    white-space: pre-line !important;
  }
}
1
2
3
4
5

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 各种值的行为总结：