el-tooltip配合el-button禁用時顯示提示的問題

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

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

el-tooltip配合el-button禁用時顯示提示

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

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

所以總結下來就是：如果是禁用狀態(tài)，當鼠標懸浮的時候，出現文字提示；如果是正常狀態(tài)，當鼠標懸浮的時候就不出現任何變化。好像挺簡單的，不過里面有一個細節(jié)，需要注意下。

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

解決方案

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

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

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