el-table 自定义表头 使用方法 :render-header

因为维护了element ui 1.3.7 版的项目,要自定义表头和提示使用 :render-header

效果:

代码:

<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>

猜你喜欢

转载自blog.csdn.net/WDCCSDN/article/details/100662358