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 }) 

感兴趣可以打印出来看看,这里还有更复杂的应用–github.com/Darkerxi/ElementUI-Tabl...


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

本作品采用《CC 协议》,转载必须注明作者和本文链接