element-ui简单方法实现自定义表头(render-header)

render-header在官方文档中的介绍是这样的：

• 列标题 Label 区域渲染使用的 Function
• Function(h, { column, $index })
  修改列标题样式

1.在列标题后面加一个图标。

以element-ui官方文档一个table表格为例，我们在地址的后面加一个定位标志的图标，代码如下：

效果图：

2.对列标题进行换行

还是以上面的代码为例，只写关键代码：

···

    
···

···
// 让表格表头换行显示
    renderheader (h, { column, $index }) { // h即为cerateElement的简写，具体可看vue官方文档
      return h('span', {}, [
        h('span', {}, column.label.split('/')[0]),
        h('br'),
        h('span', {}, column.label.split('/')[1])
      ])
    },
···

效果图：

3.在列标题后面添加一个单选框

还是以上面的代码为例，只写关键代码：

...
// render 事件
renderHeader (h,{column}) { // h即为cerateElement的简写，具体可看vue官方文档
  return h(
   'div',
   [ 
     h('span', column.label),
     h('el-checkbox',{
       style:'margin-left:5px',
       on:{
         change:this.select // 选中事件 
       }
     })
   ],
 );
},
// 添加选中事件
select (data) {
  console.log(data);
}

效果图：

4.在表头添加一个Tooltip

我们经常会遇到一些奇怪的需求，但是即使再奇怪我们也不能认输，现在有一个需求，要在列表表题后面添加一个提示，我们开始尝试着做：

还是以上面的代码为例，刚开始我想直接用‘el-tooltip’，应该不是很难，然后就是这样：

...
renderHeader (h,{column}) {
  return h(
    'div',
    [ 
      h('span', column.label),
      h('el-tooltip',[
        h('i', {
          class:'el-icon-question',
          style:'color:#409eff;margin-left:5px;'
        })
      ],{
        content: '这是一个提示'
      })
    ]
  );
}
...

根据element-ui 关于tooltip的文档，我发现不管是effect, content还是placement 对tooltip都不管用，既然硬上不管用，就曲线救国，通过组件的方法，先造个轮子再走路

// 写一个PromptMessage的组件，并全局注册

然后在render-header事件中使用组件
这次我们发现，果然造的轮子还是挺不错的

...
renderTip (h,{column}) {
  return h(
    'div',{
      style:'display:flex;margin:auto;'
    },
    [
      h('span', column.label),
      h('prompt-message', {
        props: {messages: ["这是住址信息"]}
      })
    ]
  );
}
...

如果觉得麻烦，还有终极版，是的你没听错
这种不需要注册组件，直接就可以生效

···
renderHeader(h, { column }) {
  return h('div', [
    h('span', column.label),
    h(
      'el-tooltip',
      {
        props: {
          effect: 'dark',
          content: `这是住址信息`,
          placement: 'right',
        },
      },
      [
        h('i', {
          class: 'el-icon-question',
          style: 'color:#409eff;margin-left:5px;',
        }),
      ]
    ),
  ])
},
···

效果图：