ElementUI中table表格自定义表头Tooltip文字提示

table表格需要增加提示文案说明，没有现成的属性添加，我们可以通过render-header来渲染表头。

代码如下：

<el-table-column
        align="center"
        label="价格"
        :render-header="renderTipsHeader"
      >
        <template slot-scope="scope">
          {{ scope.row.amount }}
        </template>
</el-table-column>

renderTipsHeader：

renderTipsHeader (h,{column}) {
      return h(
        'div',[ 
             h('span', column.label),
             h('el-tooltip',{
　　　　      props:{
　　　　　　　　effect:'dark',
　　　　　　　　content:'提示文案',
　　　　　　　　placement:'top'
　　　　　　},　　　 
　　　　 },[
                 h('i', {
                     class:'el-icon-question',
                     style:'color:#409EFF;margin-left:5px;'
                 })
            ])
        ]
    );
 }

效果如图：

render-header 列标题 Label 区域渲染使用的 Function 
Function(h, { column, $index })

感兴趣可以打印出来看看，这里还有更复杂的应用–https://github.com/Darkerxi/ElementUI-Table-column_render-header

参考文章：
element-ui自定义table表头，修改标题样式、添加tooltip及 :render-header使用简介

本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。