elementUI中Vue 2方式<el-table>表格中列表列头内容过长，不换行处理

使用render-header属性
<el-table-column
 ...
 :render-header="headerRender"
></el-table-column>

render-header

methods: {
  headerRenderer(h, { column }) {
    // 使用h函数创建VNode，防止表头内容换行
    return h(
      'div',
      {
        style: {
          whiteSpace: 'nowrap', // 防止文本换行
          overflow: 'hidden', // 隐藏超出部分
          textOverflow: 'ellipsis', // 超出部分显示省略号
        },
      },

   //这里是为了设置排序按钮

　　[
  　　h('span', column.label),
 　　 h('span', {
    class: 'sort-icon-container',
  　　}, [
   　　 h('i', { class: 'el-icon-caret-up' }),
   　　 h('i', { class: 'el-icon-caret-down' }),
  　　]),
　　]

); }, },

这段代码中，我们使用Vue的渲染函数h来创建表头单元格的内容，直接在其中设置了whiteSpace: 'nowrap'来避免文本换行，并通过overflow和textOverflow来处理可能的溢出情况，显示省略号。

这样，即便CSS样式因某种原因未生效，也能确保表头文字不换行并优雅地处理过长文本。