BuildAdmin elementPlus自定義表頭添加tooltip方法示例

更新時(shí)間：2023年09月19日 08:56:33 作者：秋刀魚Bin

這篇文章主要介紹了BuildAdmin elementPlus 自定義表頭,添加tooltip實(shí)現(xiàn)方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

引言

最近后端用這個(gè)框架，今天遇到了這個(gè)問題，搜尋無果，看了下源碼，搗鼓了好久才實(shí)現(xiàn)，記錄一下。_(:з」∠)_

實(shí)現(xiàn)效果

column那邊用到"render-header"

{
                label: '注冊人數(shù)',
                prop: 'register',
                align: 'center',
                width: 105,
                operator: false,
                "render-header":(obj:anyObj,msg:string) =&gt; renderHeader(obj,'玩家下級團(tuán)隊(duì)當(dāng)天注冊人數(shù)（只包含一級）'),
}

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

/* 自適應(yīng)-e */
.my-tooltip::before{
    float: right;
    margin-left: 2px;
}

以上就是BuildAdmin elementPlus自定義表頭添加tooltip方法示例的詳細(xì)內(nèi)容，更多關(guān)于BuildAdmin elementPlus表頭添加的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

vue mint-ui學(xué)習(xí)筆記之picker的使用
本篇文章主要介紹了vue mint-ui學(xué)習(xí)筆記之picker的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-10-10
vue 使用localstorage實(shí)現(xiàn)面包屑的操作
這篇文章主要介紹了vue 使用localstorage實(shí)現(xiàn)面包屑的操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
如何在Vue 3項(xiàng)目中配置和使用SCSS
本文詳細(xì)介紹了在Vue3項(xiàng)目中配置和使用SCSS的步驟,包括安裝依賴、配置vue.config.js、在組件中使用SCSS、全局樣式管理、SCSS模塊化以及深度選擇器的使用,同時(shí),還提供了解決常見問題和優(yōu)化建議
2025-11-11
Vue3.0實(shí)現(xiàn)無限級菜單
這篇文章主要為大家詳細(xì)介紹了基于Vue3.0實(shí)現(xiàn)無限級菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
vue 組件中添加樣式不生效的解決方法
這篇文章主要介紹了vue 組件中添加樣式不生效的解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-07-07
Vue3使用element-plus實(shí)現(xiàn)彈窗效果
本文主要介紹了Vue3使用element-plus實(shí)現(xiàn)彈窗效果，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07
element-ui el-dialog嵌套table組件,ref問題及解決
這篇文章主要介紹了element-ui el-dialog嵌套table組件,ref問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-02-02
Vue+canvas實(shí)現(xiàn)水印功能
實(shí)際項(xiàng)目中偶爾會遇到給項(xiàng)目頁面背景加水印的需求,這篇文章主要為大家介紹了Vue使用canvas實(shí)現(xiàn)水印功能的示例代碼，希望對大家有所幫助
2023-07-07
vue實(shí)現(xiàn)點(diǎn)擊翻轉(zhuǎn)效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)點(diǎn)擊翻轉(zhuǎn)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-07-07
Vue使用v-bind動態(tài)綁定CSS樣式
這篇文章給大家介紹了Vue使用v-bind動態(tài)綁定CSS樣式,文中有相關(guān)的代碼示例供大家參考,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
2024-02-02