ElementUI中tooltip出現無法顯示問題如何解決

這篇“ElementUI中tooltip出現無法顯示問題如何解決”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“ElementUI中tooltip出現無法顯示問題如何解決”文章吧。

ElementUI中tooltip出現無法顯示 

代碼，當el-tooltip標簽中的元素添加v-if時候，會出現無法顯示問題

<el-tooltip class="item" effect="dark" width="200" placement="top">
  <div slot="content" >
    {{
      scope.row.approvalMsg ? scope.row.approvalMsg : '暫無拒絕原因'
    }}
  </div>
  <i
    v-if="scope.row.status === -1"
    class="el-icon-question"
    
  ></i>
</el-tooltip>

問題顯示

解決辦法

1. 可以直接在el-tooltip標簽上添加相同的v-if標簽判斷

<el-tooltip 
	class="item" 
	effect="dark" 
	width="200" 
	placement="top"
	v-if="scope.row.status === -1"
>
  <div slot="content" >
    {{
      scope.row.approvalMsg ? scope.row.approvalMsg : '暫無拒絕原因'
    }}
  </div>
  <i
    v-if="scope.row.status === -1"
    class="el-icon-question"
    
  ></i>
</el-tooltip>

2. 可以把v-if替換為v-show

<el-tooltip 
	class="item" 
	effect="dark" 
	width="200" 
	placement="top"
>
  <div slot="content" >
    {{
      scope.row.approvalMsg ? scope.row.approvalMsg : '暫無拒絕原因'
    }}
  </div>
  <i
    v-show="scope.row.status === -1"
    class="el-icon-question"
    
  ></i>
</el-tooltip>

讓elementui的slider 一直顯示tooltip

elementui的slider控件

    <el-slider
              v-model="value1"
              :min="1"
              :max="100"
              :show-tooltip="true"
              :format-tooltip="formatTooltip"
              :disabled="isQuestion"
              ref="slider1"
            />

打印這個控件

this.$nextTick(() => {
console.log(this.$refs.slider1)
})

輸出如下

調用這個函數，這個時候tooltip就顯示出來了，問題解決

this.$nextTick(() => {
  this.$refs.slider1.setPosition(70)
})

以上就是關于“ElementUI中tooltip出現無法顯示問題如何解決”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。