vue2 + elementUI 中table表头加复选框图标

前言： 最近做一个项目，要在表头加一个复选款控制表格里数据的switch.效果图如下：

没选中的时候如下图

选中的时候

要实现这样的效果必须解决三个问题，

一、给表格表头加上复选框的图标
二、通过复选框控制子元素
三、复选框的初始化问题

实现一我们要用到element提供的 :render-header=“renderHeader”，这个render-header属性，它是对应一个function的，我们通过自定义的renderHeader方法增加复选框

renderHeader方法实现如下

renderHeader(h,{column}){
      return h(
        'div',
        [ 
          h('span', column.label),
          h('el-checkbox',{
            style:'display:inline-flex;margin-left:5px;',
            on:{
              change: ($event, column) => this.select($event, column), // 选中事件 $event, column，这里$event=true,column是input的dom当在select里打印的时候
            }
          }),
        ],
      )
    },

小主们这里的h是vue2的原生方法，他相当于createElement这个js原生方法，是不是疑惑大开，

这里把select 的方法也奉献上

这里的targetEv需要在data()里初始化

data() {
  return {
    targetEv: []
  }
}

// 实现控制子项的方法

select(obj, $event = this.targetEv ){
      console.log($event.targe