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更深层面的理解能力还不够，也就对各类现象没办法作出很好的解释。也但愿能更加努力的学习和进步，更深的理解前端这门艺术：）