element ui el-table 表头内容超出省略，悬浮时显示（el-tooltip 文字提示效果）

可以通过设置表头的render-header属性来实现表头内容超出省略，并在悬浮时显示完整内容效果。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      v-for="item in tableColumns"
      :key="item.prop"
      :prop="item.prop"
      :label="item.label"
      :render-header="renderHeader"
    >
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableColumns: [
        { label: '超长内容超长内容', prop: 'date' },
        { label: '姓名', prop: 'name' },
        { label: '地址', prop: 'address' }
      ],
      tableData: [
        { date: '2016-05-02', name: '叶子', address: '上海市普陀区金沙江路 1518 弄' },
        // ...更多数据
      ]
    };
  },
  methods: {
    renderHeader(h, { column }) {
      return <div class="cell">
        <el-tooltip class="item" effect="dark" placement="top">
          <div slot="content" style="max-width: 300px;">{column.label}</div>
          <div style=" max-width: 100px; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;" title={column.label}>{column.label}</div>
        </el-tooltip>
      </div>;
    }
  }
};
</script>
 
<style scoped>
.cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
 
.header-ellipsis {
  max-width: 100px; 
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>