element　table组件自定义表头显示，超出隐藏，鼠标移上

需求：

当表头的内容过长隐藏显示 ... 鼠标移上去显示全部内容,表头不是固定内容，是根据后台返回的字段，动态渲染

实现代码如下：

<el-table>
  <el-table-column v-for="item in headerList" :prop="item.prop" :label="item.label :key="item.prop>
    <template slot="header" slot-scope="scope">
      <el-tooltip :content="scope.column.label">
        <span>{{scope.column.label}}</span>
      <el-tooltip>
    </template>
  </el-table-column>
</el-table>
// style 

因为table组件的表头默认超出换行显示，所以还需要设置css样式

.el-table{  
  th{
    .cell{
      white-space:nowrap !important;
      text-overflow:ellipsis;
      word-break:break-all;
    }
  }  
}