BuildAdmin | elementPlus 自定义表头，添加tooltip

秋刀鱼Bin

已于 2023-09-19 17:36:22 修改

阅读量913

点赞数

于 2023-09-19 01:50:32 首次发布

本文链接：https://blog.youkuaiyun.com/Ace_Bin/article/details/133004966

版权

文章讲述了作者在使用特定后端框架时，遇到关于如何在column中应用render-header的问题，通过深入源码调试实现并分享了解决方案，包括使用el-tooltip进行动态提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近后端用这个框架，今天遇到了这个问题，搜寻无果，看了下源码，捣鼓了好久才实现，记录一下。(:з」∠)
希望对遇到的朋友有帮助。

实现效果
在这里插入图片描述

column那边用到"render-header"

{
                label: '注册人数',
                prop: 'register',
                align: 'center',
                width: 105,
                operator: false,
                "render-header":(obj:anyObj,msg:string) => renderHeader(obj,'玩家下级团队当天注册人数（只包含一级）'),
}

然后render方法如下

const renderHeader = ({column}:any,msg:string)=> {
    return createVNode("div",null,[
        column.label,
        createVNode(
            resolveComponent('el-tooltip'),
            {
                effect: "dark",
                content: msg,
                placement: 'top'
            },
            {
                default: createVNode(
                    'i',
                    {
                        class:"fa fa-exclamation-circle"
                    }
                )
            }
        )
    ])
}