element table表格自定义表头

需求是在表头里插入弹出框

自定义表头

我看了官方文档之后以为slot="header"这样就能实现

官方文档

<el-table-column width="150px" prop="goods_discount">
<template slot-scope="scope" slot="header"> 
<el-popover
    placement="top-start"
    title="标题"
    width="200"
    trigger="hover"
    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
    <span slot="reference">hover 激活</span>
  </el-popover>
</template>
</el-table-column>

但是，并不能，奇怪 ，不知道哪里有了错误，以为自己语法错误，问了一下同事，同事比我勤快一点，直接在本地自己的项目跑了一遍，可以啊，本地项目可以，公司项目不行。。
好吧，最后发现是版本问题，公司项目的vue版本不是最新的，而官方文档里这个自定义表头功能应该是新增的

2.4.11版本

而在2.4以下的版本是没有支持这个功能的

其他版本
只能在网上百度，原来文档里table还有一个这个方法
:render-header="customFieldColumn"
自己创建元素

<el-table-column width="150px" prop="goods_discount" :render-header="customFieldColumn" label="折扣">
</el-table-column>

customFieldColumn (h, { column, $index }) {
    return h('span', {}, [
        h('span', {}, ''),
          h('el-popover', { props: { placement: 'top', width: '200',trigger: 'hover', content: '点击数字折扣，修改折扣，点击空白处，修改完成；修改过程中，右侧出现绿色按钮功能为统一多件商品为该折扣。' }}, [
                    h('i', { slot: 'reference',class:'font-normal'},[
                        h('span', {}, '折扣'),
                        h('span', {class:'red-star'}, '*')
                    ])
                          ])
        ])
    },

这样算是解决了 。