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