关于element-plus:BuildAdmin-elementPlus-自定义表头添加tooltip

38次阅读

共计 549 个字符,预计需要花费 2 分钟才能阅读完成。

最近后端用这个框架,明天遇到了这个问题,搜查无果,看了下源码,捣鼓了良久才实现,记录一下。_(:з」∠)_
心愿对遇到的敌人有帮忙。

实现成果

column 那边用到 ”render-header”

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

而后 render 办法如下

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

css

/* 自适应 -e */
.my-tooltip::before{
    float: right;
    margin-left: 2px;
}

正文完
 0