BuildAdmin elementPlus自定义表头添加tooltip方法示例

更新时间：2023年09月19日 08:56:33 作者：秋刀鱼Bin

这篇文章主要介绍了BuildAdmin elementPlus 自定义表头,添加tooltip实现方法示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

引言

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

实现效果

column那边用到"render-header"

{
                label: '注册人数',
                prop: 'register',
                align: 'center',
                width: 105,
                operator: false,
                "render-header":(obj:anyObj,msg:string) =&gt; 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;
}

以上就是BuildAdmin elementPlus自定义表头添加tooltip方法示例的详细内容，更多关于BuildAdmin elementPlus表头添加的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Element DateTimePicker日期时间选择器的使用示例
这篇文章主要介绍了Element DateTimePicker日期时间选择器的使用示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-07-07
Vue.js每天必学之方法与事件处理器
Vue.js每天必学之方法与事件处理器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-09-09
vue实现简单的计算器功能
这篇文章主要为大家详细介绍了vue实现简单的计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-09-09
Vue.js原理分析之observer模块详解
这篇文章主要介绍了Vue.js中observer模块的相关资料，文中通过原理分析介绍还是相对的详细，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。
2017-02-02
vue2.0 解决抽取公用js的问题
这篇文章主要介绍了vue2.0 解决抽取公用js的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
Vue微信公众号网页分享的示例代码
这篇文章主要介绍了Vue微信公众号网页分享的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-05-05
Vue3-KeepAlive,多个页面使用keepalive方式
这篇文章主要介绍了Vue3-KeepAlive，多个页面使用keepalive方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
element的el-form-item的prop作用小结
Vue表单验证中的prop属性用于指定需要验证的表单字段,它定义了字段名称并与验证规则关联,确保数据的完整性和准确性,本文就来介绍一下element的el-form-item的prop作用,感兴趣的可以了解一下
2025-01-01
vue之elementUi的el-select同时获取value和label的三种方式
这篇文章主要介绍了vue之elementUi的el-select同时获取value和label的三种方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-02-02
vue使用axios post发送json数据跨域请求403的解决方案
这篇文章主要介绍了vue使用axios post发送json数据跨域请求403的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-12-12