美文网首页
2020-05-09 el-table表头自定义图标,el-to

2020-05-09 el-table表头自定义图标,el-to

作者: 祭孑 | 来源:发表于2020-05-11 09:14 被阅读0次
<el-table-column label="领取状态" prop="state" :render-header="renderHeader">
  <template slot-scope="scope">
    {{scope.row.state == 4 ? '入账失败' : state[scope.row.state]}}
  </template>
</el-table-column>

renderHeader (h, {column) {
   const array = [
      h('div', {slot: 'content',style: 'font-size:14px;line-height:25px;', '积分、商城优惠券:'),
      h('div', {slot: 'content',style: 'font-size:14px;line-height:25px;', '未入账:未调用接口'),
      h('div', {slot: 'content',style: 'font-size:14px;line-height:25px;', '入账中:线程批次跑批执行入账,正在调用接口未完成'),
      h('div', {slot: 'content',style: 'font-size:14px;line-height:25px;', '入账失败:接口响应失败'),
      h('div', {slot: 'content',style: 'font-size:14px;line-height:25px;', '入账成功:接口响应成功'),
   ]
   return h(
    'div', [
      h('span', column.label),
      h('el-tooltip', {
          props: {
              effect: 'dack',
              placement: 'top'
          }
      }, [
          array,
          h('i', {
             class:'el-icon-question',
             style: 'color: #409eff;margin-left:5px;'
          })
      ]
    ]
  )
}

相关文章

网友评论

      本文标题:2020-05-09 el-table表头自定义图标,el-to

      本文链接:https://www.haomeiwen.com/subject/peflnhtx.html