其他分享
首页 > 其他分享> > element-ui简单方法实现自定义表头(render-header)

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

作者:互联网

:render-header="renderHeader"使用renderHeader这个方法

<el-table-column
 prop="postingAmt"
  label="已过账金额(元)"
  align="center"
  show-overflow-tooltip
  :render-header="renderHeader"
  width="160"
  ><template slot-scope="props">{{ $number2money(props.row.postingAmt) }}</template>
</el-table-column>
renderHeader(h, { column }) {
  // h即为cerateElement的简写,具体可看vue官方文档
  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;cursor:pointer;'
        })
      ]
    )
  ])
}

标签:el,自定义,render,header,表头,过账,props,renderHeader
来源: https://blog.csdn.net/weixin_44094836/article/details/113570163