解決ElementUI中tooltip出現(xiàn)無法顯示的問題
更新時間：2023年03月11日 12:07:27 作者：小火車況且況且
這篇文章主要介紹了解決ElementUI中tooltip出現(xiàn)無法顯示的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
ElementUI中tooltip出現(xiàn)無法顯示
代碼，當el-tooltip標簽中的元素添加v-if時候，會出現(xiàn)無法顯示問題
<el-tooltip class="item" effect="dark" width="200" placement="top">
<div slot="content" style="width: 400px">
{{
scope.row.approvalMsg ? scope.row.approvalMsg : '暫無拒絕原因'
}}
</div>
<i
v-if="scope.row.status === -1"
class="el-icon-question"
style="margin-left: 5px; cursor: pointer"
></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" style="width: 400px">
{{
scope.row.approvalMsg ? scope.row.approvalMsg : '暫無拒絕原因'
}}
</div>
<i
v-if="scope.row.status === -1"
class="el-icon-question"
style="margin-left: 5px; cursor: pointer"
></i>
</el-tooltip>
2. 可以把v-if替換為v-show
<el-tooltip
class="item"
effect="dark"
width="200"
placement="top"
>
<div slot="content" style="width: 400px">
{{
scope.row.approvalMsg ? scope.row.approvalMsg : '暫無拒絕原因'
}}
</div>
<i
v-show="scope.row.status === -1"
class="el-icon-question"
style="margin-left: 5px; cursor: pointer"
></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)
})
輸出如下
調(diào)用這個函數(shù)，這個時候tooltip就顯示出來了，問題解決
this.$nextTick(() => {
this.$refs.slider1.setPosition(70)
})
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue在自定義指令綁定的處理函數(shù)中傳遞參數(shù)
這篇文章主要介紹了Vue在自定義指令綁定的處理函數(shù)中傳遞參數(shù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了vue引入axios同源跨域問題，文章給大家提供了解決方案，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09
這篇文章主要為大家詳細介紹了vue實現(xiàn)簡易計時器組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了vue項目如何通過url鏈接引入其他系統(tǒng)頁面問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue無法訪問.env.development定義的變量值問題及解決
這篇文章主要介紹了Vue無法訪問.env.development定義的變量值問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
VUEX 數(shù)據(jù)持久化,刷新后重新獲取的例子
今天小編就為大家分享一篇VUEX 數(shù)據(jù)持久化,刷新后重新獲取的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue3使用useMouseInElement實現(xiàn)圖片局部放大預覽效果實例代碼
現(xiàn)在很多的項目里面圖片展示縮略圖,然后點擊實現(xiàn)圖片預覽,放大的功能,下面這篇文章主要給大家介紹了關(guān)于vue3使用useMouseInElement實現(xiàn)圖片局部放大預覽效果的相關(guān)資料,需要的朋友可以參考下2023-03-03
這篇文章主要為大家詳細介紹了vue實現(xiàn)右鍵彈出菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了vue中如何獲取當前路由name，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了解決Vue 給mapState中定義的屬性賦值報錯的問題,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06