1. 需求
最近由于项目需要,需要将数据展示到el-table。由于展示的数据为JSON数据,对于没有格式化的JSON数据看起来非常难看(如下图所示),所以寻思着查找能够识别换行的解决方案!!!
如果只是想让数据能够换行直接看2.2即可。。。。。
2. 解决方案
2.1 首先需要将JSON数据格式化
由于需要展示格式化的JSON数据,所以在传送到表格之前我们需要自己对JSON数据进行格式化,代码如下:
JSON.stringify(xxxxxxxxx, null, "\t") //xxxxxxxxx是原始JSON数据
2.2 设置样式使得内容能够换行
这里先贴出我的表格代码,注意看红的部分即可,因为下面将使用css来控制样式
css代码中使用类选择器进行样式的设置,主要部分就是:white-space: pre-wrap;
<style>
.elTable .cell {
white-space: pre-wrap;
}
</style>
2.3 结果
到此换行功能实现!!!!!!!!!!!!!!!!!!!!!!!