1. 构建悬浮框组件

element中的表头要自定义的话需要用到render-header这个方法，而经过实践证明使用Element的tooltip组件会出现BUG渲染不出来的问题。所以我们自己封装了一个悬浮框组件组件promptMessage.vue如下(注意要把promptMessage这个类定义一下display否则表头不渲染)：

<template>
  <div class="promptMessage">
    <el-tooltip effect="dark" placement="top">
      <div slot="content">
        <div v-for="item in messages" :key="item">
          {{item}}
        </div>
      </div>
      <i class="el-icon-question" style="color:#409eff;margin-left:5px;font-size:15px;"></i>
    </el-tooltip>
  </div>
</template>

<script>
  export default {
    props: ['messages']
  };
</script>
<style lang="scss" scoped>
.promptMessage{
    display: inline-block;
}
</style>

2. 表格render-header函数

render-header有两个参数一个是h是Hyperscript，一个是表格中的props，因为我们是自定义表头这里又要兼容排序我们需要把排序的两个图标也要放进h中代码如下：

        renderHeader(h, { column }) {
            let sortIcon = h(
                            'span',
                            {
                                'class': {
                                    'caret-wrapper': true
                                }
                            },
                            [
                                h('i', {
                                    'class': {
                                        'sort-caret': true,
                                        'ascending': true,
                                    }
                                }),
                                h('i', {
                                    'class': {
                                        'sort-caret': true,
                                        'descending': true,
                                    }
                                }),
                            ]
                        )
                return h(
                    'div',
                    [
                        h('span', column.label),
                        h('prompt-message', {
                            props: { messages: ['这是个悬浮框'] }
                        }),
                        sortIcon
                    ]
                )

剩下的就是表头的el-table-column上要设置sortable="custom"属性，这样悬浮提示框和排序都实现了。