el-table表格头部内容自定义

el-table表格头部内容自定义

在使用element UI中的表格组件进行开发时，表格头部的内容是通过设置<el-table-column>组件的label属性进行赋值，使用label属性的话，表格头部只能展示一些静态内容；今天接到一个需求，要求表格头部的内容在鼠标hover上去的时候提示信息，通过label属性设置表格头部内容就无法满足我们的需求，这时候就需要对表格头部的内容进行一个自定义，需要使用到<el-table-column>组件中提供的render-header属性，在具体介绍实现表格头部自定义前，先看一下需求的最终效果图：

从图中可以看出，当鼠标hover到问号图标上时，会有提示信息出现。

自定义表格头部需要使用elementUI提供的render-header列表属性：

从elementUI的table组件文档中可以看出该属性值为一个函数，有两个参数，第一个参数是h函数，也就是vue提供的渲染函数，我们就是利用h函数来生成我们自定义内容的虚拟DOM，进而渲染在页面中；第二个参数是一个对象，有两个属性，分别表示当前列的信息和当前列的index索引值；

在render-header属性值的函数中，我们可以将我们想要展示的内容，用h函数生成并返回，这样<el-table-column>就会根据render-header属性值返回的结果将内容展示出来，知道可以使用render-header属性完成表格头部内容自定义后，接下来任务就是如何将自定义内容通过h函数生成对应虚拟DOM，关于h函数生成虚拟DOM的可以看下面的扩展阅读；需要说明的是在上面这个需求中，我们使用elementUI提供的popover组件来完成信息提示功能；

其中的关键代码：

<el-table-column
  prop="address"
  :render-header="renderTableHeader">
</el-table-column>

renderTableHeader (h, {
    column, $index }) {
   
  return h('div', {
   }, [
    h('el-popover', {
   
      ref