element 表格怎样让一行内容显示两行数据

在使用 element 表格进行页面开发时，有时会遇到需要在一行中显示两行数据的需求。这在展示较为复杂或信息较多的内容时，能有效提升表格的可读性与美观度。下面就为大家详细介绍实现这一效果的方法。

可以通过 CSS 的 white-space 和 line-height 属性来进行控制。默认情况下，表格单元格内的文本会在一行显示，当内容过长时会溢出。将 white-space 属性设置为 normal，它会允许文本自动换行。例如：

.el-table td {
  white-space: normal;
}

接着，通过调整 line-height 属性来设置行高，确保两行内容有合适的间距，提升视觉效果。比如：

.el-table td {
  line-height: 2em;
}

另一种常用的方法是利用 HTML 的 <br> 标签。在数据源中，将需要换行显示的内容通过 <br> 标签进行分隔。假设我们有一个数组数据：

data() {
  return {
    tableData: [
      {
        name: '张三<br>工程师',
        age: 28
      }
    ]
  }
}

在 template 模板中，将对应列设置为 :show-overflow-tooltip="false"，防止默认的溢出显示提示框干扰显示效果：

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名" :show-overflow-tooltip="false"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
</el-table>

如果使用的是 Vue 的计算属性，也可以对数据进行处理后再展示。例如：

computed: {
  processedTableData() {
    return this.tableData.map(item => {
      item.name = item.name.split('|').join('<br>');
      return item;
    });
  }
}

然后在模板中绑定 processedTableData 即可。

通过这些方法，能轻松实现 element 表格中一行内容显示两行数据。具体使用哪种方法，可根据项目的实际需求、数据结构和开发习惯来灵活选择。无论是简单的 CSS 样式调整，还是结合 HTML 标签与计算属性的处理方式，都旨在为用户提供更友好、更清晰的表格数据展示形式。