How to use el-table custom header: render-header

Because the element ui 1.3.7 version of the project is maintained, you need to customize the header and prompt to use :render-header

effect:

Code:

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

<script>
// 自定义表头提示用法
// import promptMessage from 'components/common/promptMessage'
// Vue.component('promptMessage', promptMessage)
// <el-table-column prop="orderNo" label="示例" :render-header="renderHeader">
// </el-table-column>
// renderHeader (h,{column}) {
//     return h(
//     'div',{
//         style:'display:flex;margin:auto;'
//     },
//     [
//         h('span', column.label),
//         h('prompt-message', {
//         props: {messages: ["提示信息"]}
//         })
//     ]
//     );
// },
export default {
    props: {
        messages: {
            type: Array,
            default: ['暂无'],
        }
    }
};
</script>