美文网首页
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