Element表格表头render-header自定义列表标题

1、上一篇文章我们实现了表格的自定义column渲染，可以参考之前的文章https://blog.csdn.net/qq_36020334/article/details/135501398?spm=1001.2014.3001.5502

2、如果想实现表头的自定义渲染，就需要使用:render-header，参考：

3、代码实现：

        <el-table-column
          :header-align="column.align || 'left'"
          :min-width="column.minWidth"
          :fixed="column.fixed"
          :key="column.prop"
          :align="column.align"
          :width="column.width"
          :label="column.label"
          :prop="column.prop"
          :sortable="column.sortable"
          :formatter="column.formatter"
          :show-overflow-tooltip="column.overflow"
          v-bind="getColumnProps(column.columnProps)"
          :render-header="(h, obj) => renderHeader(h, obj, column)"
        >

renderHeader(h, a, b ){
       return h('span', {}, [
        h('span', {}, b.label),
        h('el-popover', { props: { placement: 'top', width: '100%', trigger: 'hover', content: b.headertip,'popper-class':'monitor-yt-popover' }}, [
           h('i', { slot: 'reference', class:'el-icon-question',style: {cursor: 'pointer'}}, '')
          ])
       ])
    },

4、传参

tableHeader = [
      {
        label: 'API名称',
        prop: 'name',
        align: 'left',
        sortable: false,
        overflow: true,
        headertip: '测试测试测试测试测试测试测试测试测试测试测试测试',
      },
]

 5、最终效果