開發十年，就只剩下這套架構體系了！ >>>   

前言： 最近做一個專案，要在表頭加一個複選款控制表格裡資料的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.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呀！

歡迎各位交流，指正我的錯誤，