element-ui表格中文字中含
进行换行

为了适应多种前端,后端给文字换行可能会直接在一串字符中加入
来达到换行的目的,最近使用elementui中的table表格时,发现直接将这个表签加入文字中无法识别,像下面这个样:

这里是前端表格中的数据,带有换行符的字段是timeTemperature

			<el-table v-show="lbbool" :data="weathers" :current-row-key="1" empty-text="暂无数据展示" border style="width: 100%;">
				<el-table-column type="index" label="ID" width="60" align="center"></el-table-column>
				<el-table-column prop="sn" label="设备序列号" align="center"></el-table-column>
				<el-table-column prop="sumTemp" label="累计温度(℃)" align="center"></el-table-column>
				<el-table-column prop="avgTemp" label="日平均温度(℃)" align="center"></el-table-column>
				<el-table-column prop="numberDays" label="累计天数" align="center"></el-table-column>
				<el-table-column  prop="timeTemperature" label="各时间点温湿度" align="center" width="300">
				</el-table-column>
			</el-table>

这里是返回数据

element-ui表格中文字中含<br>进行换行_第1张图片

这里是显示效果

element-ui表格中文字中含<br>进行换行_第2张图片
由图可见,这里并没有把里面的
转义成为换行,所以我们需要一些方法来响应。有的人说可以使用

或者/n,这个确实可以,网上也有不少教程,这里我就不说了,我只说明需要使用
的,毕竟支持基本HTML的前端都可以使用。

因为elementui是基于vue的,在vue中有一个标签v-html,使用这个标签可以将字符进行html解释,在配合一个标签即可显示,但是这需要在