vue自定义表头添加图标并绑定事件

<el-table  :data="tableData" >

　　<template v-for="(item, index) in tableLabel">

　　　　<el-table-column

                          :key="index"

                          align="center"

                          :type="item.type"

                          :prop="item.prop"

                          :width="item.width"

                          :column-key="item.prop"

                          :render-header="renderHeader"/>

　　

　　</template>

</el-table >

data () {
  return {

　　tableLabel：[{type:'day',prop:'day',width:120,label:'日'},{type:'hour',prop:'hour',width:120,label:'小时'}],

　　tableData：[{day:'20200729',hour:'03'},{day:'20200730',hour:'03'}],
  }
},
methods: {

    // render 事件

    renderHeader(h, { column, $index }) { // h即为cerateElement的简写，具体可看vue官方文档

      return h(

        'div',

        [

          h('span', column.label),

          h('i', {

            class: 'el-icon-refresh',

            style: 'color:#409eff;margin-left:5px;pointer-events: auto;',

            on: {

              click: () => { //一定要用箭头函数

                this.switchClick($index, column)

              }

            }

          }, '')

        ]

      )

    },

    switchClick(index, data) {

      console.log(index)

    }

}