el-table自定义表头的两种方式

实现效果：

方法一：

 <el-table-column
      align="right">
      <template slot="header" slot-scope="{ column,$index }">
              <div class="item-top">
                <p class="gray-txt">{{ column.label }}</p>
                <el-popover
                  v-if="$index !== 0"
                  placement="top-start"
                  :title="column.label"
                  width="200"
                  trigger="hover"
                  :content="tabelPp3[$index].remark"
                >
                  <i
                    slot="reference"
                    class="iconfont icon-yiwen2222"
                    style="font-size: 16px"
                  />
                </el-popover>
              </div>
            </template>
    </el-table-column>

需要注意的是，问号图标用了el-popover组件，鼠标触碰上去就会显示后台返回的解释文字，但是column发现拿不到除了label以外的其他数据，于是只能定义$index，从源数组里面去取

方法二：

<el-table :data="tableLogData" style="width: 100%" header-cell-class-name="header-cell-color">
        <el-table-column  prop="level" min-width="100"  :render-header="renderHeader"></el-table-column>
</el-table>

renderHeader(h, { column,$index }) {
            return h('div', [
                h('span', column.label),
                h(
                    'el-tooltip',
                    {
                        props: {
                            effect: 'dark',
                            content:  this.tabelPp3[$index].remark,
                            placement: 'top',
                        },
                    },
                    [
                        h('i', {
                            class: 'el-icon-question',
                            style: 'color:#409eff;margin-left:5px;',
                        }),
                    ],
                ),
            ]);
        },