博客

render-header

render-header在官方文档中的介绍是这样的：

HMLT部分

<el-table-column prop="" show-overflow-tooltip label="待发放奖品项数" :render-header="renderTip" align="center" ></el-table-column> //设置icon 将会用到 render-header

JS部分

methods: {
 renderTip(h, { column }) { // h即为cerateElement的简写，具体可看vue官方文档
      const inReview = '需要进行线下发放的奖品项数!'
      return h('div', [
        h('span', column.label),
        h(
          'el-tooltip',
          {
            props: {
              effect: 'dark',
              placement: 'top'
            }
          },
          [
            h('div', {
              slot: 'content',
              style: {
                'max-width': '250px',
                whiteSpace: 'normal',
              }
            }, inReview),
            h('i', {
              class: 'el-icon-question',
              style: 'color:#409eff;margin-left:5px; font-size:18px;vertical-align: -0.125em;'
            })
          ]
        )
      ])
    }
    }