element-ui表格表头插入icon_el-table头部带领下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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

• 最后效果图