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表头换行可以通过以下两种方法实现：

1.使用插槽(slot)来自定义表头内容，并在需要换行的地方添加`<br>`标签。示例代码如下：

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column label="保险金额">
    <template slot-scope="scope">
      <div v-html="scope.row.money"></div>
    </template>
  </el-table-column>
</el-table>

其中，`<template>`标签中的`slot-scope`属性用于获取当前行的数据，`v-html`指令用于渲染HTML内容，`<br>`标签用于换行。

2.使用CSS样式来控制表头内容的换行。示例代码如下：

<el-table :data="tableData" class="table">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="money" label="保险金额"></el-table-column>
</el-table>

.table .cell {
  white-space: pre-line;
}

其中，`.cell`类用于控制表格单元格的样式，`white-space`属性用于设置空白符的处理方式，`pre-line`值表示保留换行符，但合并空白符。

el-table-column换行

el-table-column内部换行有多种方法可以实现。其中一种方法是使用render-header属性，并在renderHeader方法中返回一个span元素，其中包含多个span元素和br元素。每个span元素对应一个换行的内容。以下是一个示例代码：

<el-table :data="tableList2" border style="width: 100%">
<el-table-column :render-header="renderHeader" prop="level" label="这是一个/很长的表头"></el-table-column>
<el-table-column :render-header="renderHeader" prop="desc" label="不是一个/很短的表头"></el-table-column>
</el-table>

methods: {
renderHeader(h, { column, $index }) {
return h('span', {}, [
h('span', {}, column.label.split('/')),
h('br'),
h('span', {}, column.label.split('/')[1])
]);
}
}

另一种方法是在样式中添加"white-space: pre-wrap"属性，这将允许换行。以下是一个示例代码：

<el-table :data="tableList2" border style="width: 100%">
<el-table-column prop="level" label="这是一个/很长的表头" style="white-space: pre-wrap"></el-table-column>
<el-table-column prop="desc" label="不是一个/很短的表头" style="white-space: pre-wrap"></el-table-column>
</el-table>

请注意，这两种方法都可以实现el-table-column内部的换行效果。