element-ui如何在table中使用tooltip
更新時(shí)間：2023年10月17日 15:43:05 作者：怕是個(gè)神仙啊
這篇文章主要介紹了element-ui如何在table中使用tooltip問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
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提示語
需求
給element-ui的table表的表頭的某一列鼠標(biāo)滑過的時(shí)候會有提示語顯示
廢話不多說直接上實(shí)例：
需要實(shí)現(xiàn)的需求就是上圖所示，在當(dāng)前列的dom標(biāo)簽中添加相對應(yīng)的方法，
示例代碼如下：
<el-table-column prop="hour" label="小時(shí)" :render-header="renderHeader"/>
renderHeader (h,{column}) { // h即為cerateElement的簡寫，具體可看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)文章
vue實(shí)現(xiàn)動態(tài)表單動態(tài)渲染組件的方式(2)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)動態(tài)表單動態(tài)渲染組件的方式第二篇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue 實(shí)現(xiàn)強(qiáng)制類型轉(zhuǎn)換 數(shù)字類型轉(zhuǎn)為字符串
今天小編就為大家分享一篇vue 實(shí)現(xiàn)強(qiáng)制類型轉(zhuǎn)換 數(shù)字類型轉(zhuǎn)為字符串，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
對vue v-if v-else-if v-else 的簡單使用詳解
今天小編就為大家分享一篇對vue v-if v-else-if v-else 的簡單使用詳解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue2.0 實(shí)現(xiàn)頁面緩存和不緩存的方式
今天小編就為大家分享一篇Vue2.0 實(shí)現(xiàn)頁面緩存和不緩存的方式，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue-cropper組件實(shí)現(xiàn)圖片切割上傳
這篇文章主要為大家詳細(xì)介紹了vue-cropper組件實(shí)現(xiàn)圖片切割上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要介紹了關(guān)于移動端與大屏幕自適應(yīng)適配方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue CLI3創(chuàng)建項(xiàng)目部署到Tomcat 使用ngrok映射到外網(wǎng)
這篇文章主要介紹了Vue CLI3創(chuàng)建項(xiàng)目部署到Tomcat 使用ngrok映射到外網(wǎng),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
vue.js的雙向數(shù)據(jù)綁定Object.defineProperty方法的神奇之處
今天小編就為大家分享一篇關(guān)于vue.js的雙向數(shù)據(jù)綁定Object.defineProperty方法的神奇之處，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2019-01-01
Vue Router是Vue提供的路由管理器,將組件與路由一一對應(yīng)起來,這種對應(yīng)關(guān)系就路由,這篇文章主要介紹了Vue中vue-router路由使用,需要的朋友可以參考下2024-06-06
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)登錄界面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06