Elementui【tooltip】 在彈框關閉之后再次‘出現’的問題

如圖，第一次彈窗進來的時候，符合條件之后，這個提示文字的位置是對的，而且正常顯示：

 

現在點擊取消按鈕，第二次進入彈窗，如圖，提示文字就跑到了左上角，而且輸入符合條件的數值之后，會另外顯示一個tooltip，這個提示會顯示在正確的位置。

 

好了，問題出現，就解決問題，看文檔是有個 disable 屬性的，表示該tooltip是否可用 ，那么就利用這個屬性去控制tooltip的顯示和隱藏，控制是否可用

 

 

 

代碼：

<template v-if="lossRate(dataForm.list, item, 'january') > 100 && visible === true">
   <el-tooltip :disabled='mydisabled' popper-class='warningTip' class="item" effect="light" 
 :manual="true" :value="true" content="不允許超過100.00" placement="left-start">
     <div>{{lossRate(dataForm.list, item, 'january')}}</div>
   </el-tooltip>
 </template>

重點在於標紅部分，設置動態的控制布爾值，並取消 mouseenter 和 mouseleave事件，即 :manual='true'，綁定其:value='true' 保持當前的tooltip始終顯示狀態。

mydisabled是自定義的布爾值，當關閉彈窗的時候，將mydisabled設置為true，當打開彈窗的時候設置為false即可。

this.mydisable = true / false

true表示不可用，false表示可用。

結合文檔理解使用即可。