element-ui表格表头插入icon

element-ui中表格的表头增加icon并设置点击事件

• 首先看element-ui中给出的渲染label的函数render-header
• element组件库
  

<el-table-column prop="id" label="申请编号":render-header="renderHeader">
</el-table-column>

<script>
  method: {
     
	renderHeader(h, {
      column, $index }) {
     
      // h 是一个渲染函数       column 是一个对象表示当前列      $index 第几列
      let vm =  this
      return h('div', null,[
        h("span", column.label + "  ", {
       //这是左边的
          align: "left"
        }),
        h('span',null,[  //这个是渲染出来的icon
          h('i',{
     
            class :'el-icon-d-arrow-right',  //组件库的icon，可根据需要修改
            style:"margin-left: 5px; cursor: pointer;",
            on:{
     
              click: function () {
     
                console.log(1)
              }
            }
          },'')
        ]),
      ])
    }
  }
</script>

• 最后效果图