element-ui 表格表頭添加tooltip

只貼出來需要用到的地方

tHeadData=[{"key":"X1","title":"班組"},
{"key":"X3","title":"項目_單位"},
{"key":"X9","title":"原料配比及消耗_礦槽原料灰_消耗"},
{"key":"X27","title":"原料配比及消耗_幹法除塵灰_消耗"},
{"key":"X29","title":"原料配比及消耗_礦槽原料灰_消耗"}]

<el-table 
:data="tableData"
border>
<el-table-column
    v-for="(item,index) in tHeadData"
    :key="index"
    :prop="item.key"
    :label="item.title"
    :show-overflow-tooltip="true"
    :render-header="handleHelp"
    width="80">
</el-table-column>
</el-table>

handleHelp(h, { column }) {
    return (
        h('span', [
            h('el-tooltip', {
                props: {
                    effect: 'dark',
                    content: `${column.label}`,
                    placement: 'top'
                }
            }, [
                h('span', column.label + ' ', {})
            ])
        ])
    );
},

.el-table__header {
    .cell {
        width: 100%;
        height: 20px;
        line-height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        span {
            width: 100%;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
}