Vue?ElementUI在el-table中使用el-popover問題
ElementUI在el-table中使用el-popover
Vue ElementUI在el-table中使用el-popover，點擊嵌套內(nèi)容中的確定或取消來關(guān)閉el-popover。
<el-table-column width="100" align="center" label="操作">
? <template slot-scope="scope">
? ? <el-popover width="160" :ref="`popover-${scope.$index}`">
? ? ? <p>確定刪除該項嗎？</p>
? ? ? <div style="text-align: right; margin: 0">
? ? ? ? <el-button type="text" size="mini" @click="scope._self.$refs[`popover-${scope.$index}`].doClose()">
? ? ? ? ? 取消
? ? ? ? </el-button>
? ? ? ? <el-button type="danger" size="mini" >確定</el-button>
? ? ? </div>
? ? ? <el-button type="text" slot="reference">刪除</el-button>
? ? </el-popover>
? </template>
</el-table-column>方法二
<el-table-column width="100" align="center" label="操作">
? <template slot-scope="scope">
? ? <el-popover width="160" :ref="`popover-${scope.$index}`">
? ? ? <p>確定刪除該項嗎？</p>
? ? ? <div style="text-align: right; margin: 0">
? ? ? ? <el-button type="text" size="mini" @click="handleClose(scope.$index)">
? ? ? ? ? 取消
? ? ? ? </el-button>
? ? ? ? <el-button type="danger" size="mini" >確定</el-button>
? ? ? </div>
? ? ? <el-button type="text" slot="reference">刪除</el-button>
? ? </el-popover>
? </template>
</el-table-column>
<script>
?...
? ?handleClose(index) {
? ? ?this.$refs[`popover-${index}`].doClose()
? ?}
?...
</script>方法三
<div ref="closepopover">
<el-table-column ?label="操作">
?<template slot-scope="item">
? <el-popover
? ? placement="right"
? ? title="確定刪除？"
? ? width="200"
? ? v-model="item.row.visible"
? ? trigger="click">
? ? <div style="text-align: right; margin: 0">
? ? ? <el-button size="mini" type="text" @click="updateVisible()">取消</el-button>
? ? ? <el-button type="primary" size="mini" @click="updateVisible()">確定</el-button>
? ? </div>
? ? <el-button slot="reference">刪除</el-button>
? </el-popover>
</template >
</el-table-column>
//也可解決
updateVisible(){
? ? this.$refs.closepopover.click();
}el-popover在el-table中會出現(xiàn)不顯示情況
Popover 的屬性與 Tooltip 很類似 都是彈出提示，一般情況下，如果是固定提示內(nèi)容的話，采取Tooltip 簡單了事。
接觸到一個需求，el-table其中一列，根據(jù)后端返回的數(shù)據(jù)不同展示不同的 btn，其中一個btn 需要鼠標(biāo)hover 的時候 獲取該行元素的 id（需要在hover的時候 通過調(diào)接口獲?。藭r使用Tooltip就無法達(dá)到動態(tài)顯示提示內(nèi)容的效果了。
Popover 在基于Tooltip 有@show事件，當(dāng)提示內(nèi)容hover的時候，可以觸發(fā)@show回調(diào)，此時可以去請求后端接口獲取需要的數(shù)據(jù)。
問題： 在el-table-column 內(nèi) 使用el-popover 有時候會出現(xiàn)hover 不顯示提示框的情況
總所周知，el-table-column 代表的是 列，在其中寫 一個el-popover ，其相當(dāng)于 寫了N個，（N取決于el-table 中 data 的 數(shù)組長度） table 常常 與 分頁 一起使用
以下屬于個人猜測，為了解釋給自己聽的
由于el-table data數(shù)據(jù)長度，遍歷出多個 el-popover 而 el-popover 是根據(jù)條件row.staus === 1 判斷是否出現(xiàn)的 （其中el-popover 的一些熟悉 就不寫了）
<el-table-column >
?<template #default="{row}">
? <el-popover ....>
? ? <span>需要顯示的文本內(nèi)容</span>
? ? <div slot="reference" v-if="row.status === 1">查看內(nèi)容</div>
? </el-popover>
? <div v-if="row.status === 2">暫無內(nèi)容</div>
?</template>
</el-table-column>此時可能會出現(xiàn)一種情況，第一頁table 有10條數(shù)據(jù)， 其中第一條 和 第5條的row.status === 1
第二頁 只有2條數(shù)據(jù)，第一條row.status === 2 第二條 row.status === 2
bug 復(fù)現(xiàn)： 當(dāng)我第一次進(jìn)入頁面， hover 第一頁的第一條數(shù)據(jù) 能夠正常顯示 <span>內(nèi)容，也能正常顯示第五條<span>內(nèi)容，
當(dāng)我切換到第二頁，由于第二頁只有兩條數(shù)據(jù)，而且status === 2 所以 hover 是不會顯示數(shù)據(jù)的， 這個時候 我再切換到第一頁，再次hover 到第一條數(shù)據(jù)發(fā)現(xiàn)，此時row.status === 1 的那條數(shù)據(jù)不再顯示<span>內(nèi)容了 然而 第一頁的 第五條數(shù)據(jù) row.status ===1 hover 還是能正常顯示<span>內(nèi)容
經(jīng)過上述操作，（個人覺得，沒有官方判斷）第一頁的第一條本應(yīng)該hover 展示<span>內(nèi)容的 卻沒有展示 是因為 可能復(fù)用了 第二頁第一條row.status === 2 的el-popover
為了防止 el-popover 復(fù)用，采取兩個方法 ：
1. 給el-popover不同的ref
2. 將v-if 判斷同步移到 el-popover里
<el-table-column >
?<template #default="{row}">
? <el-popover v-if="row.status === 1" :ref="`node-${row.id}`">
? ? <span>需要顯示的文本內(nèi)容</span>
? ? <div slot="reference" v-if="row.status === 1">查看內(nèi)容</div>
? </el-popover>
? <div v-if="row.status === 2">暫無內(nèi)容</div>
?</template>
</el-table-column>當(dāng) row.status !==1 時 el-popover 自然而然就被銷毀了，也就不存在復(fù)用的情況，若出現(xiàn)第一頁 和 第二頁 都是row.status === 1 的情況，此時 由于ref 不同也不會復(fù)用 （下劃線內(nèi)容 為個人判斷）
經(jīng)過上述操作，大致能解決 el-popover 不顯示的問題 （由于個人對該組建理解不是很深刻，所以不敢打包票 百分百解決）
額外內(nèi)容：
通過查看el-popover 的源碼 發(fā)現(xiàn) 存在一些 element 組件options沒有 給出的一些方法，可以配合 ref 一起使用，能實現(xiàn)一些特殊功能的處理 。 通過 this.$refs['el-popover的ref'].方法()
通過查看源碼可以發(fā)現(xiàn)，el-popover 中的methods 有以下幾個方法：
doShow(): 展示el-popoverdoClose(): 關(guān)閉el-popoverdoToToggle(): 取反 關(guān)閉則展示，展示則關(guān)閉
tips:
當(dāng)el-popover 內(nèi) 不寫 slot=“reference” 其中內(nèi)容是不會展示（div內(nèi)容）的 例如：
<el-popover> ?<div>沒有使用slot插槽</div> </el-popover>
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue中組件的緩存，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
本篇文章主要介紹了Vue獲取DOM元素樣式和樣式更改示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
vue 動態(tài)樣式綁定 class/style的寫法小結(jié)
這篇文章主要介紹了vue 動態(tài)樣式綁定 class/style的寫法小結(jié),本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue路徑上如何設(shè)置指定的前綴，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue表單驗證?trigger:'blur'OR?trigger:'change&ap
利用?elementUI?實現(xiàn)表單元素校驗時，出現(xiàn)下拉框內(nèi)容選中后校驗不消失的異常校驗情形，這篇文章主要介紹了Vue表單驗證?trigger:‘blur‘?OR?trigger:‘change‘?區(qū)別,需要的朋友可以參考下2023-09-09
vue項目下npm或yarn下安裝echarts多個版本方式
這篇文章主要介紹了vue項目下npm或yarn下安裝echarts多個版本方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
如果你寫過vue，對v-bind這個指令一定不陌生。 下面小編將從源碼層面去帶大家剖析一下v-bind背后的原理,需要的小伙伴可以參考下面章的具體內(nèi)容2021-09-09
這篇文章主要介紹了vue-cli--組件的導(dǎo)入與使用詳解，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了Vue ECharts圖表通用配置，Echarts，它是一個與框架無關(guān)的 JS 圖表庫，但是它基于Js，這樣很多框架都能使用它，例如Vue，估計IONIC也能用2022-12-12
這篇文章主要為大家詳細(xì)介紹了vue的插槽，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02