vue2 + elementUI 中table表頭加複選框圖標

前言： 最近作一個項目，要在表頭加一個複選款控制表格裏數據的switch.效果圖以下：

沒選中的時候以下圖

選中的時候

要實現這樣的效果必須解決兩個問題，

1、給表格表頭加上覆選框的圖標

2、經過複選框控制子元素

3、複選框的初始化問題

實現一咱們要用到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.target)
      let me = this
      if ($event) {
        this.targetEv = $event  // 這裏是獲取當前點擊的input的dom元素賦值給this.targetEv，方便提交後初始化使用
      }
      console.log('進來就錯了',obj)
      if (obj === true) {
        this.flag = false
      } else {
        this.flag = true
      }
      this.targetEv.target.checked = obj
      this.targetEv.target.parentNode.className = obj ? 'el-checkbox__input is-checked' : 'el-checkbox__input'
      me.tableNewData.forEach((val, index) => {
        if (val.personId) {
          me.$set(me.tableNewData[index], 'check', obj.toString())
          if (obj === true) {
            this.changeSwitch(val)
          }
        }
      })
      obj = this.flag
      console.log(obj,me.tableNewData)
    },

//最後初始化，在提交成功後或者在其餘須要初始化的時候調用下面這句就OK了：

 this.select(false)

這裏的實現初始化我是經過dom去改變span的class類從而改變它的變化的，各位小主是否是以爲很簡單，可是我在作的時候但是忙了一會的，最主要以前不知道:render-header屬性和 on事件裏面這個column傳遞的是當前這個el-checkbox的dom結構。

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裏打印的時候
            }
          }),

 

如今有我先行一步踏坑，小主們可直接拿來主義（魯迅的拿來主義是個褒義詞額）就行了。網路上有個段子：

A問B 一個問題

A:魯迅到底姓魯仍是姓周？

B:媽了個巴子，魯迅固然姓魯，姓周的是周樹人，我語文老師教過咱們而且強調過的。

各位小主這個B是裝對了仍是裝成了13呀！

歡迎各位交流，指正個人錯誤，謝謝