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

为了适应多种前端，后端给文字换行可能会直接在一串字符中加入<br/>来达到换行的目的，最近使用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>

这里是返回数据

这里是显示效果

由图可见，这里并没有把里面的<br/>转义成为换行，所以我们需要一些方法来响应。有的人说可以使用<pre>或者/n，这个确实可以，网上也有不少教程，这里我就不说了，我只说明需要使用<br/>的，毕竟支持基本HTML的前端都可以使用。

因为elementui是基于vue的，在vue中有一个标签v-html，使用这个标签可以将字符进行html解释，在配合一个<span/>标签即可显示，但是这需要在<template/>中使用，这是elementui中机制决定的。

这是修改之后的代码

			<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">
				//注意这里，需要使用slot
					<template slot-scope="scope">
						<span v-html="scope.row.timeTemperature"></span>
					</template>
				</el-table-column>
			</el-table>

最终效果

因为这里我加入了居中效果，所以不是很美观，需要的同学可以做成左对齐格式的。