elementui表头加hover效果

2019-12-12  本文已影响0人  蜗牛和曼巴

:render-header="renderstate"

<el-table-column
        slot="status"
        label="订单状态"
        align="center"
        class-name="small-padding fixed-width"
        :show-overflow-tooltip="true"
        :render-header="renderstate"
      >

methods

 renderstate(h, { column }) {
      const inReview = '审核中:待官方审核'
      const passReview = '审核通过:官方审核通过,待用户提现'
      const nothingReview = '审核失败:官方审核不通过'
      return h(
        'div', [
          h('span', column.label),
          h('el-tooltip', {
            props: {
              placement: 'top'
            }
          }, [
            inReview,
            h('div', {
              slot: 'content',
              style: {
                whiteSpace: 'normal',
                'margin-bottom': '10px'
              }
            }, inReview),
            passReview,
            h('div', {
              slot: 'content',
              style: {
                whiteSpace: 'normal',
                'margin-bottom': '10px'
              }
            }, passReview),
            nothingReview,
            h('div', {
              slot: 'content',
              style: {
                whiteSpace: 'normal',
                'margin-bottom': '10px'
              }
            }, nothingReview),
            h('i', {
              class: 'el-icon-question',
              style: 'color:#409eff;margin-left:5px;'
            })
          ],)
        ]
      )
    },
上一篇 下一篇

猜你喜欢

热点阅读