Element UI 表格中使用 <br> 标签无法换行问题解决方案

在 Element UI 表格中，如果在标签属性中直接使用 HTML 标签 <br> 来实现换行，是无效的。这是因为标签属性不支持解析 HTML 标签。

为了实现换行效果，您可以尝试以下两种方法：

1. 使用 \n 替换
   :

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

2. 使用 v-html 指令渲染 HTML 标签:

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

在第二种方法中，我们使用 v-html 指令将包含 <br> 标签的字符串渲染到页面中，从而实现换行效果。

建议您选择最适合您的场景的方法来实现换行功能。