el-table 单元格不换行

`el-table` 是 Element UI 中的一个表格组件，当单元格的内容过长而无法在一行显示时，你可以使用 `v-for` 遍历数据并设置 `cell-render` 或者直接在模板中控制文字换行。如果你想让文本不换行，你可以使用 `white-space: nowrap` 样式。

例如，在 `cell-render` 选项里：

<template slot-scope="scope">
  <span style="white-space: nowrap;">{{ scope.row.longText }}</span>
</template>

如果你有多个列并且希望所有单元格都不换行，可以在整个表头或单元格上应用这个样式：

<el-table-column prop="longText" :formatter="function(value) { return `<span style="white-space: nowrap;">${value}</span>` }"></el-table-column>

确保替换 `longText` 为实际的数据字段名。如果需要针对特定列禁用换行，你可以在对应的 `column` 标签内添加 `style` 属性：

<el-table-column prop="longText" :style="{ whiteSpace: 'nowrap' }"></el-table-column>

相关问题

el-table 表头不换行

如果你希望 `el-table` 的表头不换行，可以使用 CSS 样式来实现。具体做法如下：

1. 给表头单元格元素 `th` 添加 `white-space: nowrap;` 样式，这样表头单元格就不会自动换行。

2. 如果表头单元格内容超过单元格宽度，可以设置 `text-overflow: ellipsis;` 样式来显示省略号。

示例 CSS 代码如下：

.el-table__header th {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

这样就可以让 `el-table` 的表头不换行，并且超出部分显示省略号。

el-table列自动换行

`el-table` 是 Element UI 库中的一个组件，用于创建表格。在 `el-table` 中，可以使用 `wrap-text` 属性来实现列自动换行。

`wrap-text` 属性用于控制表格单元格中的文本换行方式。默认情况下，如果单元格中的文本太长，它会在单元格中垂直滚动。但是，通过设置 `wrap-text` 属性为 `true`，表格会自动调整列宽以适应文本的长度，并在必要时进行换行。

以下是使用 `wrap-text` 属性实现列自动换行的示例代码：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180" wrap-text></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2023-06-15',
        name: '张三',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2023-06-16',
        name: '李四',
        address: '上海市浦东新区世纪大道 888 号'
      }]
    }
  }
}
</script>

在上面的示例中，姓名列使用了 `wrap-text` 属性，因此当单元格中的文本太长时，表格会自动调整列宽并换行显示。

需要注意的是，`wrap-text` 属性只适用于表格列，而不适用于表格行。另外，如果表格列包含的是数字、日期等非文本类型的数据，自动换行可能不会生效。在这种情况下，你可能需要手动调整列宽或使用其他方法来适应数据类型。