解决element-ui表格表头内容太长时的换行问题

当表头内容太长时，可以通过设置 `ellipsis` 属性来实现自动省略和提示的效果。此外，还可以通过设置 `tooltip` 属性来显示完整的表头内容。同时，为了使表头内容自动换行，需要设置 `white-space` 属性为 `normal`，并设置 `word-break` 属性为 `break-all`。

以下是一个示例代码：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      prop="name"
      label="姓名"
      width="200"
      :tooltip="true"
      :label-class-name="'table-header'"
    ></el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      width="300"
      :tooltip="true"
      :label-class-name="'table-header'"
    ></el-table-column>
    <el-table-column
      prop="phone"
      label="电话"
      width="200"
      :tooltip="true"
      :label-class-name="'table-header'"
    ></el-table-column>
  </el-table>
</template>

<style scoped>
.table-header {
  white-space: normal;
  word-break: break-all;
}
</style>

在上述代码中，`el-table-column` 组件的 `label` 属性设置了表头内容， `:tooltip` 属性设置为 `true`，表示显示完整的表头内容。同时，定义了一个名为 `.table-header` 的 CSS 类，设置了 `white-space` 属性为 `normal`，表示文本可以自动换行；设置 `word-break` 属性为 `break-all`，表示单词可以自动断行。

这样，当表头内容过长时，就可以自动换行显示，并且通过鼠标悬停提示的方式显示完整的内容。