快捷導(dǎo)航

el-tooltip配合el-button禁用時(shí)顯示提示的問(wèn)題

更新時(shí)間：2025年06月03日 09:41:42 作者：A-sleep

這篇文章主要介紹了el-tooltip配合el-button禁用時(shí)顯示提示的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

el-tooltip配合el-button禁用時(shí)顯示提示

比如項(xiàng)目中有這樣的一個(gè)需求，就是在某個(gè)頁(yè)面上有一些按鈕，這些按鈕的狀態(tài)不固定。

可能有時(shí)候按鈕會(huì)禁用不讓點(diǎn)擊。有時(shí)候按鈕是正常的狀態(tài)，允許點(diǎn)擊。

所以總結(jié)下來(lái)就是：如果是禁用狀態(tài)，當(dāng)鼠標(biāo)懸浮的時(shí)候，出現(xiàn)文字提示；如果是正常狀態(tài)，當(dāng)鼠標(biāo)懸浮的時(shí)候就不出現(xiàn)任何變化。好像挺簡(jiǎn)單的，不過(guò)里面有一個(gè)細(xì)節(jié)，需要注意下。

餓了么ui中的el-tooltip組件具有開(kāi)啟和關(guān)閉的功能，但是如果我們直接把組件套在el-button外面，我們會(huì)發(fā)現(xiàn)，el-tooltip無(wú)法開(kāi)啟了，好像也被el-button的禁用，無(wú)法打開(kāi)了。

解決方案

就是在el-button的外層，再加上一個(gè)div包裹起來(lái)，這樣的話，類名el-tooltip就會(huì)加到div身上，就不會(huì)受到按鈕禁用的影響了。

我們先看一下最終的效果圖

  <el-table-column label="操作" align="center" width="220px">
      <template #default="{ row }">
          <el-tooltip
             effect="dark"
             :disabled="row.DiskState !== 'ATTACHED'"
              content=""
              placement="top"
           >
            //將提示語(yǔ)換行顯示，如不需要換行直接寫入上方content
            <div style="width: 140px" slot="content">
             正常生命周期的彈性數(shù)據(jù)盤云硬盤才能直接擴(kuò)容
            </div>
 				// 需要用標(biāo)簽包裹 禁用時(shí)才會(huì)顯示提示語(yǔ)效果           
               <span style="margin: 0 10px">
                  <el-button
                    :disabled="row.DiskState === 'ATTACHED'"
                    type="text"
                    size="small"
                    @click="checkDetails(row)"
                  >
                   磁盤擴(kuò)容
                  </el-button>
                </span>
          </el-tooltip>
          <el-button type="text" size="small" @click="delcvmCbs(row)">
                資源銷毀
          </el-button>
     </template>
   </el-table-column>

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

解決Vue警告Write?operation?failed:computed?value?is?readonl
這篇文章主要給大家介紹了關(guān)于如何解決Vue警告Write?operation?failed:computed?value?is?readonly的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-03-03
vue實(shí)現(xiàn)側(cè)邊定位欄
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)側(cè)邊定位欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
基于Element的組件改造的樹(shù)形選擇器(樹(shù)形下拉框)
這篇文章主要介紹了基于Element的組件改造的樹(shù)形選擇器,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-02-02
Vue-cli3多頁(yè)面配置詳解
這篇文章主要介紹了Vue-cli3多頁(yè)面配置詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-03-03
如何在Vue中獲取DOM元素的實(shí)際寬高
使用vue的時(shí)候,想要獲得一個(gè)指定的元素的高度時(shí),下面這篇文章主要給大家介紹了關(guān)于如何在Vue中獲取DOM元素的實(shí)際寬高的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-09-09
關(guān)于Vue中echarts響應(yīng)式頁(yè)面變化resize()的用法介紹
Vue項(xiàng)目中開(kāi)發(fā)數(shù)據(jù)大屏，使用echarts圖表根據(jù)不同尺寸的屏幕進(jìn)行適配，resize()可以調(diào)用echarts中內(nèi)置的resize函數(shù)進(jìn)行自適應(yīng)縮放，本文將給大家詳細(xì)介紹resize()的用法,需要的朋友可以參考下
2023-06-06
vue3中實(shí)現(xiàn)組件通信的方法總結(jié)
在Vue3中，有多種方法可以實(shí)現(xiàn)組件之間的通信，本文就通過(guò)代碼示例給大家總結(jié)一些vue3實(shí)現(xiàn)組件通信的常用方法,需要的朋友可以參考下
2023-06-06
Vue3封裝自定義指令的操作步驟
在?Vue?3?中,封裝自定義指令可以幫助你更好地復(fù)用一些常見(jiàn)的DOM操作邏輯,自定義指令可以用于處理一些特定的用戶交互行為,本文給大家介紹了Vue3封裝自定義指令的示例,需要的朋友可以參考下
2024-11-11
nuxt實(shí)現(xiàn)封裝axios并且獲取token
這篇文章主要介紹了nuxt實(shí)現(xiàn)封裝axios并且獲取token,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
詳解polyfills如何按需加載及場(chǎng)景示例詳解
這篇文章主要為大家介紹了詳解polyfills如何按需加載及場(chǎng)景示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02