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

秋刀鱼Bin / 77 /

ChatGPT 可用网址,仅供交流学习使用,如对您有所帮助,请收藏并推荐给需要的朋友。
https://ckai.xyz

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

实现效果

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"
                    }
                )
            }
        )
    ])
}

BuildAdmin | elementPlus 自定义表头,添加tooltip
作者
秋刀鱼Bin
许可协议
CC BY 4.0
发布于
2023-09-19
修改于
2024-04-11
Bonnie image
尚未登录