element-ui如何在table中使用tooltip
更新時(shí)間：2023年10月17日 15:43:05 作者：怕是個(gè)神仙啊
這篇文章主要介紹了element-ui如何在table中使用tooltip問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
element-ui在table中使用tooltip
element-ui官網(wǎng)上提供了tooltip-effect和show-overflow-tooltip屬性
使用table中的tooltip-effect屬性，
- el-table 標(biāo)簽上 加 tooltip-effect="light"
- el-table-column標(biāo)簽上 加 :show-overflow-tooltip="true"
如下所示：
<el-table :data="tableData" tooltip-effect="light">
<el-table-column prop="name" label="姓名" :show-overflow-tooltip="true">
</el-table-column>
</el-table>效果圖如下：
給element-ui的table表的表頭添加tooltip提示語(yǔ)
需求
給element-ui的table表的表頭的某一列鼠標(biāo)滑過(guò)的時(shí)候會(huì)有提示語(yǔ)顯示
廢話不多說(shuō)直接上實(shí)例：
需要實(shí)現(xiàn)的需求就是上圖所示，在當(dāng)前列的dom標(biāo)簽中添加相對(duì)應(yīng)的方法，
示例代碼如下：
<el-table-column prop="hour" label="小時(shí)" :render-header="renderHeader"/>
renderHeader (h,{column}) { // h即為cerateElement的簡(jiǎn)寫，具體可看vue官方文檔
return h(
‘div',[
h(‘span', column.label),
h(‘el-tooltip',{
props:{
effect:‘dark',
content:‘小時(shí)統(tǒng)計(jì)該時(shí)段整體數(shù)據(jù)，如當(dāng)小時(shí)為09:00時(shí)，那統(tǒng)計(jì)的就是09:00-09:59時(shí)段的整體曝光量和設(shè)備屏數(shù)',
placement:‘top',
},
},
[h(‘i', {
class:‘el-icon-question',
style:‘color:#409eff;margin-left:5px;cursor:pointer;'
})],
{content: ‘小時(shí)統(tǒng)計(jì)該時(shí)段整體數(shù)據(jù)，如當(dāng)小時(shí)為9:00時(shí)，那統(tǒng)計(jì)的就是09:00-09:59時(shí)段的整體曝光量和設(shè)備屏數(shù)'})
]
);
},總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
uniapp Vue3中如何解決web/H5網(wǎng)頁(yè)瀏覽器跨域的問(wèn)題
存在跨域問(wèn)題的原因是因?yàn)闉g覽器的同源策略,也就是說(shuō)前端無(wú)法直接發(fā)起跨域請(qǐng)求,同源策略是一個(gè)基礎(chǔ)的安全策略,但是這也會(huì)給uniapp/Vue開(kāi)發(fā)者在部署時(shí)帶來(lái)一定的麻煩,這篇文章主要介紹了在uniapp Vue3版本中如何解決web/H5網(wǎng)頁(yè)瀏覽器跨域的問(wèn)題,需要的朋友可以參考下2024-06-06
vue3中使用ref和emit來(lái)減少props的使用示例詳解
現(xiàn)在在開(kāi)發(fā)vue3項(xiàng)目的過(guò)程中，我們開(kāi)發(fā)小組漸漸的減少props的使用，轉(zhuǎn)而用ref 和 emit 來(lái)代替，這篇文章主要介紹了vue3中使用ref和emit來(lái)減少props的使用,需要的朋友可以參考下2022-06-06
利用Vue與D3.js創(chuàng)建交互式數(shù)據(jù)可視化
在現(xiàn)代Web開(kāi)發(fā)中,數(shù)據(jù)可視化是一個(gè)引人矚目的熱點(diǎn)領(lǐng)域,從簡(jiǎn)單的圖表到復(fù)雜的交互式儀表盤,數(shù)據(jù)可視化能夠幫助用戶更好地理解數(shù)據(jù),而Vue與D3.js的結(jié)合則為我們提供了構(gòu)建這些可視化效果的強(qiáng)大工具,本文將向您展示如何利用Vue與D3.js創(chuàng)建一個(gè)基本的交互式數(shù)據(jù)可視化項(xiàng)目2025-02-02
Vue中Video標(biāo)簽播放解析后短視頻去水印無(wú)響應(yīng)解決
這篇文章主要為大家介紹了Vue中使用Video標(biāo)簽播放?＜解析后的短視頻＞去水印視頻無(wú)響應(yīng)的解決方式，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-04-04
本文詳細(xì)講解了vue3獲取當(dāng)前路由地址的方法，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-01-01
Vue實(shí)現(xiàn)倒計(jì)時(shí)小功能
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)倒計(jì)時(shí)小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Mock.js在Vue項(xiàng)目中的使用小結(jié)
這篇文章主要介紹了Mock.js在Vue項(xiàng)目中的使用,在vue.config.js中配置devServer，在before屬性中引入接口路由函數(shù)，詳細(xì)步驟跟隨小編通過(guò)本文學(xué)習(xí)吧2022-07-07
vue2.0頁(yè)面前進(jìn)刷新回退不刷新的實(shí)現(xiàn)方法
這篇文章主要介紹了vue2.0頁(yè)面前進(jìn)刷新回退不刷新的實(shí)現(xiàn)方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
很多朋友經(jīng)常遇到這樣的功能，只允許輸入數(shù)字，允許設(shè)置初始值、最大值、最小值，今天小編給大家分享示例代碼給大家介紹vue數(shù)字輸入框功能，感興趣的朋友一起看看吧2020-01-01
cordova+vue+webapp使用html5獲取地理位置的方法
這篇文章主要介紹了2019-07-07