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