el-table 默认内容不换行 修改使得内容能够换行

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 结果

在这里插入图片描述

到此换行功能实现!!!!!!!!!!!!!!!!!!!!!!!

发布了39 篇原创文章 · 获赞 46 · 访问量 219万+

猜你喜欢

转载自blog.csdn.net/fufu_good/article/details/104915275