el-table自定义表头，给表头添加点击事件

1、slot="header"

<el-table-column prop="handle">
    <template slot="header">
        <span @click="seeDetail">查看详情</span>
        <span class="explain" @click="seeHandle">只查看待处理</span>
    </template>
    <template slot-scope="scope">
        <span>{
   
   { scope.row.operateType === '1' ? '无申诉查看详情' : '申诉待处理' }}</span>
    </template>
</el-table-column>

2、render-header方法

<el-table-column
    prop="handle"
    :render-header="renderHeader"
    align="center">
    <template slot-scope="scope">
        <span :class="scope.row.handle === '1' ? 'noAppeal' : 'appeal'">{
   
   { scope.row.handle === '1' ? '无申诉查看详情' : '申诉待处理' }}</span>
    </template>
</el-table-column>

renderHeader (h, column) {
    return h('div', [
            h('span', {
                style: `cursor: pointer;`,
                on: {
                    click: this.seeDetail
                }
            }, '查看详情'),
            h('span', {
                style: `background-color: #666;margin-left: 10px;padding: 6px 10px;cursor: pointer;`,
                on: {
                    click: this.seeHandle
                }
            }, '只查看待处理')
        ]
    )
},
seeDetail() {
    console.log('查看详情111')
},
seeHandle() {
    console.log('查看待处理1111')
},