el-table内容的换行符没生效

您好，关于 el-table 内容的换行符不生效的问题，可以尝试以下方法解决：

1. 在 el-table-column 标签中设置 show-overflow-tooltip 属性为 true，这样当内容过长时，会自动显示提示框，鼠标悬停时可以查看完整内容。

2. 在 el-table-column 标签中设置属性 :formatter，自定义内容格式化函数，在函数中添加换行符，例如：

<el-table-column prop="content" label="内容" :formatter="formatContent"></el-table-column>

methods: {
  formatContent(row, column, cellValue) {
    return cellValue.replace(/\n/g, '<br>')
  }
}

这样就会将内容中的换行符替换为 `<br>` 标签，实现换行显示。

希望能对您有所帮助！

相关问题

el-table补全空白行

el-table补全空白行的方法如下：

1. 使用colspan属性补全空白列：
在el-table中，可以使用colspan属性来合并单元格，从而补全空白列。通过设置colspan的值为需要合并的列数，可以将多个单元格合并为一个单元格，从而填充空白列。

<el-table>
  <el-table-column label="姓名"></el-table-column>
  <el-table-column label="年龄"></el-table-column>
  <el-table-column label="性别" :colspan="2"></el-table-column> <!-- 合并两个空白列 -->
  <el-table-column label="地址"></el-table-column>
</el-table>

2. 使用rowspan属性补全空白行：
类似地，可以使用rowspan属性来合并单元格，从而补全空白行。通过设置rowspan的值为需要合并的行数，可以将多个单元格合并为一个单元格，从而填充空白行。

<el-table>
  <el-table-column label="姓名"></el-table-column>
  <el-table-column label="年龄"></el-table-column>
  <el-table-column label="性别"></el-table-column>
  <el-table-column label="地址"></el-table-column>
</el-table>
<el-table>
  <el-table-column label="姓名"></el-table-column>
  <el-table-column label="年龄"></el-table-column>
  <el-table-column label="性别"></el-table-column>
  <el-table-column label="地址"></el-table-column>
</el-table>
<el-table>
  <el-table-column label="姓名"></el-table-column>
  <el-table-column label="年龄"></el-table-column>
  <el-table-column label="性别" :rowspan="2"></el-table-column> <!-- 合并两个空白行 -->
  <el-table-column label="地址"></el-table-column>
</el-table>

el-table自定义合计行内容换行

el-table自定义合计行内容换行可以使用CSS样式来实现。在.el-table__footer-wrapper样式中，给td.el-table__cell div添加white-space属性，并设置为wrap。这样就可以实现合计行内容的换行。

<code>
<style lang="scss" scoped>
::v-deep .el-table__footer-wrapper {
.el-table__footer {
td.el-table__cell div {
white-space: wrap;
// 其他自定义样式
}
}
}
</style>
</code>