el-table-column遇到空格换行

el-table-column在遇到空格和换行时，默认情况下会将其忽略。如果想要保留空格和换行，可以使用element-ui提供的特殊属性来实现。

一种方法是使用`show-overflow-tooltip`属性，它可以在单元格内容溢出时显示一个提示框，将内容完整显示出来。示例如下：

<el-table-column prop="content" label="内容" show-overflow-tooltip></el-table-column>

另一种方法是使用`formatter`属性，它可以自定义单元格的显示内容。在formatter函数中，可以使用HTML标签来实现换行和空格。示例如下：

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

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

这样，当单元格内容中有换行符`\n`时，会被替换为`<br>`标签，实现换行效果；当有空格时，会被替换为`&nbsp;`实现空格效果。

相关问题

el-table-column的label换行

可以使用`<br>`标签或者CSS样式中的`white-space: pre-wrap`来实现`el-table-column`的label换行。具体方法如下：

1. 使用`<br>`标签

在`el-table-column`的`label`属性中，可以使用`<br>`标签来实现换行，例如：

<el-table-column prop="name" label="姓名<br>（英文名）"></el-table-column>

2. 使用CSS样式

在`el-table-column`的`label`属性中，可以使用CSS样式来实现换行，例如：

<el-table-column prop="name" :label-style="{ whiteSpace: 'pre-wrap' }" label="姓名（英文名）"></el-table-column>

其中，`:label-style`属性用来设置`label`的CSS样式，`white-space: pre-wrap`表示保留空格和换行符，并自动换行。

注意：使用CSS样式时，需要在`el-table-column`的父元素中设置`white-space: nowrap`，以避免表格列宽度自适应导致换行失效。例如：

<el-table :data="tableData" style="white-space: nowrap;">
  <el-table-column prop="name" :label-style="{ whiteSpace: 'pre-wrap' }" label="姓名（英文名）"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
</el-table>

el-table-column内容换行样式

可以使用 CSS 的 white-space 属性来控制 el-table-column 内容的换行样式。例如，设置 white-space: pre-wrap; 可以让内容自动换行，并保留空格和换行符。

示例代码：

<el-table-column prop="content" label="内容" width="200">
  <template slot-scope="{ row }">
    <div style="white-space: pre-wrap;">{{ row.content }}</div>
  </template>
</el-table-column>