vue+element ui el-tooltip動態(tài)顯示隱藏問題
更新時間：2023年10月17日 14:13:41 作者：myang，就這樣
這篇文章主要介紹了vue+element ui el-tooltip動態(tài)顯示隱藏問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue element ui el-tooltip動態(tài)顯示隱藏
近期在做一個項目時，遇到需要在table的單元格內(nèi)展示多行信息的需求，此時table組件中的show-overflow-tooltip屬性會將多行信息全部提示出來：
- 源碼：
- 效果：
而我的需求是鼠標(biāo)滑過單元格內(nèi)的每一行的時候，如果文字溢出，只需要提示鼠標(biāo)所在行的內(nèi)容，若文字未溢出，則不進(jìn)行提示，顯然table組件自帶的這個屬性是不能滿足的，于是換成了el-tooltip組件，然而，效果就是不管是否文字溢出，鼠標(biāo)滑過都會給出提示信息：
- 源碼：
- 效果：
所以，我們需要對el-tooltip進(jìn)行一個動態(tài)的展示，通過disabled屬性進(jìn)行顯隱控制，具體代碼如下：
- 源碼：
- 效果：
多行，文字溢出
文字未溢出：
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
教你如何開發(fā)Vite3插件構(gòu)建Electron開發(fā)環(huán)境
這篇文章主要介紹了如何開發(fā)Vite3插件構(gòu)建Electron開發(fā)環(huán)境,文中給大家提到了如何讓 Vite 加載 Electron 的內(nèi)置模塊和 Node.js 的內(nèi)置模塊，需要的朋友可以參考下2022-11-11
今天小編就為大家分享一篇vue-cli 打包使用history模式的后端配置實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
在?Vue.js?中,組件通信是開發(fā)過程中非常重要的一部分,它涉及到不同組件之間的數(shù)據(jù)傳遞和交互,本文將介紹如何實現(xiàn)父子組件之間的有效通信,并盤點了常見的5種Vue組件通信方式總結(jié),需要的朋友可以參考下2024-03-03
這篇文章主要為大家詳細(xì)介紹了Vue組件tree實現(xiàn)樹形菜單，小巧實用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
ECharts是一個強大的畫圖插件，在vue項目中，我們常常可以引用Echarts來完成完成一些圖表的繪制，本文就來和大家介紹一下如何在Vue項目中引入ECharts吧2023-03-03
這篇文章主要介紹了vue.js計算屬性computed用法,結(jié)合實例形式分析了vue.js使用computed方式進(jìn)行屬性計算的相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
key屬性是一個特殊的屬性，用于標(biāo)識每個節(jié)點的唯一性。在Vue2.x版本中的key和Vue3.x版本中的key有很大的不同，那么在這篇文章中，我們將會討論Vue2中的key和Vue3中的key的區(qū)別2023-04-04
教你60行代碼實現(xiàn)一個迷你響應(yīng)式系統(tǒng)vue
這篇文章主要為大家介紹了教你60行代碼實現(xiàn)一個迷你響應(yīng)式系統(tǒng)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪<BR>2023-03-03
在Vue 中,可以使用 props 向子組件傳遞數(shù)據(jù)，下面這篇文章主要給大家介紹了關(guān)于vue父組件通過props如何向子組件傳遞方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
Vue中this.$router.push參數(shù)獲取方法
下面小編就為大家分享一篇Vue中this.$router.push參數(shù)獲取方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02