当el-table 表头名字过长时，超出部分用...表示，悬浮提示功能

el-table的render-header函数

<template>
  <div>
    <el-table :data="tableData" style="width: 150">
      <el-table-column
        v-for="(item, index) in column"
        :key="index"
        :prop="item.prop"
        :width="item.width"
        :min-width="item.minWidth"
        :label="item.label"
        show-overflow-tooltip
        :render-header="renderHeaderMethods"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      column: [
        {
          prop: 'date',
          label: '时间时间时间时间时间时间时间',
          width: 50,
        },
        {
          prop: ' name',
          label: '名字名字名字名字名字名字名字',
          width: 50,
        },
        {
          prop: 'address',
          label: '地址地址地址地址地址地址地址',
          width: 50,
        },
      ],
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
        },
      ],
    }
  },
  methods: {
    // 渲染函数,创建一个span标签,
    // span标签下创建一个el-tooltip标签,
    // el-tooltip添加属性:
    // content表示hover时的提示信息，
    // effect表示背景
    // placement属性值为：方向-对齐位置
    // el-tooltip下添加span 标签,span 中的内容
    renderHeaderMethods(h, data) {
      return h('span', [
        h(
          'el-tooltip',
          {
            attrs: {
              class: 'item',
              effect: 'dark',
              content: data.column.label,
              placement: 'top',
            },
          },
          [h('span', data.column.label)]
        ),
      ])
    },
  },
}
</script>

<style lang="less" scoped>
// 设置显示两行，超出省略
/deep/ .el-table th > .cell {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
</style>