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