Vue 模板中 <el-table-column> 标签换行问题及解决方案

在 Vue 模板中，使用 <el-table-column> 标签时，有时需要在标签内容中实现换行效果，但直接使用“\n”或“
”标签却无法达到预期效果。

为了解决这个问题，我们可以采用以下两种方法：

使用 <br> 标签替换“\n”

在 Vue 模板中，可以使用 <br> 标签来实现换行。将代码中原本的“\n”替换为 <br> 标签即可。例如：

<el-table-column v-for="(value,key, index) in total" :prop="index+''" :label="(key=='马尔代夫'?'马代':key)+'-'+odds[key]['rate']+(key=='爱琴海'?'%':' %')+'<br>倍<br>率:' +odds[key]['odds']+'&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;'+value+'-'+totalNumber[index]" align="center" label-width="100px">

设置 CSS white-space 属性

在 CSS 中，可以使用 white-space 属性来控制文本的空格和换行。将 white-space 属性设置为 pre-wrap 或 normal，可以实现文本的换行效果。例如：

.elTable {
  white-space: pre-wrap;
  white-space: normal;
  border: 2px black solid;
}

通过以上两种方法，可以有效地解决 <el-table-column> 标签内容的换行问题。