ElementUI的Table組件中的renderHeader方法研究

項目使用ElementUI，挺好用的，頁面中有些地方的幫助提示經過使用組件Tooltip和el-icon-question來展現，代碼以下：

<div class="title">本月累計收益
  <el-tooltip class="item" content="截止至昨日本月累計收益" placement="top">
    <span class="el-icon-question"></span>
  </el-tooltip>
</div>

截圖以下：

另外也能夠看看jsfiddle的demo

全站不少地方都有都須要這樣的幫助提示，其中有些須要在表格的表頭上添加，彷佛有點難度。效果以下：

由於ElementUI上面的文檔對這塊自定義表頭沒有什麼參考的文檔，是否可以實現內心沒底，去仔細翻了文檔，發現有個renderHeader的函數能夠實現，一直覺得Vue還算比較熟悉的我有點點懵，這是個啥？？？

renderHeader（函數渲染）

在我不太多的Vue項目開發實踐中，不多用到，所以並不熟悉，先看看官方解釋：

Vue 推薦在絕大多數狀況下使用 template 來建立你的 HTML。然而在一些場景中，你真的須要 JavaScript 的徹底編程的能力，這就是 render 函數，它比 template 更接近編譯器。

ElementUI中的renderHeader就是對列標題Label區域渲染使用的Function，經過他實現自定義表頭label功能！

萬變不離其宗，這個ElementUI的解釋一看就像是這段官方示例：

// 官方示例部分
render: function (createElement) {
  return createElement('h1', this.blogTitle)
}

而回頭再看看ElementUI的示例：Function(h, { column, $index })。耐心琢磨，結合createElement看看便粗略寫出來了一個勉強能用的：

renderHeader(h, { column, $index }) {
  return h(
    'el-tooltip',
    {
      props: {
        content: (function() {
          let label = column.label
          switch (label) {
            case '訪問數':
              return '網站頁面上獨立訪問應用的人數（UV）'
              break
            case '提交數':
              return '網站頁面上訪客在應用上完成提交的數量'
              break
            case '成交數':
              return '網站頁面上最終成功在應用上完成提交的數量'
              break
          }
        })(),
        placement: 'top'
      },
      domProps: {
        innerHTML: column.label + '<span class="el-icon-question"></span>'
      }
    },
    [h('span')]
  )
},
// ...

可是很奇怪的是，最後面我要加上這個[h('span')]才行（demo）。

這種寫法我仍是參考element table 自定義表頭，可是假設我寫成[h('span', 'test')]是沒法展示出test的效果的（demo）。根據vue文檔中解釋的第三個參數，這裏最爲一個數組，爲什麼span成了el-tooltip的HTML標籤，我仍是不解。

之因此奇怪是由於假設我將引入的組件換成el-button，見以下代碼：

renderHeader(h, { column, $index }) {
  return h(
    'el-button',
    {
      props: {
        content: (function() {
          let label = column.label
        })()
      },
      domProps: {
        innerHTML: column.label + '<span class="el-icon-question"></span>'
      }
    }
  )
},
// ...

則不須要尾部那個[h('span')]。卻能呈現出button結合icon的正確效果（demo）。難道是由於這個組件自帶HTML標籤？胡亂猜疑是解決不了問題的。幾番嘗試，仍是沒能達到預期交互效果。不過進度問題，暫時只能使用這個勉強版本。

爲什麼稱之爲勉強版，由於從上面的 demo也看出來了。這個提示交互和我文章以前寫的交互是有區別的，正確交互是： 光標移入問號的圖標上纔會展現提示框，雖然目前勉強版影響不大，卻一直在心中如一個疙瘩。因而過了一週，決定抽空把這個問題處理好，就有了新的寫法。

勉強版雖然沒有大礙，可是心中略有不爽。幾往後專門抽點時間屢次閱讀各類實例，仔細閱讀文檔，反覆嘗試各類寫法。終於寫出了一個相對良好的版本，直接先上代碼：

renderHeader(h, { column, $index }) {
  return [
    column.label,
    h(
      'el-tooltip',
      {
        props: {
          content: (function() {
            let label = column.label
            switch (label) {
              case '訪問數':
                return '網站頁面上獨立訪問應用的人數（UV）'
                break
              case '提交數':
                return '網站頁面上訪客在應用上完成提交的數量'
                break
              case '成交數':
                return '網站頁面上最終成功在應用上完成提交的數量'
                break
            }
          })(),
          placement: 'top'
        }
      },
      [
        h('span', {
          class: {
            'el-icon-question': true
          }
        })
      ]
    )
  ]
}

這個寫法很特別，return的是一個數組，這個寫法我又是哪裏看到的呢？來自elementUI的table組件的表頭自定義：想把單位換行，有什麼解決方法嗎？的採納回覆中。乍一看有點亂七八糟，不過仔細想一想，以前的提示在整個表頭都觸發了，如今這個數組大概起到了拼接做用，也就是將不須要出發的textNode部分提了出來。再看數組第二個值，這即是一個完整的示例了。最終效果可見demo。

其實心中仍是有個疑問，爲何這裏h(param1, param2, param3)的第三個參數用數組，數組中的第一個又是一個h()，而且這個對應的就是組件el-tooltip的HTML標籤，沒有它就沒法正常渲染該組件。

寫到這裏，其實問題已經解決了，雖然符合需求的完美版本已經上線，可是感受我的對Vue或者說是Javascript更深層面的理解能力還不夠，也就對各類現象沒辦法作出很好的解釋。也但願能更加努力的學習和進步，更深的理解前端這門藝術：）