el-table表头文字换行

### 解决方案

为了实现在Element UI `el-table`组件中的表头文字换行，可以采用多种方式来满足需求。

#### 方案一：CSS样式调整
通过设置全局或局部的CSS样式使得表格单元格内的文本能够自动换行。具体做法是在项目中加入以下样式：

/* 表头换行 */
/deep/ .el-table th.is-leaf {
  white-space: pre-line;
}

此方法适用于希望所有表头都支持换行的情况[^1]。

#### 方案二：自定义渲染函数
如果仅需针对特定列应用换行效果，则可以通过编写自定义渲染器(`render-header`)的方式实现更灵活控制。例如，在Vue实例的方法(methods)内定义一个名为`renderHeader`的方法用于处理表头内容，并将其绑定至目标列上：

methods: {
    renderHeader(h, { column }) {
        const label = column.label.replace(/\n/g,'<br/>');
        return h('div', [
            h('span',{},label),
        ]);
    }
}

接着在模板里指定该方法作为某列的`render-header`属性值:

<el-table-column 
    :label="'多行\n表头'"
    prop="name"
    :render-header="renderHeader">
</el-table-column>

这种方法允许更加精细地定制每列表头的表现形式，同时也解决了原始尝试中存在的问题——即单纯依靠`\n`无法正常工作的问题[^3]。

#### 方案三：使用HTML实体字符
对于简单的场景下也可以考虑直接利用HTML标签如`<br>`来进行强制换行操作。不过需要注意的是这种方式可能会破坏默认样式的美观度，因此建议谨慎选用。

---