美文网首页
elementui表头加hover效果

elementui表头加hover效果

作者: 蜗牛和曼巴 | 来源:发表于2019-12-12 11:51 被阅读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;'
            })
          ],)
        ]
      )
    },

相关文章

网友评论

      本文标题:elementui表头加hover效果

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